feat(@uform/antd/next): Optimize the description of the word count ca…

…lculation rules and docs #117
alibaba · Jun 16, 2019 · 65c449e · 65c449e
2 parents e9cc882 + 4a9f705
commit 65c449e
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 15 deletions.
diff --git a/docs/API/Field_React.md b/docs/API/Field_React.md
@@ -20,6 +20,7 @@ import {Field} from '@uform/react'
 | minItems | 最小条目数，只有在type="array"时可以使用 | Number |  |  |
 | name | 字段名称 | Object | {} |  |
 | required | 字段是否必填 | Boolean | false |  |
+| description | 字段描述，如果字符串字数超过20字或内容是ReactNode，会自动以pop形式展示 | String/React Node | '' |  |
 | type | 字段类型 | Object |  |  |
 | x-component | 字段UI组件，用于指定该字段应该用什么组件做渲染 | Object | {type:"object",properties:{}} |  |
 | x-effect | 副作用事件绑定对象 | `Function(dispatch : Function) : {    [eventName](...arguemtns)}` |  |  |

diff --git a/docs/API/registerFormField.md b/docs/API/registerFormField.md
@@ -2,7 +2,9 @@
 
 ## 介绍
 
-注册一个表单字段组件
+注册一个表单字段组件，主要用于扩展自定义控件，您的自定义控件只需要与正常的Input组件类似，接收value/onChange这样的受控控制即可完全接入uform.
+
+> 注意：被接入的自定义组件的props就是Field组件的x-props。所以我们在使用自定义组件的时候，除了指定x-component，其余配置都可以通过x-props来控制
 
 ## 类型描述
 

diff --git a/docs/API/registerFormFields.md b/docs/API/registerFormFields.md
@@ -2,7 +2,10 @@
 
 ## 介绍
 
-批量注册一个表单字段组件
+批量注册一个表单字段组件，主要用于扩展自定义控件，您的自定义控件只需要与正常的Input组件类似，接收value/onChange这样的受控控制即可完全接入uform.
+
+> 注意：被接入的自定义组件的props就是Field组件的x-props。所以我们在使用自定义组件的时候，除了指定x-component，其余配置都可以通过x-props来控制
+
 
 ## 类型描述
 

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -53,4 +53,4 @@
      - [国际化](./Examples/antd/International.md)
 - [知乎专栏](https://zhuanlan.zhihu.com/uform)
 - [GitHub](https://github.com/alibaba/uform)
-- [PlayGround DEMO](../packages/builder/src/demo/index-1-x.js)
+<!--- [PlayGround DEMO](../packages/builder/src/demo/index-1-x.js)-->
diff --git a/packages/antd/package.json b/packages/antd/package.json
@@ -26,6 +26,7 @@
     "classnames": "^2.2.6",
     "moveto": "^1.7.4",
     "react-stikky": "^0.1.15",
+    "string-length": "^3.1.0",
     "styled-components": "^4.1.1"
   },
   "devDependencies": {

diff --git a/packages/antd/src/form.js b/packages/antd/src/form.js
@@ -4,7 +4,8 @@ import classNames from 'classnames'
 import { Popover, Icon, Row, Col } from 'antd'
 import LOCALE from './locale'
 import styled from 'styled-components'
-import { isFn, moveTo } from './utils'
+import { isFn, moveTo, isStr } from './utils'
+import stringLength from 'string-length'
 /**
  * 轻量级 Form，不包含任何数据管理能力
  *
@@ -27,6 +28,14 @@ const getParentNode = (node, selector) => {
   }
 }
 
+const isPopDescription = description => {
+  if (isStr(description)) {
+    return stringLength(description) > 20
+  } else {
+    return React.isValidElement(description)
+  }
+}
+
 export const FormItem = styled(
   class FormItem extends React.Component {
     static defaultProps = {
@@ -74,17 +83,15 @@ export const FormItem = styled(
         return (
           <Col {...normalizeCol(labelCol)} className={cls}>
             {ele}
-            {((extra && extra.length > 20) || React.isValidElement(extra)) &&
-              this.renderHelper()}
+            {isPopDescription(extra) && this.renderHelper()}
           </Col>
         )
       }
 
       return (
         <div className={cls}>
           {ele}
-          {((extra && extra.length > 20) || React.isValidElement(extra)) &&
-            this.renderHelper()}
+          {isPopDescription(extra) && this.renderHelper()}
         </div>
       )
     }
@@ -111,7 +118,7 @@ export const FormItem = styled(
           }`}
         >
           {help && <div className={`${prefix}form-item-help`}>{help}</div>}
-          {!help && extra && extra.length <= 20 && (
+          {!help && !isPopDescription(extra) && (
             <div className={`${prefix}form-item-extra`}>{extra}</div>
           )}
         </div>

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -26,6 +26,7 @@
     "classnames": "^2.2.6",
     "moveto": "^1.7.4",
     "react-stikky": "^0.1.15",
+    "string-length": "^3.1.0",
     "styled-components": "^4.1.1"
   },
   "devDependencies": {

diff --git a/packages/next/src/form.js b/packages/next/src/form.js
@@ -5,7 +5,9 @@ import { ConfigProvider, Balloon, Icon } from '@alifd/next'
 import { Row, Col } from '@alifd/next/lib/grid'
 import LOCALE from './locale'
 import styled from 'styled-components'
-import { isFn, moveTo } from './utils'
+import { isFn, moveTo, isStr } from './utils'
+import stringLength from 'string-length'
+
 /**
  * 轻量级Next Form，不包含任何数据管理能力
  *
@@ -28,6 +30,14 @@ const getParentNode = (node, selector) => {
   }
 }
 
+const isPopDescription = description => {
+  if (isStr(description)) {
+    return stringLength(description) > 20
+  } else {
+    return React.isValidElement(description)
+  }
+}
+
 export const FormItem = styled(
   class FormItem extends React.Component {
     static defaultProps = {
@@ -69,17 +79,15 @@ export const FormItem = styled(
         return (
           <Col {...normalizeCol(labelCol)} className={cls}>
             {ele}
-            {((extra && extra.length > 20) || React.isValidElement(extra)) &&
-              this.renderHelper()}
+            {isPopDescription(extra) && this.renderHelper()}
           </Col>
         )
       }
 
       return (
         <div className={cls}>
           {ele}
-          {((extra && extra.length > 20) || React.isValidElement(extra)) &&
-            this.renderHelper()}
+          {isPopDescription(extra) && this.renderHelper()}
         </div>
       )
     }
@@ -106,7 +114,7 @@ export const FormItem = styled(
           }`}
         >
           {help && <div className={`${prefix}form-item-help`}>{help}</div>}
-          {!help && extra && extra.length <= 20 && (
+          {!help && !isPopDescription(extra) && (
             <div className={`${prefix}form-item-extra`}>{extra}</div>
           )}
         </div>