fix: tree collapse/expand

ccontrols · Nov 30, 2020 · 70afbab · 70afbab
1 parent 4eb217b
commit 70afbab
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx
@@ -94,11 +94,12 @@ export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
     const { dependencies, devDependencies } = componentPackage || {};
     const treeToItems = (
       tree: JSXTree,
-      level: number,
+      level: number = 0,
+      parentIndex: number = 0,
     ): TreeItems | undefined => {
       return tree.length
         ? tree.map((item, index) => ({
-            id: `${item.name}-${level}-${index}`,
+            id: `${item.name}-${level}-${parentIndex}-${index}`,
             label: ({ isExpanded }) => (
               <JSXTreeNode node={item} isExpanded={isExpanded} />
             ),
@@ -114,12 +115,12 @@ export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
               ),
             expanded: level <= 1,
             items: item.children
-              ? treeToItems(item.children, level + 1)
+              ? treeToItems(item.children, level + 1, index)
               : undefined,
           }))
         : undefined;
     };
-    const newRows = jsx ? treeToItems(jsx, 0) : undefined;
+    const newRows = jsx ? treeToItems(jsx) : undefined;
     dispatch({ type: ACTIONS.SET, data: { rows: newRows } });
     updateStats(newRows);
   }, [component, componentPackage]);

diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx
@@ -101,14 +101,14 @@ export const Tree: FC<TreeProps> = ({
 
     const isActiveItem = activeItem && activeItem.id === id;
     const isActiveParent = hasActiveChidlren(item, activeItem);
-    const expandIcon = itemItems && (
+    const expandIcon = itemItems?.length ? (
       <Box
         aria-label={isExpanded ? 'collapse items' : 'expand items'}
         variant="tree.expandicon"
       >
         {isExpanded ? iconExpanded : iconCollapsed}
       </Box>
-    );
+    ) : null;
     const content = (
       <Flex
         sx={{