refactor(TreeSelect): convert to TypeScript, improve docs and tests, c…

…lose alibaba-fusion#4620 (alibaba-fusion#4837)
iaosee · Jun 3, 2024 · 9f7f9cb · 9f7f9cb
1 parent 020d6e2
commit 9f7f9cb
Show file tree

Hide file tree

Showing 27 changed files with 1,397 additions and 1,331 deletions.
diff --git a/components/tree-select/__docs__/adaptor/index.jsx b/components/tree-select/__docs__/adaptor/index.jsx
diff --git a/components/tree-select/__docs__/adaptor/index.tsx b/components/tree-select/__docs__/adaptor/index.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import { Types, parseData, NodeType } from '@alifd/adaptor-helper';
+import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
+
+const createDataSouce = (
+    list: any[],
+    keys: { selected: string[]; expanded: string[] } = { selected: [], expanded: [] },
+    level = 0,
+    prefix = ''
+) => {
+    const array: any[] = [];
+    let index = 0;
+
+    list.forEach(item => {
+        const key = `${prefix || level}-${index++}`;
+
+        if (item.children && item.children.length > 0) {
+            item.children = createDataSouce(item.children, keys, level + 1, key);
+        }
+        array.push({
+            label: item.value,
+            value: key,
+            disabled: item.state === 'disabled',
+            key,
+            children: item.children,
+        });
+
+        if (item.state === 'active') {
+            if (item.children && item.children.length > 0) {
+                keys.expanded.push(key);
+            } else {
+                keys.selected.push(key);
+            }
+        }
+
+        return;
+    });
+
+    return array;
+};
+
+export default {
+    name: 'TreeSelect',
+    editor: () => ({
+        props: [
+            {
+                name: 'state',
+                label: 'Status',
+                type: Types.enum,
+                options: ['normal', 'expanded', 'disabled'],
+                default: 'normal',
+            },
+            {
+                name: 'size',
+                type: Types.enum,
+                options: ['large', 'medium', 'small'],
+                default: 'medium',
+            },
+            {
+                name: 'width',
+                type: Types.number,
+                default: 300,
+            },
+            {
+                name: 'border',
+                type: Types.bool,
+                default: true,
+            },
+            {
+                name: 'checkbox',
+                type: Types.bool,
+                default: false,
+            },
+            {
+                name: 'label',
+                type: Types.string,
+                default: '',
+            },
+            {
+                name: 'placeholder',
+                type: Types.string,
+                default: 'Please Select',
+            },
+        ],
+        data: {
+            active: true,
+            disabled: true,
+            default:
+                '*Trunk\n\t-Branch\n\t\t*Branch\n\t\t\tLeaf\n\t\tLeaf\n\t*Branch\n\t\tLeaf\n\t\tLeaf',
+        },
+    }),
+    adaptor: ({
+        state,
+        size,
+        width,
+        border,
+        checkbox,
+        label,
+        placeholder,
+        data,
+        style,
+        ...others
+    }: TreeSelectProps & {
+        state: 'normal' | 'expanded' | 'disabled';
+        width: number;
+        border: boolean;
+        shape: 'normal' | 'line';
+        select: 'node' | 'label';
+        checkbox: boolean;
+        data: string;
+    }) => {
+        const list = parseData(data).filter(({ type }: any) => type === NodeType.node);
+        const keys = { selected: [], expanded: [] };
+        const dataSource = createDataSouce(list, keys);
+
+        const props = {
+            ...others,
+            style: { width, ...style },
+            size,
+            dataSource,
+            key: new Date().getTime(),
+            multiple: checkbox,
+            treeCheckable: checkbox,
+            treeDefaultExpandAll: true,
+            hasBorder: border,
+            disabled: state === 'disabled',
+            visible: state === 'expanded',
+            label,
+            placeholder,
+            popupContainer: (node: HTMLElement) => node,
+            popupProps: { needAdjust: false },
+            value: checkbox ? keys.selected : keys.selected[0],
+        };
+
+        return <TreeSelect {...props} />;
+    },
+    demoOptions: (demo: any) => {
+        if (demo.node.props.state === 'expanded') {
+            demo.height = 300;
+        }
+        return demo;
+    },
+};
diff --git a/components/tree-select/__docs__/demo/accessibility/index.tsx b/components/tree-select/__docs__/demo/accessibility/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
 
 const data = [
     {
@@ -37,15 +38,9 @@ const data = [
 ];
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(value, data) {
+    handleChange: TreeSelectProps['onChange'] = (value, data) => {
         console.log(value, data);
-    }
+    };
 
     render() {
         return (

diff --git a/components/tree-select/__docs__/demo/basic/index.tsx b/components/tree-select/__docs__/demo/basic/index.tsx
@@ -2,19 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
 
 const TreeNode = TreeSelect.Node;
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(value, data) {
+    handleChange: TreeSelectProps['onChange'] = (value, data) => {
         console.log(value, data);
-    }
+    };
 
     render() {
         return (

diff --git a/components/tree-select/__docs__/demo/check/index.tsx b/components/tree-select/__docs__/demo/check/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
 
 const treeData = [
     {
@@ -36,15 +37,9 @@ const treeData = [
 ];
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(value, data) {
+    handleChange: TreeSelectProps['onChange'] = (value, data) => {
         console.log(value, data);
-    }
+    };
 
     render() {
         return (

diff --git a/components/tree-select/__docs__/demo/control/index.tsx b/components/tree-select/__docs__/demo/control/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
 
 const treeData = [
     {
@@ -36,22 +37,16 @@ const treeData = [
 ];
 
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
+    state = {
+        value: ['4', '6'],
+    };
 
-        this.state = {
-            value: ['4', '6'],
-        };
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(value, data) {
+    handleChange: TreeSelectProps['onChange'] = (value, data) => {
         console.log(value, data);
         this.setState({
             value,
         });
-    }
+    };
 
     render() {
         return (

diff --git a/components/tree-select/__docs__/demo/data/index.tsx b/components/tree-select/__docs__/demo/data/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { TreeSelect } from '@alifd/next';
+import type { TreeSelectProps } from '@alifd/next/lib/tree-select';
 
 const treeData = [
     {
@@ -36,15 +37,9 @@ const treeData = [
     },
 ];
 class Demo extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.handleChange = this.handleChange.bind(this);
-    }
-
-    handleChange(value, data) {
+    handleChange: TreeSelectProps['onChange'] = (value, data) => {
         console.log(value, data);
-    }
+    };
 
     render() {
         return (