fix: jsxTree nodes collapse/expand

ccontrols · Nov 30, 2020 · 9a153e1 · 9a153e1
1 parent c530e29
commit 9a153e1
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 50 deletions.
diff --git a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { FC, useCallback, useMemo, useEffect, useState } from 'react';
+import React, { FC, useMemo, useEffect, useReducer } from 'react';
 import { TriangleDownIcon, TriangleRightIcon } from '@primer/octicons-react';
 import { Component, JSXTree, isLocalImport } from '@component-controls/core';
 import { usePackage } from '@component-controls/store';
@@ -18,27 +18,80 @@ export interface ComponentJSXTreeProps {
   component?: Component;
 }
 
+enum ACTIONS {
+  SET = 'SET_ROWS',
+  SET_STATS = 'SET_STATS',
+}
+
+type ActionSetRows = {
+  type: ACTIONS.SET;
+  data: {
+    rows: TreeItems | undefined;
+  };
+};
+
+type ActionSetStats = {
+  type: ACTIONS.SET_STATS;
+  data: {
+    canExpand: boolean;
+    canCollapse: boolean;
+    total: number;
+  };
+};
+const reducer = (
+  state: {
+    rows: TreeItems | undefined;
+    canExpand: boolean;
+    canCollapse: boolean;
+    total: number;
+  },
+  action: ActionSetRows | ActionSetStats,
+) => {
+  switch (action.type) {
+    case ACTIONS.SET:
+      return { ...state, rows: action.data.rows };
+    case ACTIONS.SET_STATS:
+      return {
+        ...state,
+        canExpand: action.data.canExpand,
+        canCollapse: action.data.canCollapse,
+        total: action.data.total,
+      };
+    default:
+      throw new Error();
+  }
+};
+
 /**
  * base component dependencies
  */
 
 export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
-  const [rows, setRows] = useState<TreeItems | undefined>([]);
-  const [expandCollapse, setExpandCollapse] = useState<{
-    canExpand: boolean;
-    canCollapse: boolean;
-  }>({ canExpand: false, canCollapse: false });
+  const [{ rows, canExpand, canCollapse, total }, dispatch] = useReducer(
+    reducer,
+    {
+      rows: undefined,
+      canExpand: false,
+      canCollapse: false,
+      total: 0,
+    },
+  );
   const componentPackage = usePackage(component?.package);
-  const { dependencies = {}, devDependencies = {} } = componentPackage || {};
+
   const updateStats = (items?: TreeItems) => {
     const { total, expanded } = getTreeItemsStats(items || []);
-    setExpandCollapse({
-      canExpand: expanded < total,
-      canCollapse: expanded > 0,
+    dispatch({
+      type: ACTIONS.SET_STATS,
+      data: {
+        total,
+        canExpand: expanded < total,
+        canCollapse: expanded > 0,
+      },
     });
   };
   useEffect(() => {
     const { jsx } = component || {};
+    const { dependencies, devDependencies } = componentPackage || {};
     const treeToItems = (
       tree: JSXTree,
       level: number,
@@ -67,46 +120,51 @@ export const ComponentJSXTree: FC<ComponentJSXTreeProps> = ({ component }) => {
         : undefined;
     };
     const newRows = jsx ? treeToItems(jsx, 0) : undefined;
-    setRows(newRows);
+    dispatch({ type: ACTIONS.SET, data: { rows: newRows } });
     updateStats(newRows);
-  }, [component, dependencies, devDependencies]);
-
+  }, [component, componentPackage]);
   const actions = useMemo(() => {
     const actions = [];
-    if (expandCollapse.canCollapse) {
+    if (canCollapse) {
       actions.push({
         id: 'collapse_all',
         node: 'collapse all',
         'arial-label': 'collapse all jsx nodes',
         onClick: () => {
           if (rows) {
             const collapsed = expandTreeItems(rows, false);
-            setRows(collapsed);
+            dispatch({ type: ACTIONS.SET, data: { rows: collapsed } });
             updateStats(collapsed);
           }
         },
       });
     }
-    if (expandCollapse.canExpand) {
+    if (canExpand) {
       actions.push({
         id: 'expand_all',
         node: 'expand all',
         'arial-label': 'expand all jsx nodes',
         onClick: () => {
           if (rows) {
             const expanded = expandTreeItems(rows, true);
-            setRows(expanded);
+            dispatch({ type: ACTIONS.SET, data: { rows: expanded } });
             updateStats(expanded);
           }
         },
       });
     }
     return actions;
-  }, [rows, expandCollapse]);
-  const onExpandCollapse = useCallback(
-    (items: TreeItems) => updateStats(items),
-    [],
-  );
+  }, [rows, canExpand, canCollapse]);
+  const onExpandCollapse = (expandedCount: number) => {
+    dispatch({
+      type: ACTIONS.SET_STATS,
+      data: {
+        total,
+        canExpand: expandedCount < total,
+        canCollapse: expandedCount > 0,
+      },
+    });
+  };
   return rows ? (
     <ActionContainer actions={actions}>
       <Tree

diff --git a/ui/blocks/src/ComponentJSX/ImportLabel.tsx b/ui/blocks/src/ComponentJSX/ImportLabel.tsx
@@ -5,23 +5,24 @@ import { jsx, Box, Text } from 'theme-ui';
 import { JSXNode } from '@component-controls/core';
 import { LocalImport } from '../PackageLink';
 
-export const ImportLabel: FC<{ node: JSXNode }> = ({ node }) => (
-  <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-    <LocalImport node={node} />
-    {console.log(node)}
-    {node.from && (
-      <Box
-        sx={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline' }}
-      >
-        <Text sx={{ mx: 1, fontSize: 0, lineHeight: '1.2rem' }}>from</Text>
-        <Text
-          sx={{
-            fontSize: 1,
-            lineHeight: '1.2rem',
-            whiteSpace: 'nowrap',
-          }}
-        >{`"${node.from}"`}</Text>
-      </Box>
-    )}
-  </Box>
-);
+export const ImportLabel: FC<{ node: JSXNode }> = ({ node }) => {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+      <LocalImport node={node} />
+      {node.from && (
+        <Box
+          sx={{ display: 'flex', flexDirection: 'row', alignItems: 'baseline' }}
+        >
+          <Text sx={{ mx: 1, fontSize: 0, lineHeight: '1.2rem' }}>from</Text>
+          <Text
+            sx={{
+              fontSize: 1,
+              lineHeight: '1.2rem',
+              whiteSpace: 'nowrap',
+            }}
+          >{`"${node.from}"`}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/ui/components/src/Tree/Tree.tsx b/ui/components/src/Tree/Tree.tsx
@@ -83,6 +83,9 @@ export const Tree: FC<TreeProps> = ({
       ...state,
       expandedItems: newExpandedItems,
     });
+    if (typeof onExpandCollapse === 'function') {
+      onExpandCollapse(newExpandedItems.length);
+    }
   };
 
   const renderItem = (item: TreeItem, level = 0) => {
@@ -125,9 +128,6 @@ export const Tree: FC<TreeProps> = ({
                 if (itemItems) {
                   e.stopPropagation();
                   onMenuChange(item, isExpanded);
-                  if (typeof onExpandCollapse === 'function') {
-                    onExpandCollapse(items, item, isExpanded);
-                  }
                 } else if (typeof onSelect === 'function') {
                   onSelect(item);
                 }

diff --git a/ui/components/src/Tree/tree-utils.ts b/ui/components/src/Tree/tree-utils.ts
@@ -187,11 +187,7 @@ export type TreeOwnProps = {
   /**
    * Function that will be called on expand/collapse
    */
-  onExpandCollapse?: (
-    items: TreeItems,
-    item: TreeItem,
-    isExpanded: boolean,
-  ) => void;
+  onExpandCollapse?: (expandedCount: number) => void;
 
   /** If specified, will filter the items by the search terms */
   search?: string;