Merge pull request #61 from kaishens-cn/dev/tree

kaishens-cn · May 20, 2024 · 5abc3ae · 5abc3ae
2 parents 9c3b46b + bb2513b
commit 5abc3ae
Show file tree

Hide file tree

Showing 7 changed files with 300 additions and 66 deletions.
diff --git a/example/tree.tsx b/example/tree.tsx
@@ -1,40 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Column, Icon, Tree } from '../src';
 
 const TreeOverview = () => {
+  const [data, setData] = useState([
+    {
+      id: '0',
+      label: 'node 0',
+      prefix: <Icon.Dns width={14} />,
+      children: [
+        { id: '0-0', label: 'node 0-0', prefix: <Icon.Dns width={14} /> },
+        {
+          id: '0-1',
+          label: 'node 0-1',
+          prefix: <Icon.Dns width={14} />,
+          children: [
+            {
+              id: '0-1-1',
+              label: 'node 0-1-1',
+              prefix: <Icon.Dns width={14} />,
+              children: [{ id: '0-1-1-1', label: 'node 0-1-1-1', prefix: <Icon.Dns width={14} /> }],
+            },
+            { id: '0-1-2', label: 'node 0-1-2', prefix: <Icon.Dns width={14} /> },
+          ],
+        },
+        { id: '0-2', label: 'node 0-2', prefix: <Icon.Dns width={14} /> },
+      ],
+    },
+    {
+      id: '1',
+      label: 'node 1',
+      children: [
+        { id: '1-0', label: 'node 1-0', prefix: <Icon.Dns width={14} /> },
+        { id: '1-1', label: 'node 1-1', prefix: <Icon.Dns width={14} /> },
+      ],
+    },
+  ]);
+
   return (
     <Column className="component-container" align="unset">
-      <Tree
-        expandedOffset={-20}
-        data={[
-          {
-            id: '0',
-            label: 'node 0',
-            children: [
-              { id: '0-0', label: 'node 0-0', prefix: <Icon.Dns width={14} /> },
-              {
-                id: '0-1',
-                label: 'node 0-1',
-                prefix: <Icon.Dns width={14} />,
-                children: [
-                  { id: '0-1-1', label: 'node 0-1-1', prefix: <Icon.Dns width={14} /> },
-                  { id: '0-1-2', label: 'node 0-1-2', prefix: <Icon.Dns width={14} /> },
-                ],
-              },
-              { id: '0-2', label: 'node 0-2', prefix: <Icon.Dns width={14} /> },
-            ],
-          },
-          {
-            id: '1',
-            label: 'node 1',
-            children: [
-              { id: '1-0', label: 'node 1-0', prefix: <Icon.Dns width={14} /> },
-              { id: '1-1', label: 'node 1-1', prefix: <Icon.Dns width={14} /> },
-            ],
-          },
-        ]}
-      />
+      <Tree defaultExpandedKeys={['0']} data={data} />
     </Column>
   );
 };

diff --git a/package.json b/package.json
@@ -84,8 +84,10 @@
   },
   "dependencies": {
     "@react-spring/web": "9.7.3",
+    "@types/lodash": "^4.17.4",
     "classnames": "^2.3.2",
     "jotai": "^2.4.1",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml