Merge pull request #1613 from XiaoMi/feature/#1612

Feature/#1612

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 更新日志
 ## 3.5.0
 
+- 新增 `Form` SchemaForm 中 component 属性接受 ReactNode，SchemaForm 新增 updateSchema 更新函数 [#1612](https://github.com/XiaoMi/hiui/issues/1612)
 - 新增 `DatePicker` onSelect 选择日期的回调函数 [#1592](https://github.com/XiaoMi/hiui/issues/1592)
 - 新增 `Transfer` 组件 render 自定义菜单渲染函数 [#1575](https://github.com/XiaoMi/hiui/issues/1575)
 - 修复 `DatePicker` type 为 week 或者 weekrange 时 输入相应格式日期解析错误问题  [#1579](https://github.com/XiaoMi/hiui/issues/1579)

components/form/Form.js

@@ -27,6 +27,7 @@ const InternalForm = (props) => {
     innerRef: formRef,
     initialValues,
     onValuesChange,
+    updateFormSchema,
     _type // SchemaForm 内部配置变量
   } = props
   const _Immutable = useRef(new Immutable())
@@ -192,7 +193,8 @@ const InternalForm = (props) => {
       resetValidates,
       validateField,
       validate,
-      setFieldsValue
+      setFieldsValue,
+      updateFormSchema
     }
   }, [fields])
 

components/form/SchemaForm.js

@@ -18,6 +18,32 @@ const FormComponent = Provider(Form)
 const InternalSchemaForm = (props) => {
   const { schema: schemaProps, children: childrenProps, submit, reset, innerRef } = props
   const [schema, setSchema] = useState(schemaProps)
+  const updateSchema = useCallback(
+    (schemaItems = {}) => {
+      let _schema = _.cloneDeep(schema)
+      _schema = _schema.map((item) => {
+        const _item = _.cloneDeep(item)
+        const { field } = _item
+        const schemaItem = schemaItems[field]
+        if (field && schemaItem) {
+          const mergeSchema = _.mergeWith(
+            { [field]: { ..._item } },
+            { [field]: { ...schemaItem } },
+            (objValue, srcValue) => {
+              if (_.isArray(objValue)) {
+                return srcValue
+              }
+            }
+          )
+          return mergeSchema[field]
+        }
+        return item
+      })
+      setSchema(_schema)
+    },
+    [schema]
+  )
+
   useEffect(() => {
     setSchema(schemaProps)
   }, [schemaProps])
@@ -31,7 +57,7 @@ const InternalSchemaForm = (props) => {
           const ChildComponent = HIUI[component] || Group[component]
           child = <ChildComponent {...componentProps} />
         } else {
-          child = <p>{'not found ' + component}</p>
+          child = component
         }
         return React.createElement(FormItem, {
           ..._.omit(schemaItem, 'component', 'componentProps'),
@@ -43,7 +69,12 @@ const InternalSchemaForm = (props) => {
   }, [schema])
   return (
     <div className={`${prefixCls}`}>
-      <FormComponent {..._.omit(props, 'schema', 'ref')} ref={innerRef} _type="SchemaForm">
+      <FormComponent
+        {..._.omit(props, 'schema', 'ref')}
+        updateFormSchema={updateSchema}
+        ref={innerRef}
+        _type="SchemaForm"
+      >
         {renderSchemaFormItem()}
         {childrenProps}
         {(submit || reset) && (

components/form/index.d.ts

@@ -23,7 +23,7 @@ interface ItemProps {
   showColon?: boolean
 }
 interface SchemaItem extends ItemProps {
-  component?: string
+  component?: string | JSX.Element
   componentProps?: string
 }
 interface SchemaProps {

docs/demo/form/section-schema.jsx

@@ -9,6 +9,7 @@ import Cascader from '../../../components/cascader'
 import Radio from '../../../components/radio'
 import Checkbox from '../../../components/checkbox'
 import Switch from '../../../components/switch'
+import SelectTree from '../../../components/select-tree'
 import DatePicker from '../../../components/date-picker'
 import Rate from '../../../components/rate'
 import Upload from '../../../components/upload'
@@ -97,17 +98,20 @@ const code = [
               }
           ]
         }
+        this.form = React.createRef()
       }
       render () {
         const SchemaForm = Form.SchemaForm
         const {initialValues} = this.state
     
         return (
+          <div>
           <SchemaForm 
             labelWidth='100' 
             labelPlacement='right' 
             initialValues={initialValues}
             schema={this.state.formSchema}
+            ref={this.form}
             submit={{
               type:'primary',
               children:'提交',
@@ -122,6 +126,35 @@ const code = [
              console.log("formdata",changedValues,allValues)
             }}
           />
+          <Button 
+            style={{margin: "-104px 0px 0px 236px"}}
+            onClick={()=>{
+              this.form.current.updateFormSchema({
+                  selectField: {
+                    label:'菜单',
+                    required:true,
+                    componentProps:{
+                        data:[
+                          { title:'电视', id:'3', disabled: true },
+                          { title:'手机', id:'2' }
+                        ],
+                    }
+                  },
+                  inputField: {
+                    label:'输入框',
+                    field:'inputField',
+                    rules:[{ min: 5, max: 16, message: '长度在 6 到 16 个字符', trigger: 'onBlur' }],
+                    component:'SelectTree',
+                    componentProps:{
+                        placeholder:'请输入',
+                    }
+                  }
+              })
+          }}>
+          更新表单配置
+          </Button>
+          </div>
+          
         )
       }
     }`
@@ -360,7 +393,8 @@ const DemoRow = () => (
       DatePicker,
       Rate,
       Upload,
-      Grid
+      Grid,
+      SelectTree
     }}
     prefix={prefix}
     desc={desc}

docs/zh-CN/components/form.mdx

@@ -123,7 +123,7 @@ import DemoUseForm from '../../demo/form/section-useForm.jsx'
 
 | 参数           | 说明                                                        | 类型   | 可选值 | 默认值 |
 | -------------- | ----------------------------------------------------------- | ------ | ------ | ------ |
-| component      | 用于渲染的组件名称，(现在组件名称，只限于 HiUI 中的组件名） | string | -      | -      |
+| component      | 用于渲染的组件名称(现在组件名称，只限于 HiUI 中的组件名）；如果传入 **ReactNode** 的情况下，**componentProps** 属性失效，同时也会默认控制组件 **value** 属性| string \| ReactNode | -      | -      |
 | componentProps | 组件的属性                                                  | string | -      | -      |
 
 ## Form.Submit
@@ -153,6 +153,7 @@ import DemoUseForm from '../../demo/form/section-useForm.jsx'
 | validateField(fields: string, callback: errors => void)                    | 对指定表单字段进行校验                                       |
 | resetValidates(callback:() => void, fields:Array, toDefault:boolean)       | 重置整个表单的验证,对应 [Form.Reset](#Form.Reset)中的 API    |
 | setFieldsValue(field: Object)                                              | 设置表单的值，在异步获取的数据回显的时候，使用该方法         |
+| updateSchema( schemaData: {fileName: [SchemaItem](#SchemaItem) } ) => void                      | 当 **SchemaItem** 中对应的 **schema** 数据更新时，请调用该方法更新     |
 
 ## rules