From 0a6b1f18585e7d557d5312cd0f87964e3b370da5 Mon Sep 17 00:00:00 2001 From: joshwooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 26 Jul 2020 17:51:10 +0100 Subject: [PATCH] Add disabled tree item demo --- .../components/tree-view/DisabledTreeItems.js | 68 ++++++++++++++++++ .../tree-view/DisabledTreeItems.tsx | 70 +++++++++++++++++++ .../tree-view/FileSystemNavigator.tsx | 18 ++--- .../tree-view/MultiSelectTreeView.tsx | 18 ++--- .../tree-view/RecursiveTreeView.tsx | 18 ++--- .../pages/components/tree-view/tree-view.md | 24 +++++++ 6 files changed, 192 insertions(+), 24 deletions(-) create mode 100644 docs/src/pages/components/tree-view/DisabledTreeItems.js create mode 100644 docs/src/pages/components/tree-view/DisabledTreeItems.tsx diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.js b/docs/src/pages/components/tree-view/DisabledTreeItems.js new file mode 100644 index 00000000000000..12913f02632a19 --- /dev/null +++ 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 ( +
+
+ + } + label="Focus disabled items" + /> +
+ } + defaultExpandIcon={} + disabledItemsFocusable={focusDisabledItems} + multiSelect + > + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.tsx b/docs/src/pages/components/tree-view/DisabledTreeItems.tsx new file mode 100644 index 00000000000000..efe34154a2fff5 --- /dev/null +++ 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) => { + setFocusDisabledItems(event.target.checked); + }; + + return ( +
+
+ + } + label="Focus disabled items" + /> +
+ } + defaultExpandIcon={} + disabledItemsFocusable={focusDisabledItems} + multiSelect + > + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/docs/src/pages/components/tree-view/FileSystemNavigator.tsx b/docs/src/pages/components/tree-view/FileSystemNavigator.tsx index ea87bcf3197333..b200b0f09cd5c8 100644 --- 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 index 5b539bbed6b111..82ac09faf8d163 100644 --- 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 index 95a603ca4222f7..b39596ef61328c 100644 --- 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 index 9cef36e635cdae..d99f7c0efdfbc7 100644 --- 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)