feat: rework TreeView component

trendmicro-frontend · Jul 28, 2023 · ed47b0e · ed47b0e
1 parent 3fffe7a
commit ed47b0e
Show file tree

Hide file tree

Showing 13 changed files with 749 additions and 301 deletions.
diff --git a/packages/react-docs/pages/components/treeview/basic.js b/packages/react-docs/pages/components/treeview/basic.js
@@ -0,0 +1,71 @@
+import {
+  Scrollbar,
+  TreeView,
+  TreeNode,
+  Truncate,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+import tree from './data/tree.json';
+
+const findExpandableNodeIds = (tree) => {
+  const expandableNodeIds = [];
+
+  const traverse = (node) => {
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      expandableNodeIds.push(node.id);
+      node.children.forEach(traverse);
+    }
+  };
+
+  traverse(tree);
+
+  return expandableNodeIds;
+};
+
+const renderTree = (node, depth = 0) => {
+  const childCount = Array.isArray(node.children) ? node.children.length : 0;
+
+  return (
+    <TreeNode
+      key={node.id}
+      nodeId={node.id}
+      render={() => (
+        <Truncate>{node.name}</Truncate>
+      )}
+    >
+      {(childCount > 0)
+        ? node.children.map(node => renderTree(node, depth + 1))
+        : null
+      }
+    </TreeNode>
+  );
+};
+
+const expandableNodeIds = findExpandableNodeIds(tree);
+
+const App = () => {
+  const [colorStyle] = useColorStyle();
+
+  return (
+    <Scrollbar
+      width={400}
+      height={240}
+      overflowY="visible"
+      sx={{
+        border: 1,
+        borderColor: colorStyle.divider,
+      }}
+    >
+      <TreeView
+        aria-label="basic tree view"
+        defaultExpandedNodes={expandableNodeIds}
+        isSelectable
+      >
+        {renderTree(tree)}
+      </TreeView>
+    </Scrollbar>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/treeview/controlled.js b/packages/react-docs/pages/components/treeview/controlled.js
@@ -0,0 +1,163 @@
+import {
+  Button,
+  ButtonGroup,
+  Divider,
+  Scrollbar,
+  Stack,
+  Text,
+  TreeView,
+  TreeNode,
+  Truncate,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React, { useState } from 'react';
+import tree from './data/tree.json';
+
+const renderTree = (node, depth = 0) => {
+  const childCount = Array.isArray(node.children) ? node.children.length : 0;
+
+  return (
+    <TreeNode
+      key={node.id}
+      nodeId={node.id}
+      render={() => (
+        <Truncate>{node.name}</Truncate>
+      )}
+    >
+      {(childCount > 0)
+        ? node.children.map(node => renderTree(node, depth + 1))
+        : null
+      }
+    </TreeNode>
+  );
+};
+
+const findExpandableNodeIds = (tree) => {
+  const expandableNodeIds = [];
+
+  const traverse = (node) => {
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      expandableNodeIds.push(node.id);
+      node.children.forEach(traverse);
+    }
+  };
+
+  traverse(tree);
+
+  return expandableNodeIds;
+};
+
+const getAllNodeIds = (tree) => {
+  const allNodeIds = [];
+
+  const traverse = (node) => {
+    allNodeIds.push(node.id);
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      node.children.forEach(traverse);
+    }
+  };
+
+  traverse(tree);
+
+  return allNodeIds;
+};
+
+const allNodeIds = getAllNodeIds(tree);
+const expandableNodeIds = findExpandableNodeIds(tree);
+
+const App = () => {
+  const [colorStyle] = useColorStyle();
+  const [expandedNodes, setExpandedNodes] = useState(expandableNodeIds);
+  const [selectedNodes, setSelectedNodes] = useState([]);
+
+  const onToggleNodes = (nodeIds) => {
+    setExpandedNodes(nodeIds);
+  };
+
+  const onSelectNodes = (nodeIds) => {
+    setSelectedNodes(nodeIds);
+  };
+
+  const handleClickExpandAll = (event) => {
+    setExpandedNodes(expandableNodeIds);
+  };
+
+  const handleClickCollapseAll = (event) => {
+    setExpandedNodes([]);
+  };
+
+  const handleClickSelectAll = (event) => {
+    setSelectedNodes(allNodeIds);
+  };
+
+  const handleClickUnselectAll = (event) => {
+    setSelectedNodes([]);
+  };
+
+  return (
+    <>
+      <ButtonGroup
+        variant="secondary"
+        columnGap="2x"
+        mb="3x"
+      >
+        <Button
+          variant="secondary"
+          disabled={expandedNodes.length === expandableNodeIds.length}
+          onClick={handleClickExpandAll}
+        >
+          Expand all
+        </Button>
+        <Button
+          variant="secondary"
+          disabled={expandedNodes.length === 0}
+          onClick={handleClickCollapseAll}
+        >
+          Collapse all
+        </Button>
+        <Button
+          variant="secondary"
+          disabled={selectedNodes.length === allNodeIds.length}
+          onClick={handleClickSelectAll}
+        >
+          Select all
+        </Button>
+        <Button
+          variant="secondary"
+          disabled={selectedNodes.length === 0}
+          onClick={handleClickUnselectAll}
+        >
+          Unselect all
+        </Button>
+      </ButtonGroup>
+      <Stack spacing="2x">
+        <Text>Expanded nodes: {expandedNodes.join(', ')}</Text>
+        <Text>Selected nodes: {selectedNodes.join(', ')}</Text>
+      </Stack>
+      <Divider my="4x" />
+      <Scrollbar
+        width={400}
+        height={240}
+        overflowY="visible"
+        sx={{
+          border: 1,
+          borderColor: colorStyle.divider,
+        }}
+      >
+        <TreeView
+          aria-label="controlled"
+          isSelectable
+          isMultiSelectable
+          expandedNodes={expandedNodes}
+          selectedNodes={selectedNodes}
+          onToggleNodes={onToggleNodes}
+          onSelectNodes={onSelectNodes}
+        >
+          {renderTree(tree)}
+        </TreeView>
+      </Scrollbar>
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/treeview/data/tree.json b/packages/react-docs/pages/components/treeview/data/tree.json
@@ -0,0 +1,68 @@
+{
+  "id": "0",
+  "name": "Root",
+  "children": [
+    {
+      "id": "1",
+      "name": "Node 1",
+      "children": [
+        {
+          "id": "2",
+          "name": "Node 2",
+          "children": [
+            {
+              "id": "3",
+              "name": "Node 3",
+              "children": [
+                {
+                  "id": "4",
+                  "name": "Node 4"
+                }
+              ]
+            },
+            {
+              "id": "5",
+              "name": "Node 5"
+            }
+          ]
+        },
+        {
+          "id": "6",
+          "name": "Node 6",
+          "children": [
+            {
+              "id": "7",
+              "name": "Node 7",
+              "children": [
+                {
+                  "id": "8",
+                  "name": "Node 8"
+                },
+                {
+                  "id": "9",
+                  "name": "Node 9"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "10",
+      "name": "Node 10",
+      "children": [
+        {
+          "id": "11",
+          "name": "Node 11",
+          "children": [
+            {
+              "id": "12",
+              "name": "Node 12"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/react-docs/pages/components/treeview/icons.js b/packages/react-docs/pages/components/treeview/icons.js
@@ -0,0 +1,86 @@
+import {
+  Flex,
+  Icon,
+  Scrollbar,
+  TreeView,
+  TreeNode,
+  Truncate,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+import tree from './data/tree.json';
+
+const findExpandableNodeIds = (tree) => {
+  const expandableNodeIds = [];
+
+  const traverse = (node) => {
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      expandableNodeIds.push(node.id);
+      node.children.forEach(traverse);
+    }
+  };
+
+  traverse(tree);
+
+  return expandableNodeIds;
+};
+
+const renderTree = (node, depth = 0) => {
+  const childCount = Array.isArray(node.children) ? node.children.length : 0;
+
+  return (
+    <TreeNode
+      key={node.id}
+      nodeId={node.id}
+      render={({ isExpanded }) => {
+        const icon = (() => {
+          if (childCount > 0) {
+            return isExpanded ? 'folder-open' : 'folder';
+          }
+          return 'server';
+        })();
+        const iconColor = (childCount > 0) ? 'yellow:50' : 'currentColor';
+
+        return (
+          <Flex alignItems="center" columnGap="2x">
+            <Icon icon={icon} color={iconColor} />
+            <Truncate>{node.name}</Truncate>
+          </Flex>
+        );
+      }}
+    >
+      {(childCount > 0)
+        ? node.children.map(node => renderTree(node, depth + 1))
+        : null
+      }
+    </TreeNode>
+  );
+};
+
+const expandableNodeIds = findExpandableNodeIds(tree);
+
+const App = () => {
+  const [colorStyle] = useColorStyle();
+
+  return (
+    <Scrollbar
+      width={400}
+      height={240}
+      overflowY="visible"
+      sx={{
+        border: 1,
+        borderColor: colorStyle.divider,
+      }}
+    >
+      <TreeView
+        aria-label="node icons"
+        defaultExpandedNodes={expandableNodeIds}
+        isSelectable
+      >
+        {renderTree(tree)}
+      </TreeView>
+    </Scrollbar>
+  );
+};
+
+export default App;