fix(Form): 集成tree组件

Author: panbibi

example/examples/src/routes/Form/index.tsx

@@ -148,6 +148,49 @@ const FormDemo = () => {
       field: 'verificationCode',
       name: '验证码倒计时',
     },
+    {
+      type: 'tree',
+      field: 'tree',
+      name: '树形控件',
+      attr: {
+        options: [
+          {
+            label: '今天',
+            value: '01',
+            children: [
+              {
+                label: '上午',
+                value: '01-1',
+                children: [
+                  {
+                    label: '9点',
+                    value: '01-1-1',
+                  },
+                  {
+                    label: '10点',
+                    value: '01-1-2',
+                  },
+                  {
+                    label: '11点',
+                    value: '01-1-3',
+                  },
+                ],
+              },
+              {
+                label: '下午',
+                value: '02-1',
+                children: [
+                  {
+                    label: '14点',
+                    value: '02-1-1',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
     {
       type: 'treeSelect',
       field: 'treeSelect',

example/examples/src/routes/Tree/index.tsx

@@ -66,12 +66,24 @@ export default class TreeDemo extends React.Component<TreeViewProps> {
                 <Button onPress={() => this.setState({visible: true})}>打开</Button>
                 <Modal visible={this.state.visible} placement="bottom" onClosed={() => this.setState({visible: false})}>
                   <ScrollView style={{height: 500}}>
-                    <Tree treeData={option} defaultExpandAll />
+                    <Tree
+                      treeData={option}
+                      defaultExpandAll
+                      onCheck={(value: any) => {
+                        console.log('onCheck', value);
+                      }}
+                    />
                   </ScrollView>
                 </Modal>
               </Card>
               <Card title="树形选择">
-                <Tree treeData={option} defaultExpandAll />
+                <Tree
+                  treeData={option}
+                  defaultExpandAll
+                  onCheck={(value: any) => {
+                    console.log('onCheck', value);
+                  }}
+                />
               </Card>
             </Body>
           </React.Fragment>

packages/core/src/DatePicker/README.md

@@ -6,7 +6,7 @@ DatePicker
 
 ### 基础示例
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import { Button } from '@uiw/react-native';
 import React,{ useState } from 'react';
 import { View,Text } from 'react-native';
@@ -63,7 +63,7 @@ DatePeriodInput
 
 ### 基础示例
 
-```jsx mdx:preview&background=#bebebe29
+```jsx
 import React,{ useState }  from 'react';
 import { View} from 'react-native';
 import  DatePeriodInput  from '@uiw/react-native/lib/DatePicker/date-period-input';

packages/core/src/Form/comps/tree.tsx

@@ -0,0 +1,142 @@
+import Tree from '../../Tree';
+import { KeyType } from '../types';
+import React, { useState } from 'react';
+import { Pressable, SafeAreaView, View, StyleSheet, ViewStyle, ScrollView } from 'react-native';
+import Ellipsis from '../../Ellipsis';
+import Modal from '../../Modal';
+import Icon from '../../Icon';
+import { Theme } from '../../theme';
+import { useTheme } from '@shopify/restyle';
+
+interface FormTreeProps {
+  value?: any;
+  onChange?: (value: KeyType) => void;
+  options?: Array<{ label: string; value: KeyType }>;
+  disabled?: boolean;
+  placeholder?: string;
+  contentStyle?: ViewStyle;
+  extra?: JSX.Element;
+  showClear?: boolean;
+}
+
+interface entity {
+  value: KeyType;
+  label: string;
+  children?: children[];
+}
+interface children {
+  value: KeyType;
+  label: string;
+  children?: children[];
+}
+
+const FormTree = ({
+  value,
+  onChange,
+  options = [],
+  // ...others,
+  disabled,
+  placeholder = '请选择',
+  contentStyle,
+  extra,
+  showClear,
+  ...attr
+}: FormTreeProps) => {
+  const [visible, setVisible] = useState(false);
+  const theme = useTheme<Theme>();
+  const style = createStyles({
+    disabled: theme.colors.disabled,
+    backgroundColor: theme.colors.mask,
+    title: theme.colors.primary_text,
+  });
+
+  function treeToArray(tree: any) {
+    var res: any = [];
+    for (const item of tree) {
+      const { children, ...i } = item;
+      if (children && children.length) {
+        res = res.concat(treeToArray(children));
+      }
+      res.push(i);
+    }
+    return res;
+  }
+  let arrTools = treeToArray(options).filter((filItem: any) =>
+    value?.some((somItem: any) => Object.is(filItem.value, somItem)),
+  );
+
+  const labelVal = arrTools.map((a: any) => {
+    return a.label;
+  });
+
+  const extraContent = React.useMemo(() => {
+    if (React.isValidElement(extra)) {
+      return extra;
+    }
+    if (value && showClear) {
+      return (
+        <Pressable onPress={() => onChange} style={{ paddingRight: 3 }} disabled={disabled}>
+          <Icon name="circle-close-o" size={18} color={theme.colors.primary_text || '#ccc'} />
+        </Pressable>
+      );
+    }
+    return <Icon name="right" size={18} color={theme.colors.text || '#ccc'} />;
+  }, [extra, value, showClear]);
+  return (
+    <SafeAreaView>
+      <Pressable
+        onPress={() => {
+          if (disabled) return;
+          setVisible(true);
+        }}
+      >
+        <View style={[disabled ? style.disabled : style.content, contentStyle]}>
+          <Ellipsis style={[style.contentTitle]} maxLen={30}>
+            {(labelVal.length > 0 && labelVal) || placeholder}
+          </Ellipsis>
+          {extraContent}
+        </View>
+      </Pressable>
+      <Modal visible={visible} placement="bottom" onClosed={() => setVisible(false)}>
+        <ScrollView style={{ height: 400 }}>
+          <Tree
+            treeData={options}
+            defaultExpandAll
+            onCheck={(value: any) => {
+              onChange?.(value);
+            }}
+          />
+        </ScrollView>
+      </Modal>
+    </SafeAreaView>
+  );
+};
+
+export default FormTree;
+
+function createStyles({ backgroundColor = '#fff', disabled = '#f5f5f5', title = '#000' }) {
+  return StyleSheet.create({
+    content: {
+      flexDirection: 'row',
+      height: 35,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingRight: 5,
+      backgroundColor: backgroundColor,
+      paddingHorizontal: 16,
+    },
+    disabled: {
+      flexDirection: 'row',
+      height: 35,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingRight: 5,
+      backgroundColor: disabled,
+      paddingHorizontal: 16,
+    },
+    contentTitle: {
+      fontSize: 16,
+      color: title,
+    },
+  });
+}

packages/core/src/Form/form.tsx

@@ -17,6 +17,7 @@ import Switch from './comps/switch';
 import CheckBox from './comps/checkBox';
 import Picker from './comps/picker';
 import DatePicker from './comps/datePicker';
+import Tree from './comps/tree';
 
 const Form = (baseProps: FormProps) => {
   const {
@@ -65,6 +66,7 @@ const Form = (baseProps: FormProps) => {
       datePicker: <DatePicker />,
       datePeriodInput: <DatePeriodInput />,
       verificationCode: <VerificationCode outerStyle={{ backgroundColor: '#FFF' }} />,
+      tree: <Tree />,
     },
     changeValidate: changeValidate,
   };

packages/core/src/Tree/components/TreeNode.tsx

@@ -29,11 +29,10 @@ const TreeNode: FC<TreeNodeProps> = (props) => {
       return customIcon(checked);
     }
     return (
-      <CheckBox
-        checked={checked}
-        onChange={(checked) => {
-          console.log(checked, 'checked');
-        }}
+      <Icon
+        size={16}
+        name={checked ? 'circle-check' : 'circle-o'}
+        color={checked ? theme.colors.primary200 : theme.colors.gray300}
       />
     );
   };