Merge branch 'feature/#1612' of https://github.com/XiaoMi/hiui into f…

…eature/#1612

CHANGELOG.md

@@ -1,6 +1,7 @@
 # 更新日志
 ## 3.5.0
 
+- 新增 `Form` SchemaForm 中 component 属性接受 ReactNode，SchemaForm 新增 schemaFormforceUpdate 强制更新函数 [#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,
+    schemaFormforceUpdate,
     _type // SchemaForm 内部配置变量
   } = props
   const _Immutable = useRef(new Immutable())
@@ -192,7 +193,8 @@ const InternalForm = (props) => {
       resetValidates,
       validateField,
       validate,
-      setFieldsValue
+      setFieldsValue,
+      schemaFormforceUpdate
     }
   }, [fields])
 

components/form/SchemaForm.js

@@ -18,9 +18,14 @@ const FormComponent = Provider(Form)
 const InternalSchemaForm = (props) => {
   const { schema: schemaProps, children: childrenProps, submit, reset, innerRef } = props
   const [schema, setSchema] = useState(schemaProps)
+  const [updateIndex, setUpdateIndex] = useState(0)
+  const setUpdateIndexFn = useCallback(() => {
+    setUpdateIndex(updateIndex + 1)
+  }, [updateIndex])
+
   useEffect(() => {
     setSchema(schemaProps)
-  }, [schemaProps])
+  }, [schemaProps, updateIndex])
 
   const renderSchemaFormItem = useCallback(() => {
     if (Array.isArray(schema)) {
@@ -31,7 +36,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 +48,12 @@ const InternalSchemaForm = (props) => {
   }, [schema])
   return (
     <div className={`${prefixCls}`}>
-      <FormComponent {..._.omit(props, 'schema', 'ref')} ref={innerRef} _type="SchemaForm">
+      <FormComponent
+        {..._.omit(props, 'schema', 'ref')}
+        schemaFormforceUpdate={setUpdateIndexFn}
+        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/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)                                              | 设置表单的值，在异步获取的数据回显的时候，使用该方法         |
+| schemaFormforceUpdate                                              | 当 **SchemaItem** 中对应的 **schema** 数据更新时，请调用该方法更新     |
 
 ## rules