feat(treeview): add support for isDisabled (#1480)

cengage · Oct 11, 2024 · 1caced4 · 1caced4 · github-actions · Oct 11, 2024
1 parent b21f4a7
commit 1caced4
Show file tree

Hide file tree

Showing 10 changed files with 641 additions and 116 deletions.
diff --git a/.changeset/feat-treeview-add-support-for-isdisabled.md b/.changeset/feat-treeview-add-support-for-isdisabled.md
@@ -0,0 +1,5 @@
+---
+'react-magma-dom': minor
+---
+
+feat(TreeView): Add support for isDisabled
diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.test.js b/packages/react-magma-dom/src/components/TreeView/TreeItem.test.js
@@ -75,12 +75,14 @@ describe('TreeItem', () => {
   describe('isDisabled', () => {
     it('the label is disabled', () => {
       const { getByTestId } = render(
-        <TreeItem
-          label={labelText}
-          testId={testId}
-          itemId={itemId}
-          isDisabled
-        />
+        <TreeView>
+          <TreeItem
+            label={labelText}
+            testId={testId}
+            itemId={itemId}
+            isDisabled
+          />
+        </TreeView>
       );
 
       expect(getByTestId(`${testId}-label`)).toHaveStyleRule(

diff --git a/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx b/packages/react-magma-dom/src/components/TreeView/TreeItem.tsx
@@ -192,7 +192,6 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
       children,
       icon,
       index,
-      isDisabled,
       label,
       labelStyle,
       style,
@@ -210,6 +209,8 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
       props,
       forwardedRef
     );
+
+    const { isDisabled} = contextValue;
 
     const {
       checkboxChangeHandler,
@@ -253,7 +254,12 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
         id={`${itemId}-label`}
         data-testid={`${testId || itemId}-label`}
         onClick={(e: any) => {
-          if (selectable === TreeViewSelectable.single && !isDisabled) {
+          if (isDisabled) {
+            e.stopPropagation();
+            return;
+          }
+
+          if (selectable === TreeViewSelectable.single) {
             handleClick(e, itemId);
           }
         }}
@@ -297,6 +303,14 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
         onExpandedChange(event);
     };
 
+    const tabIndex = React.useMemo(() => {
+      if (isDisabled) {
+        return undefined;
+      }
+
+      return itemToFocus === itemId ? 0 : -1;
+    }, [isDisabled, itemToFocus, itemId]);
+
     return (
       <TreeItemContext.Provider value={contextValue}>
         <StyledTreeItem
@@ -315,7 +329,7 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
           selectableType={selectable}
           selected={selectedItem}
           theme={theme}
-          tabIndex={itemToFocus === itemId ? 0 : -1}
+          tabIndex={tabIndex}
           onKeyDown={handleKeyDown}
           onClick={event => {
             if (selectable===TreeViewSelectable.off && hasOwnTreeItems) {
@@ -378,25 +392,18 @@ export const TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(
           {React.Children.map(
             children,
             (child: React.ReactElement<any>, index) => {
-              const component =
-                child.type === TreeItem ? (
-                  <Transition isOpen={expanded} collapse unmountOnExit>
-                    <ul role="group">
-                      {React.cloneElement(child, {
-                        index,
-                        key: index,
-                        itemDepth,
-                        parentDepth,
-                      })}
-                    </ul>
-                  </Transition>
-                ) : (
-                  child
-                );
-              // hide the disabled item + the children
-              if (isDisabled) return <></>;
-
-              return component;
+              return child.type === TreeItem ? (
+                <Transition isOpen={expanded} collapse unmountOnExit>
+                  <ul role="group">
+                    {React.cloneElement(child, {
+                      index,
+                      key: index,
+                      itemDepth,
+                      parentDepth,
+                    })}
+                  </ul>
+                </Transition>
+              ) : 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
@@ -277,6 +277,7 @@ export const Complex = args => {
                   </>
                 }
                 itemId="pt2ch5.1"
+                isDisabled
               >
                 <TreeItem
                   icon={<ArticleIcon aria-hidden={true} />}
@@ -287,6 +288,7 @@ export const Complex = args => {
                     </>
                   }
                   itemId="pt2ch5.1.1"
+                  isDisabled
                 />
                 <TreeItem
                   icon={<ArticleIcon aria-hidden={true} />}
@@ -413,15 +415,18 @@ 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,
+      isDisabled: true,
     },
     { itemId: 'pt2ch5.2', checkedStatus: IndeterminateCheckboxStatus.checked },
     { itemId: 'pt2ch5.3', checkedStatus: IndeterminateCheckboxStatus.checked },
   ],
   checkParents: true,
   checkChildren: true,
+  isDisabled: false,
   testId: 'complex-example',
 };