fix(TreeView): Fix undefined error (#1519)

cengage · Oct 29, 2024 · 45be51c · 45be51c · github-actions · Oct 29, 2024
1 parent 77ec0c9
commit 45be51c
Show file tree

Hide file tree

Showing 9 changed files with 800 additions and 291 deletions.
diff --git a/.changeset/treeview-undefined.md b/.changeset/treeview-undefined.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(TreeView): Fix undefined problem
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.test.js b/packages/react-magma-dom/src/components/TreeView/TreeItem.test.js
@@ -94,7 +94,12 @@ describe('TreeItem', () => {
     it('the ability to expand the item is disabled', () => {
       const { getByTestId } = render(
         <TreeView>
-          <TreeItem label={labelText} itemId="parent" testId={testId} isDisabled>
+          <TreeItem
+            label={labelText}
+            itemId="parent"
+            testId={testId}
+            isDisabled
+          >
             <TreeItem
               label={`${labelText}-child`}
               testId={`${testId}-child`}

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx
@@ -209,8 +209,8 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
       props,
       forwardedRef
     );
-    
-    const { isDisabled} = contextValue;
+
+    const { isDisabled } = contextValue;
 
     const {
       checkboxChangeHandler,
@@ -398,7 +398,9 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
                     })}
                   </ul>
                 </Transition>
-              ) : child;
+              ) : (
+                child
+              );
             }
           )}
         </StyledTreeItem>

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.stories.tsx
@@ -98,20 +98,42 @@ function createTags(items: TreeItemSelectedInterface[]) {
   };
 }
 
-
-function createControlledTags(items: TreeItemSelectedInterface[] = [], api?: TreeViewApi) {
+function createControlledTags(
+  items: TreeItemSelectedInterface[] = [],
+  api?: TreeViewApi
+) {
   const selected = items
     ?.filter(i => i.checkedStatus === IndeterminateCheckboxStatus.checked)
     .map((i, key) => (
-      <Tag key={key} size={TagSize.small} color={TagColor.primary} onDelete={() => api?.selectItem({ itemId: i.itemId, checkedStatus: IndeterminateCheckboxStatus.unchecked })}>
+      <Tag
+        key={key}
+        size={TagSize.small}
+        color={TagColor.primary}
+        onDelete={() =>
+          api?.selectItem({
+            itemId: i.itemId,
+            checkedStatus: IndeterminateCheckboxStatus.unchecked,
+          })
+        }
+      >
         {i.itemId}
       </Tag>
     ));
 
   const indeterminate = items
     ?.filter(i => i.checkedStatus === IndeterminateCheckboxStatus.indeterminate)
     .map((i, key) => (
-      <Tag key={key} size={TagSize.small} color={TagColor.default} onDelete={() => api?.selectItem({ itemId: i.itemId, checkedStatus: IndeterminateCheckboxStatus.unchecked })}>
+      <Tag
+        key={key}
+        size={TagSize.small}
+        color={TagColor.default}
+        onDelete={() =>
+          api?.selectItem({
+            itemId: i.itemId,
+            checkedStatus: IndeterminateCheckboxStatus.unchecked,
+          })
+        }
+      >
         {i.itemId}
       </Tag>
     ));
@@ -123,8 +145,12 @@ function createControlledTags(items: TreeItemSelectedInterface[] = [], api?: Tre
 }
 
 export const Simple = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
   const [total, setTotal] = React.useState(selectedItems?.length || 0);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
@@ -172,17 +198,25 @@ export const Simple = (args: Partial<TreeViewProps>) => {
 Simple.parameters = { controls: { exclude: ['isInverse'] } };
 
 export const Complex = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<TreeItemSelectedInterface[]>();
+  const [selectedItems, setSelectedItems] =
+    React.useState<TreeItemSelectedInterface[]>();
 
   const apiRef = React.useRef<TreeViewApi>();
 
-  const { selected, indeterminate } = createControlledTags(selectedItems, apiRef?.current);
+  const { selected, indeterminate } = createControlledTags(
+    selectedItems,
+    apiRef?.current
+  );
   const total = selectedItems?.length || 0;
 
   return (
     <>
       <Card isInverse={args.isInverse}>
-        <TreeView {...args} apiRef={apiRef} onSelectedItemChange={setSelectedItems}>
+        <TreeView
+          {...args}
+          apiRef={apiRef}
+          onSelectedItemChange={setSelectedItems}
+        >
           <TreeItem label={<>Part 1: Introduction</>} itemId="pt1" testId="pt1">
             <TreeItem
               icon={<FolderIcon aria-hidden={true} />}
@@ -417,7 +451,10 @@ Complex.args = {
     { itemId: 'pt1ch1', checkedStatus: IndeterminateCheckboxStatus.checked },
     { itemId: 'pt1', checkedStatus: IndeterminateCheckboxStatus.indeterminate },
     { itemId: 'pt2ch4', checkedStatus: IndeterminateCheckboxStatus.checked },
-    { itemId: 'pt2ch5.1.1', checkedStatus: IndeterminateCheckboxStatus.checked },
+    {
+      itemId: 'pt2ch5.1.1',
+      checkedStatus: IndeterminateCheckboxStatus.checked,
+    },
     {
       itemId: 'pt2ch5.1.2',
       checkedStatus: IndeterminateCheckboxStatus.unchecked,
@@ -433,8 +470,12 @@ Complex.args = {
 };
 
 export const NoIcons = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
     const selected = createTags(items).selected;
@@ -504,8 +545,12 @@ NoIcons.args = {
 };
 
 export const Textbook = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
   const [total, setTotal] = React.useState(selectedItems?.length || 0);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
@@ -603,8 +648,12 @@ Textbook.args = {
 };
 
 export const DefaultIcon = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
     const selected = createTags(items).selected;
@@ -665,8 +714,12 @@ export const DefaultIcon = (args: Partial<TreeViewProps>) => {
 DefaultIcon.parameters = { controls: { exclude: ['isInverse'] } };
 
 export const FirstItemLeaf = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
     const selected = createTags(items).selected;
@@ -723,8 +776,12 @@ FirstItemLeaf.args = {
 FirstItemLeaf.parameters = { controls: { exclude: ['isInverse'] } };
 
 export const FirstItemBranch = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
   const [total, setTotal] = React.useState(selectedItems?.length || 0);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
@@ -854,9 +911,15 @@ FlatTree.args = {
 
 FlatTree.parameters = { controls: { exclude: ['isInverse'] } };
 
-export const ParentsAndChildrenNotAutoChecked = (args: Partial<TreeViewProps>) => {
-  const [selectedItems, setSelectedItems] = React.useState<React.ReactNode[] | null>(null);
-  const [indeterminateItems, setIndeterminateItems] = React.useState<React.ReactNode[] | null>(null);
+export const ParentsAndChildrenNotAutoChecked = (
+  args: Partial<TreeViewProps>
+) => {
+  const [selectedItems, setSelectedItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
+  const [indeterminateItems, setIndeterminateItems] = React.useState<
+    React.ReactNode[] | null
+  >(null);
 
   function onSelection(items: TreeItemSelectedInterface[]) {
     const selected = createTags(items).selected;

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeView.tsx b/packages/react-magma-dom/src/components/TreeView/TreeView.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  UseTreeViewProps,
-  useTreeView,
-} from './useTreeView';
+import { UseTreeViewProps, useTreeView } from './useTreeView';
 import { TreeViewSelectable } from './types';
 import { TreeItem } from './TreeItem';
 import { ThemeContext } from '../../theme/ThemeContext';

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeViewContext.ts b/packages/react-magma-dom/src/components/TreeView/TreeViewContext.ts
@@ -13,8 +13,8 @@ export interface TreeViewItemInterface {
   parentId?: string | null;
   icon?: React.ReactNode;
   checkedStatus: IndeterminateCheckboxStatus;
-  hasOwnTreeItems: boolean
-  isDisabled?: boolean
+  hasOwnTreeItems: boolean;
+  isDisabled?: boolean;
 }
 
 export interface TreeViewContextInterface {
@@ -38,7 +38,9 @@ export interface TreeViewContextInterface {
   checkParents: boolean;
   checkChildren: boolean;
   items: TreeViewItemInterface[];
-  selectItem: (data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>) => void
+  selectItem: (
+    data: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>
+  ) => void;
 }
 
 export const TreeViewContext = React.createContext<TreeViewContextInterface>({
@@ -52,5 +54,5 @@ export const TreeViewContext = React.createContext<TreeViewContextInterface>({
   checkParents: true,
   checkChildren: true,
   items: [],
-  selectItem: () => undefined
+  selectItem: () => undefined,
 });