fix(project): Fix known issues.

1. Improve the Button API Description 2. Improve the Field API Description 3. Fix showLoading Submit Component is not work 4. Fix x-index is not work with array table 5. Improve Field Subtree Parsing Performance
alibaba · May 6, 2019 · 826ebce · 826ebce
1 parent c42ea06
commit 826ebce
Show file tree

Hide file tree

Showing 32 changed files with 189 additions and 148 deletions.
diff --git a/docs/API/Field_React.md b/docs/API/Field_React.md
@@ -14,13 +14,13 @@ import {Field} from '@uform/react'
 | type | 字段类型 | Object |  |
 | name | 字段名称 | Object | {} |
 | default | 默认值 | any |  |
-| enum | 枚举值，配置该值在默认情况下会显示Select形态，指定x-component会显示对应的组件形态 | Array<any> | [] |
-| maxItems | 最大条目数 | Number |  |
-| minItems | 最小条目数 | Number |  |
+| enum | 枚举值，配置该值在默认情况下会显示Select形态，指定x-component会显示对应的组件形态 | `Array< String | {label:String,value:any}>` | [] |
+| maxItems | 最大条目数，只有在type="array"时可以使用 | Number |  |
+| minItems | 最小条目数，只有在type="array"时可以使用 | Number |  |
 | required | 字段是否必填 | Boolean | false |
-| x-props | 字段UI组件属性 | Object | {} |
+| x-props | 字段UI组件属性，API请参考对应fusion next/ant design组件API | Object | {} |
 | x-rules | 字段校验规则 | Object | Array<String | Object | Function> | String | Function |  |
-| x-component | 字段UI组件 | Object | {type:"object",properties:{}} |
+| x-component | 字段UI组件，用于指定该字段应该用什么组件做渲染 | Object | {type:"object",properties:{}} |
 | x-index | 字段索引顺序 | Number |  |
 | x-render | 字段渲染函数 | `Function(fieldProps : FieldRenderProps){}` |  |
 | x-effect | 副作用事件绑定对象 | `Function(dispatch : Function) : {    [eventName](...arguemtns)}` |  |

diff --git a/docs/API/Submit.md b/docs/API/Submit.md
@@ -15,6 +15,11 @@ import { Submit } from '@uform/next(antd)'
 继承 [next-button](http://gitlab.alibaba-inc.com/next/button) /
 [ant-button](https://ant.design/components/button-cn/)
 
+扩展属性
+
+- showLoading : Boolean
+> 主要用于控制Submit组件是否自动展示loading图标，要求SchemaForm的onSubmit回调必须返回Promise对象才会生效。
+
 ## 用例
 
 ```javascript

diff --git a/docs/Examples/antd/Validation.md b/docs/Examples/antd/Validation.md
@@ -3,10 +3,9 @@
 > 校验和联动往往是相辅相成的，联动负责提升用户体验，引导用户一步步的完成数据输入
 > ，校验则是阻止用户输入任何非法数据
 >
-> 所以，联动规则和校验规则的复杂度都会根据业务场景的复杂度而线性提升，所以，我们
-> 需要一个完备的联动校验方案来解决这一个又一个不可避免的业务逻辑呢？
+> 联动规则和校验规则的复杂度都会根据业务场景的复杂度而线性提升
 >
-> 同样，还是借助 effects，我们可以方便的来处理各种场景的校验逻辑
+> 还是借助 effects，我们可以方便的来处理各种场景的校验逻辑
 
 ### 简单数据校验
 

diff --git a/docs/Examples/next/List.md b/docs/Examples/next/List.md
@@ -3,10 +3,11 @@
 > 数组场景，区块型数组，能解决大量字段的聚合输入，但是对于数据的对比化展示，区分
 > 度不够明显
 
-下面对于List场景我们主要封装了
-- Array类型组件
-- Table类型组件
-- Card类型组件
+下面对于 List 场景我们主要封装了
+
+- Array 类型组件
+- Table 类型组件
+- Card 类型组件
 
 这些组件你都可以对其做简单的定制来适应你当前的业务需求，比如
 
@@ -59,8 +60,8 @@ const App = () => {
           maxItems={3}
           type="array"
           x-props={{
-            renderAddition:'这是定制的添加文案',
-            renderRemove:'这是定制的删除文案'
+            renderAddition: '这是定制的添加文案',
+            renderRemove: '这是定制的删除文案'
           }}
         >
           <Field type="object">
@@ -75,11 +76,7 @@ const App = () => {
               </FormLayout>
             </FormBlock>
             <FormBlock title="嵌套数组">
-              <Field
-                name="array2"
-                maxItems={3}
-                type="array"
-              >
+              <Field name="array2" maxItems={3} type="array">
                 <Field type="object">
                   <FormLayout labelCol={9} wrapperCol={6}>
                     <Field name="aa" type="string" title="字段1" />
@@ -147,11 +144,11 @@ const App = () => (
           />
           <Field name="bb" type="string" title="字段2" />
           <Field name="cc" type="string" title="字段3" />
-          <Field name="dd" type="string" title="字段4" />
-          <Field name="dd" type="string" title="字段5" />
-          <Field name="ee" type="string" title="字段6" />
-          <Field name="ff" type="string" title="字段7" />
-          <Field name="gg" type="daterange" title="字段8" />
+          <Field name="dd" type="string" title="字段4" x-index={1} />
+          <Field name="ee" type="string" title="字段5" />
+          <Field name="ff" type="string" title="字段6" />
+          <Field name="gg" type="string" title="字段7" />
+          <Field name="hh" type="daterange" title="字段8" />
         </Field>
       </Field>
     </SchemaForm>
@@ -184,12 +181,17 @@ import Printer from '@uform/printer'
 const App = () => (
   <Printer>
     <SchemaForm>
-      <Field name="array" maxItems={3} type="array" x-component="cards" 
-          x-props={{
-            title:'这是卡片标题',
-            renderAddition:'这是定制的添加文案',
-            renderRemove:'这是定制的删除文案'
-          }}>
+      <Field
+        name="array"
+        maxItems={3}
+        type="array"
+        x-component="cards"
+        x-props={{
+          title: '这是卡片标题',
+          renderAddition: '这是定制的添加文案',
+          renderRemove: '这是定制的删除文案'
+        }}
+      >
         <Field type="object">
           <FormLayout labelCol={6} wrapperCol={8}>
             <Field
@@ -206,7 +208,13 @@ const App = () => (
             <Field name="ff" type="string" title="字段7" />
             <Field name="gg" type="daterange" title="字段8" />
           </FormLayout>
-          <Field name="array" maxItems={3} type="array" x-component="cards" x-props={{title:'这是卡片标题'}}>
+          <Field
+            name="array"
+            maxItems={3}
+            type="array"
+            x-component="cards"
+            x-props={{ title: '这是卡片标题' }}
+          >
             <Field type="object">
               <FormLayout labelCol={6} wrapperCol={8}>
                 <Field

diff --git a/docs/Examples/next/Validation.md b/docs/Examples/next/Validation.md
@@ -3,10 +3,9 @@
 > 校验和联动往往是相辅相成的，联动负责提升用户体验，引导用户一步步的完成数据输入
 > ，校验则是阻止用户输入任何非法数据
 >
-> 所以，联动规则和校验规则的复杂度都会根据业务场景的复杂度而线性提升，所以，我们
-> 需要一个完备的联动校验方案来解决这一个又一个不可避免的业务逻辑呢？
+> 联动规则和校验规则的复杂度都会根据业务场景的复杂度而线性提升
 >
-> 同样，还是借助 effects，我们可以方便的来处理各种场景的校验逻辑
+> 还是借助 effects，我们可以方便的来处理各种场景的校验逻辑
 
 ### 简单数据校验
 

diff --git a/packages/antd/package.json b/packages/antd/package.json
@@ -18,7 +18,8 @@
   "peerDependencies": {
     "antd": "^3.14.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@babel/runtime": "^7.4.4"
   },
   "dependencies": {
     "@uform/react": "0.1.9",

diff --git a/packages/antd/src/components/button.js b/packages/antd/src/components/button.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { FormConsumer } from '@uform/react'
 import { Button } from 'antd'
 
-export const Submit = props => {
+export const Submit = ({ showLoading, ...props }) => {
   return (
     <FormConsumer>
       {({ status, schema }) => {
@@ -11,7 +11,7 @@ export const Submit = props => {
             type='primary'
             htmlType='submit'
             {...props}
-            loading={status === 'submitting'}
+            loading={showLoading ? status === 'submitting' : undefined}
           >
             {props.children || '提交'}
           </Button>

diff --git a/packages/antd/src/fields/cards.js b/packages/antd/src/fields/cards.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 import { registerFormField } from '@uform/react'
 import { toArr } from '@uform/utils'
 import { ArrayField } from './array'
-import Card from 'antd/lib/card'
+import { Card } from 'antd'
 import styled from 'styled-components'
 
 const FormCardsField = styled(

diff --git a/packages/antd/src/fields/date.js b/packages/antd/src/fields/date.js
@@ -122,6 +122,7 @@ registerFormField(
   'year',
   connect({
     getValueFromEvent(_, value) {
+      console.log(_, value)
       return transformMoment(value)
     },
     getProps: props => {

diff --git a/packages/antd/src/fields/table.js b/packages/antd/src/fields/table.js
@@ -247,7 +247,14 @@ registerFormField(
       }
 
       render() {
-        const { value, schema, locale, className, renderField } = this.props
+        const {
+          value,
+          schema,
+          locale,
+          className,
+          renderField,
+          getOrderProperties
+        } = this.props
         const style = schema['x-props'] && schema['x-props'].style
         const additionFilter = this.createFilter('addition', schema)
         return (
@@ -258,18 +265,17 @@ registerFormField(
           >
             <div>
               <Table dataSource={value}>
-                {Object.keys(
-                  (schema.items && schema.items.properties) || {}
-                ).reduce((buf, key) => {
-                  const itemSchema = schema.items.properties[key]
-                  const filter = this.createFilter(key, itemSchema)
+                {getOrderProperties(
+                  schema.items && schema.items.properties
+                ).reduce((buf, { key, schema }) => {
+                  const filter = this.createFilter(key, schema)
                   const res = filter(
                     () => {
                       return buf.concat(
                         <Column
-                          {...itemSchema}
+                          {...schema}
                           key={key}
-                          title={itemSchema.title}
+                          title={schema.title}
                           dataIndex={key}
                           cell={(record, index) => {
                             return renderField([index, key])
@@ -321,13 +327,13 @@ registerFormField(
       border-bottom: 1px solid #dcdee3;
       .ant-btn-text {
         color: #888;
-        i{
+        i {
           margin-right: 3px;
         }
       }
     }
-    .ant-table-cell-wrapper>.ant-form-item{
-      margin-bottom:0;
+    .ant-table-cell-wrapper > .ant-form-item {
+      margin-bottom: 0;
     }
     .array-item-operator {
       display: flex;

diff --git a/packages/builder-next/package.json b/packages/builder-next/package.json
@@ -17,7 +17,8 @@
   "peerDependencies": {
     "@alifd/next": "^1.13.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@babel/runtime": "^7.4.4"
   },
   "dependencies": {
     "@uform/builder": "0.1.9"

diff --git a/packages/builder/package.json b/packages/builder/package.json
@@ -20,7 +20,8 @@
   "peerDependencies": {
     "@alifd/next": "^1.13.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@babel/runtime": "^7.4.4"
   },
   "dependencies": {
     "@uform/react": "0.1.9",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -14,6 +14,9 @@
   "engines": {
     "npm": ">=3.0.0"
   },
+  "peerDependencies": {
+    "@babel/runtime": "^7.4.4"
+  },
   "dependencies": {
     "@uform/utils": "0.1.5",
     "@uform/validator": "0.1.5",

diff --git a/packages/core/src/field.js b/packages/core/src/field.js
@@ -55,7 +55,7 @@ export class Field {
       ? !isEmpty(this.props)
         ? { ...this.props, ...clone(options.props) }
         : clone(options.props)
-      : this.props
+      : this.props || {}
     if (this.removed) {
       this.removed = false
       this.visible = true
@@ -165,6 +165,7 @@ export class Field {
 
   changeProps(props, force) {
     let lastProps = this.props
+    if (isEmpty(props)) return
     if (force || !isEqual(lastProps, props, filterSchema)) {
       this.props = clone(props, filterSchema)
       this.editable = this.getEditableFromProps(this.props)
@@ -175,7 +176,7 @@ export class Field {
   }
 
   changeEditable(editable) {
-    if (!isEmpty(this.props.editable)) return
+    if (!this.props || !isEmpty(this.props.editable)) return
     if (this.props['x-props'] && !isEmpty(this.props['x-props'].editable)) {
       return
     }

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -17,7 +17,8 @@
   "peerDependencies": {
     "@alifd/next": "^1.13.1",
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "@babel/runtime": "^7.4.4"
   },
   "dependencies": {
     "@uform/react": "0.1.9",

diff --git a/packages/next/src/components/button.js b/packages/next/src/components/button.js
@@ -11,7 +11,7 @@ export const Submit = ({ showLoading, ...props }) => {
             type='primary'
             htmlType='submit'
             {...props}
-            loading={props.showLoading ? status === 'submitting' : undefined}
+            loading={showLoading ? status === 'submitting' : undefined}
           >
             {props.children || '提交'}
           </Button>

diff --git a/packages/next/src/fields/array.js b/packages/next/src/fields/array.js
@@ -33,6 +33,7 @@ export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
   }
 }
 `
+
 export const ArrayField = createArrayField({
   CircleButton,
   TextButton: props => (

diff --git a/packages/next/src/fields/cards.js b/packages/next/src/fields/cards.js
@@ -2,7 +2,7 @@ import React, { Fragment } from 'react'
 import { registerFormField } from '@uform/react'
 import { toArr } from '@uform/utils'
 import { ArrayField } from './array'
-import Card from '@alifd/next/lib/card'
+import { Card } from '@alifd/next'
 import styled from 'styled-components'
 
 const FormCardsField = styled(