fix: pr comments IIV

- renamed some identifiers to avoid confusion
momentum-design · Aug 20, 2024 · 44edce1 · 44edce1
1 parent df8bf9d
commit 44edce1
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 106 deletions.
diff --git a/src/components/Tree/Tree.stories.tsx b/src/components/Tree/Tree.stories.tsx
@@ -7,14 +7,14 @@ import argTypes from './Tree.stories.args';
 import Documentation from './Tree.stories.docs.mdx';
 import { createTreeNode as tNode } from './test.utils';
 import Tree, { TreeProps, useTreeContext } from './';
-import { convertTreeToFlatTree, mapFlatTree } from './Tree.utils';
+import { convertNestedTree2MappedTree, mapTree } from './Tree.utils';
 import TreeNodeBase from '../TreeNodeBase';
 import Icon from '../Icon';
 import Menu from '../Menu';
 import { Item } from '@react-stately/collections';
 import MenuTrigger from '../MenuTrigger';
 import ButtonCircle from '../ButtonCircle';
-import { FlatTreeNode } from './Tree.types';
+import { TreeNodeRecord } from './Tree.types';
 
 // prettier-ignore
 const exampleTree =
@@ -39,7 +39,7 @@ const exampleTree =
       tNode('4.2')]),
   ]);
 
-const exampleFlatTree = convertTreeToFlatTree(exampleTree);
+const exampleTreeMap = convertNestedTree2MappedTree(exampleTree);
 
 export default {
   title: 'Momentum UI/Tree',
@@ -54,7 +54,7 @@ export default {
 };
 
 interface ExampleTreeNodeProps {
-  node: FlatTreeNode;
+  node: TreeNodeRecord;
 }
 
 const ExampleTreeNode = ({ node }: ExampleTreeNodeProps) => {
@@ -109,7 +109,7 @@ Example.args = {
   treeStructure: exampleTree,
   isRenderedFlat: true,
   shouldNodeFocusBeInset: true,
-  children: mapFlatTree(exampleFlatTree, (node) => (
+  children: mapTree(exampleTreeMap, (node) => (
     <ExampleTreeNode key={node.id.toString()} node={node} />
   )),
 };
@@ -123,8 +123,8 @@ WithRoot.args = {
   isRenderedFlat: true,
   shouldNodeFocusBeInset: true,
   excludeTreeRoot: false,
-  children: mapFlatTree(
-    exampleFlatTree,
+  children: mapTree(
+    exampleTreeMap,
     (node) => <ExampleTreeNode key={node.id.toString()} node={node} />,
     { excludeRootNode: false }
   ),
@@ -139,8 +139,8 @@ TreeWithScroll.args = {
   shouldNodeFocusBeInset: true,
   excludeTreeRoot: false,
   style: { height: '20rem', width: '25rem', overflow: 'auto' },
-  children: mapFlatTree(
-    exampleFlatTree,
+  children: mapTree(
+    exampleTreeMap,
     (node) => <ExampleTreeNode key={node.id.toString()} node={node} />,
     { excludeRootNode: false }
   ),

diff --git a/src/components/Tree/Tree.test.tsx b/src/components/Tree/Tree.test.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 import Tree, { TREE_CONSTANTS } from './index';
 import { createTreeNode as tNode } from './test.utils';
 import TreeNodeBase from '../TreeNodeBase';
-import { convertTreeToFlatTree, mapFlatTree } from './Tree.utils';
+import { convertNestedTree2MappedTree, mapTree } from './Tree.utils';
 
 const getSampleTree = () => {
   // prettier-ignore
@@ -190,8 +190,8 @@ describe('<Tree />', () => {
 
       const { getByTestId } = render(
         <Tree treeStructure={tree} excludeTreeRoot={false}>
-          {mapFlatTree(
-            convertTreeToFlatTree(tree),
+          {mapTree(
+            convertNestedTree2MappedTree(tree),
             (node) => (
               <TreeNodeBase
                 key={node.id.toString()}
@@ -262,8 +262,8 @@ describe('<Tree />', () => {
           excludeTreeRoot={false}
           setVirtualTreeNodeOpenState={setVirtualTreeNodeOpenState}
         >
-          {mapFlatTree(
-            convertTreeToFlatTree(tree),
+          {mapTree(
+            convertNestedTree2MappedTree(tree),
             (node) => (
               <TreeNodeBase key={node.id.toString()} nodeId={node.id} data-testid={node.id}>
                 {node.id}

diff --git a/src/components/Tree/Tree.tsx b/src/components/Tree/Tree.tsx
@@ -2,16 +2,15 @@ import React, { FC, useState, useCallback, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import { STYLE, DEFAULTS } from './Tree.constants';
-import { FlatTree, Props, TreeContextValue, TreeNodeId } from './Tree.types';
+import { TreeIdNodeMap, Props, TreeContextValue, TreeNodeId } from './Tree.types';
 import {
-  convertTreeToFlatTree,
+  convertNestedTree2MappedTree,
   getNextActiveNode,
-  toggleFlatTreeNode,
+  toggleTreeNodeRecord,
   TreeContext,
 } from './Tree.utils';
 import { useKeyboard } from '@react-aria/interactions';
 import { isFocusableNode } from '../../utils/navigation';
-import tree from './index';
 
 const Tree: FC<Props> = (props: Props) => {
   const {
@@ -31,26 +30,26 @@ const Tree: FC<Props> = (props: Props) => {
     throw new Error('Tree must have at least one child when excludeTreeRoot is true');
   }
 
-  const [flatTree, setFlatTree] = useState<FlatTree>(convertTreeToFlatTree(treeStructure));
+  const [tree, setTree] = useState<TreeIdNodeMap>(convertNestedTree2MappedTree(treeStructure));
   const [activeNodeId, setActiveNodeId] = useState<TreeNodeId>(
     excludeTreeRoot ? treeStructure.children[0].id : treeStructure.id
   );
 
   const toggleTreeNode = useCallback(
     (id: TreeNodeId, isOpen?: boolean) => {
-      const newOpenState = isOpen !== undefined ? isOpen : !flatTree.get(id).isOpen;
+      const newOpenState = isOpen !== undefined ? isOpen : !tree.get(id).isOpen;
       setVirtualTreeNodeOpenState?.(id, newOpenState);
-      setFlatTree((prevTree) => toggleFlatTreeNode(id, prevTree, newOpenState));
+      setTree((prevTree) => toggleTreeNodeRecord(id, prevTree, newOpenState));
     },
-    [flatTree]
+    [tree]
   );
 
-  const getNodeDetails = useCallback((id: TreeNodeId) => flatTree.get(id), [flatTree]);
+  const getNodeDetails = useCallback((id: TreeNodeId) => tree.get(id), [tree]);
 
   const getNodeProps = useCallback(
     (id: TreeNodeId): Partial<HTMLAttributes<HTMLElement>> => {
-      const node = flatTree.get(id);
-      const parent = node.parent && flatTree.get(node.parent);
+      const node = tree.get(id);
+      const parent = node.parent && tree.get(node.parent);
       const isRoot = parent === undefined;
 
       // tabindex depends on the treeNodeBase params as well
@@ -66,19 +65,19 @@ const Tree: FC<Props> = (props: Props) => {
       }
       return props;
     },
-    [flatTree]
+    [tree]
   );
 
   const getNodeGroupProps = useCallback(
     (id: TreeNodeId): Partial<HTMLAttributes<HTMLElement>> => {
-      const node = flatTree.get(id);
+      const node = tree.get(id);
 
       return {
         role: 'group',
         'aria-owns': node.children.join(' '),
       };
     },
-    [flatTree]
+    [tree]
   );
 
   const getContext = useCallback(
@@ -119,7 +118,7 @@ const Tree: FC<Props> = (props: Props) => {
           if (target.getAttribute('role') === 'treeitem' || !isFocusableNode(target)) {
             evt.preventDefault();
             setActiveNodeId(
-              getNextActiveNode(flatTree, activeNodeId, evt.key, excludeTreeRoot, toggleTreeNode)
+              getNextActiveNode(tree, activeNodeId, evt.key, excludeTreeRoot, toggleTreeNode)
             );
           }
           break;

diff --git a/src/components/Tree/Tree.types.ts b/src/components/Tree/Tree.types.ts
@@ -39,9 +39,9 @@ export interface TreeNode {
 }
 
 /**
- * A node in the flattened tree.
+ * Tree node states in the Tree component.
  */
-export interface FlatTreeNode extends Omit<TreeNode, 'children' | 'isOpenByDefault'> {
+export interface TreeNodeRecord extends Omit<TreeNode, 'children' | 'isOpenByDefault'> {
   /**
    * List of child node ids.
    */
@@ -75,12 +75,12 @@ export interface FlatTreeNode extends Omit<TreeNode, 'children' | 'isOpenByDefau
 }
 
 /**
- * Flattened tree represented with map.
+ * Tree representation with map.
  *
- * It is used for internal representation of the tree.
+ * It is used to store the tree states internally.
  * @internal
  */
-export type FlatTree = Map<TreeNodeId, FlatTreeNode>;
+export type TreeIdNodeMap = Map<TreeNodeId, TreeNodeRecord>;
 
 /**
  * The props of the Tree component.
@@ -169,7 +169,7 @@ export interface TreeContextValue extends Pick<Props, 'shouldNodeFocusBeInset' |
    * Get the details of the tree node.
    * @param id unique identifier of the tree node
    */
-  getNodeDetails: (id: TreeNodeId) => FlatTreeNode;
+  getNodeDetails: (id: TreeNodeId) => TreeNodeRecord;
   /**
    * Set the active node id in the tree.
    * @param id unique identifier of the tree node
@@ -179,5 +179,5 @@ export interface TreeContextValue extends Pick<Props, 'shouldNodeFocusBeInset' |
    * Toggle the isOpen state of the tree node.
    * @param id unique identifier of the tree node
    */
-  toggleTreeNode: (id: TreeNodeId) => void;
+  toggleTreeNode: ToggleTreeNode;
 }