feat(TreeView):disabled-prop

mui · Jul 25, 2020 · 35af73f · 35af73f
1 parent 49671ab
commit 35af73f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts
@@ -13,6 +13,10 @@ export interface TreeItemProps
    * The icon used to collapse the node.
    */
   collapseIcon?: React.ReactNode;
+  /**
+   * If `true`, the node will be disabled.
+   */
+  disabled?: boolean;
   /**
    * The icon displayed next to a end node.
    */
@@ -62,6 +66,7 @@ export type TreeItemClassKey =
   | 'expanded'
   | 'selected'
   | 'focused'
+  | 'disabled'
   | 'group'
   | 'content'
   | 'iconContainer'

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -59,13 +59,20 @@ export const styles = (theme) => ({
         ),
       },
     },
+    '&$disabled, &$disabled:hover, &$disabled$focused': {
+      color: theme.palette.action.disabled,
+      opacity: theme.palette.action.disabledOpacity,
+      backgroundColor: 'transparent',
+    },
   },
   /* Pseudo-class applied to the content element when expanded. */
   expanded: {},
   /* Pseudo-class applied to the content element when selected. */
   selected: {},
   /* Pseudo-class applied to the content element when focused. */
   focused: {},
+  /* Styles applied to the element when disabled */
+  disabled: {},
   /* Styles applied to the tree node icon and collapse/expand icon. */
   iconContainer: {
     marginRight: 4,
@@ -93,6 +100,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     collapseIcon,
     endIcon,
     expandIcon,
+    disabled,
     icon: iconProp,
     id: idProp,
     label,
@@ -295,6 +303,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
           [classes.expanded]: expanded,
           [classes.selected]: selected,
           [classes.focused]: focused,
+          [classes.disabled]: disabled,
         })}
         onClick={handleClick}
         onMouseDown={handleMouseDown}
@@ -349,6 +358,10 @@ TreeItem.propTypes = {
    * The icon used to collapse the node.
    */
   collapseIcon: PropTypes.node,
+  /**
+   * If `true`, the node will be disabled.
+   */
+  disabled: PropTypes.bool,
   /**
    * The icon displayed next to a end node.
    */

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js
@@ -1434,6 +1434,19 @@ describe('<TreeItem />', () => {
     });
   });
 
+  describe('prop: deleted', () => {
+    it('should disable treeItem', () => {
+      const { getByTestId } = render(
+        <TreeView multiSelect>
+          <TreeItem nodeId="one" label="one" disabled data-testid="one" />
+          <TreeItem nodeId="two" label="two" data-testid="two" />
+        </TreeView>,
+      );
+
+      expect(getByTestId('one')).to.have.class(classes.disabled);
+    });
+  });
+
   it('should be able to type in an child input', () => {
     const { getByRole } = render(
       <TreeView defaultExpanded={['one']}>