Add disabled tree item demo

mui · Jul 27, 2020 · 0a6b1f1 · 0a6b1f1
1 parent ebca368
commit 0a6b1f1
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 24 deletions.
diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.js b/docs/src/pages/components/tree-view/DisabledTreeItems.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: 270,
+    flexGrow: 1,
+    maxWidth: 400,
+  },
+  actions: {
+    marginBottom: theme.spacing(1),
+  }
+}));
+
+export default function FileSystemNavigator() {
+  const classes = useStyles();
+  const [focusDisabledItems, setFocusDisabledItems] = React.useState(false);
+  const handleToggle = (event) => {
+    setFocusDisabledItems(event.target.checked);
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.actions}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={focusDisabledItems}
+              onChange={handleToggle}
+              name="focusDisabledItems"
+            />
+          }
+          label="Focus disabled items"
+        />
+      </div>
+    <TreeView
+      defaultCollapseIcon={<ExpandMoreIcon />}
+      defaultExpandIcon={<ChevronRightIcon />}
+      disabledItemsFocusable={focusDisabledItems}
+      multiSelect
+    >
+      <TreeItem nodeId="1" label="One">
+        <TreeItem nodeId="2" label="Two" />
+        <TreeItem nodeId="3" label="Three" />
+        <TreeItem nodeId="4" label="Four" />
+      </TreeItem>
+      <TreeItem nodeId="5" label="Five" disabled>
+        <TreeItem nodeId="6" label="Six" />
+      </TreeItem>
+      <TreeItem nodeId="7" label="Seven">
+        <TreeItem nodeId="8" label="Eight" />
+        <TreeItem nodeId="9" label="Nine">
+          <TreeItem nodeId="10" label="Ten">
+            <TreeItem nodeId="11" label="Eleven" />
+            <TreeItem nodeId="12" label="Twelve" />
+          </TreeItem>
+        </TreeItem>
+      </TreeItem>
+    </TreeView>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.tsx b/docs/src/pages/components/tree-view/DisabledTreeItems.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import TreeView from '@material-ui/lab/TreeView';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeItem from '@material-ui/lab/TreeItem';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      height: 270,
+      flexGrow: 1,
+      maxWidth: 400,
+    },
+    actions: {
+      marginBottom: theme.spacing(1),
+    },
+  }),
+);
+
+export default function FileSystemNavigator() {
+  const classes = useStyles();
+  const [focusDisabledItems, setFocusDisabledItems] = React.useState(false);
+  const handleToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFocusDisabledItems(event.target.checked);
+  };
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.actions}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={focusDisabledItems}
+              onChange={handleToggle}
+              name="focusDisabledItems"
+            />
+          }
+          label="Focus disabled items"
+        />
+      </div>
+      <TreeView
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        disabledItemsFocusable={focusDisabledItems}
+        multiSelect
+      >
+        <TreeItem nodeId="1" label="One">
+          <TreeItem nodeId="2" label="Two" />
+          <TreeItem nodeId="3" label="Three" />
+          <TreeItem nodeId="4" label="Four" />
+        </TreeItem>
+        <TreeItem nodeId="5" label="Five" disabled>
+          <TreeItem nodeId="6" label="Six" />
+        </TreeItem>
+        <TreeItem nodeId="7" label="Seven">
+          <TreeItem nodeId="8" label="Eight" />
+          <TreeItem nodeId="9" label="Nine">
+            <TreeItem nodeId="10" label="Ten">
+              <TreeItem nodeId="11" label="Eleven" />
+              <TreeItem nodeId="12" label="Twelve" />
+            </TreeItem>
+          </TreeItem>
+        </TreeItem>
+      </TreeView>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/tree-view/FileSystemNavigator.tsx b/docs/src/pages/components/tree-view/FileSystemNavigator.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      height: 240,
+      flexGrow: 1,
+      maxWidth: 400,
+    },
+  }),
+);
 
 export default function FileSystemNavigator() {
   const classes = useStyles();

diff --git a/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx b/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      height: 216,
+      flexGrow: 1,
+      maxWidth: 400,
+    },
+  }),
+);
 
 export default function MultiSelectTreeView() {
   const classes = useStyles();

diff --git a/docs/src/pages/components/tree-view/RecursiveTreeView.tsx b/docs/src/pages/components/tree-view/RecursiveTreeView.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -32,13 +32,15 @@ const data: RenderTree = {
   ],
 };
 
-const useStyles = makeStyles({
-  root: {
-    height: 110,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      height: 110,
+      flexGrow: 1,
+      maxWidth: 400,
+    },
+  }),
+);
 
 export default function RecursiveTreeView() {
   const classes = useStyles();

diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
@@ -57,6 +57,30 @@ const data = {
 
 {{"demo": "pages/components/tree-view/GmailTreeView.js"}}
 
+## Disabled tree items
+
+{{"demo": "pages/components/tree-view/DisabledTreeItems.js"}}
+
+The behaviour of disabled tree items depends on the `disabledItemsFocusable` prop. 
+
+If it is false:
+
+- Mouse clicks will not focus disabled items.
+- Arrow keys will focus disabled items and, the next non-disabled item will be focused.
+- Typing the first character of a disabled item's label will not focus the item.
+- Mouse or keyboard interaction will not expand/collapse disabled items.
+- Mouse or keyboard interaction will not select disabled items.
+- Shift + arrow keys will skip disabled items and, the next non-disabled item will be selected.
+
+If it is true:
+
+- Mouse clicks will not focus disabled items.
+- Arrow keys will focus disabled items.
+- Typing the first character of a disabled item's label will focus the item.
+- Mouse or keyboard interaction will not expand/collapse disabled items.
+- Mouse or keyboard interaction will not select disabled items.
+- Shift + arrow keys will not skip disabled items but, the disabled item will not be selected.
+
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#TreeView)