fix(TreeChecked): 组件支持 Form 表单组件 #605 (#610)

packages/react-tree-checked/README.md

@@ -109,6 +109,119 @@ const Demo = () => (
 ReactDOM.render(<Demo />, _mount_);
 ```
 
+### 表单使用
+
+<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
+```jsx
+import React, { useState, useRef } from "react";
+import ReactDOM from 'react-dom';
+import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw';
+
+const data = [
+  {
+    label: '湖北省',
+    key: '0-0-0',
+    children:[
+      {
+        label: '武汉市',
+        key: '0-1-0',
+        children:[
+          { label: '新洲区', key: '0-1-1', disabled: true },
+          { label: '武昌区', key: '0-1-2' },
+          {
+            label: '汉南区',
+            key: '0-1-3',
+            children:[
+              { label: '汉南区1', key: '0-1-3-1' },
+              { label: '汉南区2', key: '0-1-3-2' },
+              { label: '汉南区3', key: '0-1-3-3' },
+            ]
+          },
+        ]
+      },
+      { label: '黄冈市', key: '0-2-0' },
+      {
+        label: '黄石市',
+        key: '0-3-0',
+        children:[
+          { label: '青山区', key: '0-3-1' },
+          { label: '黄陂区', key: '0-3-2' },
+          { label: '青山区', key: '0-3-3' },
+        ]
+      },
+    ]
+  },
+  { label: '澳门', key: '3' },
+];
+
+function Demo() {
+  const form = useRef()
+
+  const onSubmit = () => {
+    form.current.onSubmit()
+  }
+  const resetForm = () => {
+    form.current.resetForm()
+  }
+  const getFieldValues = () => {
+    console.log('getFieldValues', form.current.getFieldValues())
+  }
+
+  const setFieldValue=()=>{
+    form.current.setFieldValue('name','UIW')
+  }
+
+  return (
+    <div>
+      <Form
+        ref={form}
+        onChange={({ initial, current }) => {
+          console.log('onChange', initial, current);
+        }}
+        onSubmit={({ initial, current }) => {
+          if (current.tree === initial.tree) {
+            Notify.error({
+              title: '提交失败！',
+              description: `表单提交内容为空！`,
+            });
+          } else {
+            Notify.success({
+              title: '提交成功！',
+            });
+          }
+        }}
+        fields={{
+          tree: {
+            label: "树",
+            initialValue: ['3'],
+            children: <TreeChecked
+              data={data}
+              selectedKeys={['0-2-0']}
+            />
+          }
+        }}
+      >
+        {({ fields, state, canSubmit }) => {
+          return (
+            <div>
+              <Row>
+                <Col style={{ maxWidth: 300 }}>{fields.tree}</Col>
+              </Row>
+              <Row>
+                <Col>
+                  <Button disabled={!canSubmit()} type="primary" htmlType="submit">提交</Button>
+                </Col>
+              </Row>
+            </div>
+          )
+        }}
+      </Form>
+    </div>
+  )
+}
+ReactDOM.render(<Demo />, _mount_);
+```
+
 ## Props
 
 完全继承 [Tree](#/components/Tree) 组件属性，默认初始值不一样，下面仅列出默认不一致的 Props。

packages/react-tree/src/index.tsx

@@ -12,7 +12,7 @@ export type TreeRenderTitleNode = {
   selectedKeys?: TreeProps['selectedKeys'];
 };
 
-export interface TreeProps extends IProps, HTMLDivProps {
+export interface TreeProps extends IProps, Omit<HTMLDivProps, 'onChange'> {
   icon?: IconProps['type'];
   data?: TreeData[];
   openKeys?: TreeData['key'][];
@@ -45,6 +45,8 @@ export interface TreeProps extends IProps, HTMLDivProps {
     item: TreeData,
     evn: React.MouseEvent<HTMLElement>,
   ) => void;
+  onChange?: (keys: (string | number | undefined)[]) => void;
+  value?: TreeData['key'][];
 }
 
 export interface TreeData {
@@ -137,16 +139,19 @@ export default function Tree(props: TreeProps) {
     className,
     autoExpandParent = true,
     renderTitle,
+    onChange,
     ...elementProps
   } = props;
 
   const [curOpenKeys, setCurOpenKeys] = useState(openKeys);
-  const [curSelectedKeys, setCurSelectedKeys] = useState(selectedKeys);
+  const [curSelectedKeys, setCurSelectedKeys] = useState(props.value || selectedKeys);
 
   useEffect(() => {
     setCurSelectedKeys(props.selectedKeys || []);
   }, [JSON.stringify(props.selectedKeys)]);
-
+  useEffect(() => {
+    setCurSelectedKeys(props.value || []);
+  }, [JSON.stringify(props.value)]);
   // useEffect(() => setCurOpenKeys(openKeys), [openKeys]);
   // useEffect(() => setCurSelectedKeys(selectedKeys), [selectedKeys]);
 
@@ -155,7 +160,7 @@ export default function Tree(props: TreeProps) {
     if (defaultExpandAll) {
       arrOpenKeys = getChildKeys(data);
     } else if (autoExpandParent) {
-      arrOpenKeys.push(...getChildKeys(data, undefined, 1));
+      arrOpenKeys.push(...getChildKeys(data || [], undefined, 1));
     }
     setCurOpenKeys(arrOpenKeys);
   }, []);
@@ -209,6 +214,7 @@ export default function Tree(props: TreeProps) {
     }
     setCurSelectedKeys(selKeys);
     onSelected && onSelected(selKeys, item.key, selected, item, evn);
+    onChange?.(selKeys);
   }
   return (
     <div className={cls} {...elementProps}>

website/src/routes/components/tree-checked/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { TreeChecked, Row, Col, Card, Icon } from 'uiw';
+import React, { useRef } from 'react';
 import Markdown from '../../../components/Markdown';
+import { Form, Input, Row, Col, TreeChecked, Slider, Button, Notify } from 'uiw';
 
 export default () => (
   <Markdown
     path="https://github.com/uiwjs/uiw/tree/master/packages/react-tree-checked/README.md"
-    dependencies={{ TreeChecked, Row, Col, Card, Icon }}
+    dependencies={{ Form, Input, Row, Col, TreeChecked, Slider, Button, Notify, useRef }}
     renderPage={async () => {
       const md = await import('uiw/node_modules/@uiw/react-tree-checked/README.md');
       return md.default || md;