@para-ui/core 2.1.32 → 2.1.35

package/docs/view/tree/codeString.tsx

@@ -0,0 +1,437 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicTree = `
+import Tree from '@para-ui/core/Tree';
+
+const treeData = [
+    {
+        title: 'parent 1',
+        key: '0-0',
+        children: [
+            {
+                title: 'parent 1-0',
+                key: '0-0-0',
+                disabled: true,
+                children: [
+                    {
+                        title: 'leaf',
+                        key: '0-0-0-0',
+                        disableCheckbox: true,
+                    },
+                    {
+                        title: 'leaf',
+                        key: '0-0-0-1',
+                    },
+                ],
+            },
+            {
+                title: 'parent 1-1',
+                key: '0-0-1',
+                children: [{title: <span style={{color: '#1890ff'}}>sss</span>, key: '0-0-1-0'}],
+            },
+        ],
+    },
+];
+
+const onSelect = (selectedKeys: React.Key[], info: any) => {
+    console.log('selected', selectedKeys, info);
+};
+
+const onCheck = (checkedKeys: React.Key[], info: any) => {
+    console.log('onCheck', checkedKeys, info);
+};
+
+<Tree
+    checkable
+    defaultExpandedKeys={['0-0-0', '0-0-1']}
+    defaultSelectedKeys={['0-0-0', '0-0-1']}
+    defaultCheckedKeys={['0-0-0', '0-0-1']}
+    onSelect={onSelect}
+    onCheck={onCheck}
+    treeData={treeData}
+    draggable
+/>
+`;
+
+export const controlTree = `
+import Tree from '@para-ui/core/Tree';
+
+const treeDataControl = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                children: [
+                    {title: '0-0-0-0', key: '0-0-0-0'},
+                    {title: '0-0-0-1', key: '0-0-0-1'},
+                    {title: '0-0-0-2', key: '0-0-0-2'},
+                ],
+            }
+        ]
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            {title: '0-1-0-0', key: '0-1-0-0'},
+            {title: '0-1-0-1', key: '0-1-0-1'},
+            {title: '0-1-0-2', key: '0-1-0-2'},
+        ],
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    }
+];
+
+const [expandedKeys, setExpandedKeys] = React.useState<React.Key[]>(['0-0-0', '0-0-1']);
+const [checkedKeys, setCheckedKeys] = React.useState<React.Key[]>(['0-0-0']);
+const [selectedKeys, setSelectedKeys] = React.useState<React.Key[]>([]);
+
+const onExpandControl = (expandedKeysValue: React.Key[]) => {
+    console.log('onExpandControl', expandedKeysValue);
+    setExpandedKeys(expandedKeysValue);
+};
+
+const onCheckControl = (checkedKeysValue: React.Key[]) => {
+    console.log('onCheckControl', checkedKeysValue);
+    setCheckedKeys(checkedKeysValue);
+};
+
+const onSelectControl = (selectedKeysValue: React.Key[], info: any) => {
+    console.log('onSelectControl', info);
+    setSelectedKeys(selectedKeysValue);
+};
+
+<Tree
+    checkable
+    onExpand={onExpandControl}
+    expandedKeys={expandedKeys}
+    onCheck={onCheckControl}
+    checkedKeys={checkedKeys}
+    onSelect={onSelectControl}
+    selectedKeys={selectedKeys}
+    treeData={treeDataControl}
+/>
+`;
+
+export const asyncLoadTree = `
+    import Tree, {DataNode} from '@para-ui/core/Tree';
+
+    const initTreeData: DataNode[] = [
+        {title: 'Expand to load', key: '0'},
+        {title: 'Expand to load', key: '1'},
+        {title: 'Tree Node', key: '2', isLeaf: true},
+    ];
+
+    const [loadTreeData, setLoadTreeData] = React.useState(initTreeData);
+
+    const updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] => {
+        return list.map(node => {
+            if (node.key === key) {
+                return {
+                    ...node,
+                    children,
+                };
+            }
+            if (node.children) {
+                return {
+                    ...node,
+                    children: updateTreeData(node.children, key, children),
+                };
+            }
+            return node;
+        });
+    };
+
+    const onLoadData = ({key, children}: any) => {
+        return new Promise < void > (resolve => {
+            if (children) {
+                resolve();
+                return;
+            }
+            setTimeout(() => {
+                setLoadTreeData((origin: DataNode[]) =>
+                    updateTreeData(origin, key, [
+                        {title: 'Child Node', key: \`\${key}-0\`},
+                        {title: 'Child Node', key: \`\${key}-1\`},
+                    ]),
+                );
+
+                resolve();
+            }, 1000);
+        });
+    };
+
+    <Tree loadData={onLoadData} treeData={loadTreeData}/>
+`;
+
+export const showLineTree = `
+import Tree from '@para-ui/core/Tree';
+import Switch from '@para-ui/core/Switch';
+import ProjectIcon from "@para-ui/icons/Project";
+
+const treeData = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                children: [
+                    {title: '0-0-0-0', key: '0-0-0-0'},
+                    {title: '0-0-0-1', key: '0-0-0-1'},
+                    {title: '0-0-0-2', key: '0-0-0-2'},
+                ],
+            }
+        ]
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            {title: '0-1-0-0', key: '0-1-0-0'},
+            {title: '0-1-0-1', key: '0-1-0-1'},
+            {title: '0-1-0-2', key: '0-1-0-2'},
+        ],
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    }
+];
+ 
+const [showLine, setShowLine] = React.useState<boolean | { showLeafIcon: boolean }>(true);
+const [showIcon, setShowIcon] = React.useState<boolean>(false);
+const [showLeafIcon, setShowLeafIcon] = React.useState<boolean>(true);
+
+const onSetLeafIcon = (checked: boolean) => {
+    setShowLeafIcon(checked);
+    setShowLine({showLeafIcon: checked});
+};
+
+const onSetShowLine = (checked: boolean) => {
+    setShowLine(checked ? {showLeafIcon} : false);
+};
+
+<div style={{marginBottom: 16}}>
+    showLine: <Switch checked={!!showLine} onChange={onSetShowLine}/>
+    <br/>
+    <br/>
+    showIcon: <Switch checked={showIcon} onChange={setShowIcon}/>
+    <br/>
+    <br/>
+    showLeafIcon: <Switch checked={showLeafIcon} onChange={onSetLeafIcon}/>
+</div>
+<Tree
+    showLine={showLine}
+    showIcon={showIcon}
+    treeData={treeData}
+    icon={<ProjectIcon/>}
+/>
+`;
+
+export const radioTree = `
+import Tree from '@para-ui/core/Tree';
+
+const treeData = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                children: [
+                    {title: '0-0-0-0', key: '0-0-0-0'},
+                    {title: '0-0-0-1', key: '0-0-0-1'},
+                    {title: '0-0-0-2', key: '0-0-0-2'},
+                ],
+            }
+        ]
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            {title: '0-1-0-0', key: '0-1-0-0'},
+            {title: '0-1-0-1', key: '0-1-0-1'},
+            {title: '0-1-0-2', key: '0-1-0-2'},
+        ],
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    }
+];
+ 
+<Tree radioable treeData={treeData}/>
+`;
+
+export const remoteLoadTree = `
+import Tree from '@para-ui/core/Tree';
+ 
+<Tree url={'请求url'}
+      ctx={'请求上下文'}
+      method={"Get"}
+      params={'请求参数'}
+      requestCallback={(treeData: DataNode[]) => {
+          //接口请求之后，处理返回数据
+          return treeData;
+      }}
+      paramsCallback={(params: { [name: string]: any }) => {
+          //接口请求之前，处理参数
+          return params;
+      }}
+/>
+`;
+
+export const localSearchTree = `
+import Tree from '@para-ui/core/Tree';
+import TextField from '@para-ui/core/TextField';
+
+const treeData = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                parentId: '0-0',
+                children: [
+                    {title: '0-0-0-0', key: '0-0-0-0', parentId: '0-0-0'},
+                    {title: '0-0-0-1', key: '0-0-0-1', parentId: '0-0-0'},
+                    {title: '0-0-0-2', key: '0-0-0-2', parentId: '0-0-0'},
+                ],
+            },
+            {
+                title: '0-0-1',
+                key: '0-0-1',
+                children: [
+                    {title: '0-0-1-0', key: '0-0-1-0', parentId: '0-0-1'},
+                    {title: '0-0-1-1', key: '0-0-1-1', parentId: '0-0-1'},
+                    {title: '0-0-1-2', key: '0-0-1-2', parentId: '0-0-1'},
+                ],
+            },
+            {
+                title: '0-0-2',
+                key: '0-0-2',
+            },
+        ]
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            {title: '0-1-0-0', key: '0-1-0-0', parentId: '0-1'},
+            {title: '0-1-0-1', key: '0-1-0-1', parentId: '0-1'},
+            {title: '0-1-0-2', key: '0-1-0-2', parentId: '0-1'},
+        ]
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    }
+];
+
+const [value, setValue] = React.useState<string>('');
+
+const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+};
+
+<TextField
+    value={value}
+    onChange={onChange}
+    placeholder="Search"
+/>
+<Tree treeData={treeData}
+      localFilter={true}
+      localParams={{searchKey: 'title', searchValue: value}}
+/>
+`;
+
+export const showActionsTree = `
+import Tree, {DataNode} from '@para-ui/core/Tree';
+
+const treeData = [
+    {
+        title: '0-0',
+        key: '0-0',
+        children: [
+            {
+                title: '0-0-0',
+                key: '0-0-0',
+                children: [
+                    {title: '0-0-0-0', key: '0-0-0-0'},
+                    {title: '0-0-0-1', key: '0-0-0-1'},
+                    {title: '0-0-0-2', key: '0-0-0-2'},
+                ],
+            }
+        ]
+    },
+    {
+        title: '0-1',
+        key: '0-1',
+        children: [
+            {title: '0-1-0-0', key: '0-1-0-0'},
+            {title: '0-1-0-1', key: '0-1-0-1'},
+            {title: '0-1-0-2', key: '0-1-0-2'},
+        ],
+    },
+    {
+        title: '0-2',
+        key: '0-2',
+    }
+];
+
+const handleActionsCallback = (nodeData: DataNode, type: 'add' | 'edit' | 'enable' | 'del' | string) => {
+    console.log('actionsCallback:::', type, nodeData);
+};
+
+//传入false或不传，则不显示对应按钮
+//   showActions={{
+//       add: true,
+//       edit: true,
+//       // enable: true,
+//       del: false
+//   }}
+
+//自定义按钮
+//   showActions={{
+//       add: true,
+//       del: true,
+//       customizeActions: [
+//           {text: '自定义', icon: <ProjectIcon/>, action: 'test'},
+//       ]
+//   }}
+
+//自定义按钮text和icon
+//   showActions={{
+//       add: {text: 'new', icon: <BlacklistAdd/>},
+//       del: true
+//   }}
+
+//根据节点数据，判断是否显示按钮
+//   showActions={{
+//       add: (node: DataNode) => node.key !== '0-0',
+//       edit: true,
+//       del: true
+//   }}
+
+<Tree treeData={treeData}
+      actionsCallback={handleActionsCallback}
+      //启用全部内置按钮
+      showActions={true}
+/>
+`;
+
+

package/docs/view/tree/index.scss

@@ -0,0 +1,5 @@
+.paraui-tree-demo {
+  .code-box-demo {
+
+  }
+}