Save treefy example with click

okcodes · Oct 16, 2020 · c872e97 · c872e97
1 parent b622039
commit c872e97
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 11 deletions.
diff --git a/src/lib/TreefyExampleComponent.tsx b/src/lib/TreefyExampleComponent.tsx
@@ -40,6 +40,59 @@ const slashSeparatedValues = [
     'Cold Wallet / LLC / ETH',
 ];
 
+type BranchClickArgs = {
+    subBranches: string[]
+    currentBranch: string
+    separator: string
+    tree: TreefyObject
+    baseNodeId: string
+    parentBranch: string
+    fullPath: string
+    nodeId: string
+}
+
+type BranchProps = {
+    tree: TreefyObject
+    baseNodeId: string
+    parentBranch: string
+    separator: string
+    onClick: (data: BranchClickArgs) => void
+}
+
+const BranchWithClick = ({tree, baseNodeId, parentBranch, separator, onClick}: BranchProps) => {
+    if (!Object.keys(tree).length) return null;
+    return (
+        <>
+            {Object.keys(tree).map(currentBranch => {
+                const nodeId = `${baseNodeId}${separator}${currentBranch}`;
+                const subBranches = Object.keys(tree[currentBranch]);
+                const fullPath = (parentBranch ? parentBranch + separator : '') + currentBranch;
+                return (
+                    <TreeItem key={nodeId} nodeId={nodeId} label={(
+                        <div onClick={() => {
+                            onClick({
+                                subBranches, currentBranch, separator, tree, baseNodeId, parentBranch, fullPath, nodeId,
+                            });
+                        }}>
+                            {currentBranch}
+                        </div>
+                    )}>
+                        {subBranches.map(subBranch =>
+                            <BranchWithClick
+                                key={`${baseNodeId}${separator}${currentBranch}${separator}${subBranch}`}
+                                tree={{[subBranch]: tree[currentBranch][subBranch]}}
+                                baseNodeId={nodeId}
+                                parentBranch={(parentBranch ? parentBranch + separator : '') + currentBranch}
+                                separator={separator}
+                                onClick={onClick}
+                            />)}
+                    </TreeItem>
+                );
+            })}
+        </>
+    );
+};
+
 const Branch = ({tree, baseKey}: { tree: TreefyObject, baseKey: string }) => {
     if (!Object.keys(tree).length) return null;
     return (
@@ -67,7 +120,11 @@ export const TreefyExampleComponent = () => {
             defaultCollapseIcon={<ExpandMoreIcon/>}
             defaultExpandIcon={<ChevronRightIcon/>}
         >
-            <Branch tree={tree} baseKey={'root-tree'}/>
+            <Branch tree={tree} baseKey={'root-tree-basic'}/>
+            <br/>
+            <BranchWithClick
+                tree={tree} baseNodeId={'root-tree'} parentBranch={''} separator={'/'}
+                onClick={data => console.log('%c click', 'background: white; color: black', data)}/>
         </TreeView>
     );
 };
diff --git a/src/views/FlowOperationList/components/AccountPicker.tsx b/src/views/FlowOperationList/components/AccountPicker.tsx
@@ -60,15 +60,8 @@ const Branch = ({tree, baseNodeId, parentBranch, separator, onClick}: BranchProp
                 return (
                     <TreeItem key={nodeId} nodeId={nodeId} label={(
                         <div onClick={() => {
-                            console.log('%c click', 'background: white; color: black', {
-                                subBranches,
-                                currentBranch,
-                                separator,
-                                tree,
-                                baseNodeId,
-                                parentBranch,
-                                fullPath,
-                                nodeId,
+                            onClick({
+                                subBranches, currentBranch, separator, tree, baseNodeId, parentBranch, fullPath, nodeId,
                             });
                         }}>
                             {currentBranch}
@@ -100,7 +93,7 @@ const TreefyExample = ({accountNames, separator}: { accountNames: string[], sepa
             defaultExpandIcon={<ChevronRightIcon/>}
         >
             <Branch tree={tree} baseNodeId={'account-picker-tree'} parentBranch={''} separator={separator}
-                    onClick={() => void 0}/>
+                    onClick={data => console.log('%c click', 'background: white; color: black', data)}/>
         </TreeView>
     );
 };