feat: update formitem props (#614)

alibaba · Jan 16, 2020 · 1ff5f8b · 1ff5f8b
1 parent 88ce573
commit 1ff5f8b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 19 deletions.
diff --git a/packages/antd/src/compat/FormItem.tsx b/packages/antd/src/compat/FormItem.tsx
@@ -83,26 +83,38 @@ export const CompatAntdFormItemProps = ({ children, ...props }) => (
 )
 
 export const CompatAntdFormItem: React.FC<ICompatItemProps> = props => {
-  const { prefixCls, labelAlign, labelCol, wrapperCol } = useFormItem()
+  const {
+    prefixCls,
+    labelAlign,
+    labelCol: contextLabelCol,
+    wrapperCol: contextWrapperCol
+  } = useFormItem()
   const help = computeHelp(props)
   const label = computeLabel(props)
   const status = computeStatus(props)
   const extra = computeExtra(props)
   const itemProps = computeSchemaExtendProps(props)
   const outerFormItemProps = useContext(FormItemPropsContext)
+
+  const mergedProps = {
+    ...itemProps,
+    ...outerFormItemProps,
+  }
+
+  const { labelCol, wrapperCol } = mergedProps
+
   return (
     <Form.Item
       prefixCls={prefixCls}
-      label={label}
-      labelCol={label ? normalizeCol(labelCol) : undefined}
+      label={label}      
       labelAlign={labelAlign}
-      required={props.required}
-      wrapperCol={label ? normalizeCol(wrapperCol) : undefined}
+      required={props.required}      
       help={help}
       validateStatus={status}
       extra={extra ? <p>{extra}</p> : undefined}
-      {...itemProps}
-      {...outerFormItemProps}
+      {...mergedProps}
+      labelCol={label ? normalizeCol(labelCol || contextLabelCol) : undefined}
+      wrapperCol={label ? normalizeCol(wrapperCol || contextWrapperCol) : undefined}
     >
       <CompatAntdFormItemProps>{props.children}</CompatAntdFormItemProps>
     </Form.Item>

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -780,10 +780,7 @@ export function createForm<FieldProps, VirtualFieldProps>(
         return arr
       },
       validate(opts?: IFormExtendedValidateFieldOptions) {
-        return validate(
-          field.getSourceState(state => state.path),
-          opts
-        )
+        return validate(field.getSourceState(state => state.path), opts)
       }
     }
   }

diff --git a/packages/next/src/compat/FormItem.tsx b/packages/next/src/compat/FormItem.tsx
@@ -86,9 +86,9 @@ export const CompatNextFormItem: React.FC<ICompatItemProps> = props => {
   const {
     prefix,
     labelAlign,
-    labelCol,
     labelTextAlign,
-    wrapperCol,
+    labelCol: contextLabelCol,
+    wrapperCol: contextWrapperCol,
     size
   } = useFormItem()
   const formItemProps = useContext(FormItemPropsContext)
@@ -97,21 +97,28 @@ export const CompatNextFormItem: React.FC<ICompatItemProps> = props => {
   const status = computeStatus(props)
   const extra = computeExtra(props)
   const itemProps = computeSchemaExtendProps(props)
+
+  const mergedProps = {
+    ...itemProps,
+    ...formItemProps,
+  }
+
+  const { labelCol, wrapperCol } = mergedProps
+
   return (
     <Form.Item
       prefix={prefix}
       label={label}
-      labelTextAlign={labelTextAlign}
-      labelCol={label ? normalizeCol(labelCol) : undefined}
+      labelTextAlign={labelTextAlign}      
       labelAlign={labelAlign || 'left'}
-      required={props.required}
-      wrapperCol={label ? normalizeCol(wrapperCol) : undefined}
+      required={props.required}      
       size={size}
       help={help}
       validateState={status}
       extra={<p>{extra}</p>}
-      {...itemProps}
-      {...formItemProps}
+      {...mergedProps}
+      labelCol={label ? normalizeCol(labelCol || contextLabelCol) : undefined}
+      wrapperCol={label ? normalizeCol(wrapperCol || contextWrapperCol) : undefined}
     >
       <CompatNextFormItemProps>{props.children}</CompatNextFormItemProps>
     </Form.Item>

diff --git a/packages/react-schema-renderer/src/__tests__/schema.spec.tsx b/packages/react-schema-renderer/src/__tests__/schema.spec.tsx
@@ -65,6 +65,28 @@ describe('major scene', () => {
     expect(s5.getExtendsEditable()).toEqual(true)
   })
 
+  test('labelCol and wrapperCol(without filter)', () => {
+    const s = new Schema({
+        "type":"date",
+        "title":"test header",
+        "x-props": { "labelCol": 2, "wrapperCol": 22 },
+        "x-component-props": { "labelCol": 6, "wrapperCol": 18 },
+    }, undefined, 'test')
+
+    expect(s.getExtendsComponentProps()).toEqual({})    
+  })
+
+  test('labelCol and wrapperCol(with filter)', () => {
+    const s = new Schema({
+        "type":"date",
+        "title":"test header",
+        "x-props": { "labelCol": 2, "wrapperCol": 22 },
+        "x-component-props": { "labelCol": 6, "wrapperCol": 18 },
+    }, undefined, 'test')
+
+    expect(s.getExtendsComponentProps(false)).toEqual({ "labelCol": 6, "wrapperCol": 18 })    
+  })
+
   test('deprecate x-item-props', () => {
     const s1 = new Schema({
         "type":"date",