[docs] Add expand all and select all to controlled tree demo (#21929)

mui · Jul 26, 2020 · 7070a79 · 7070a79
1 parent 5ca6c3e
commit 7070a79
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 56 deletions.
diff --git a/docs/src/pages/components/tree-view/ControlledTreeView.js b/docs/src/pages/components/tree-view/ControlledTreeView.js
@@ -1,17 +1,21 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import TreeView from '@material-ui/lab/TreeView';
+import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   root: {
-    height: 216,
+    height: 270,
     flexGrow: 1,
     maxWidth: 400,
   },
-});
+  actions: {
+    marginBottom: theme.spacing(1),
+  },
+}));
 
 export default function ControlledTreeView() {
   const classes = useStyles();
@@ -26,29 +30,53 @@ export default function ControlledTreeView() {
     setSelected(nodeIds);
   };
 
+  const handleExpandClick = () => {
+    setExpanded((oldExpanded) =>
+      oldExpanded.length === 0 ? ['1', '5', '6', '7'] : [],
+    );
+  };
+
+  const handleSelectClick = () => {
+    setSelected((oldSelected) =>
+      oldSelected.length === 0
+        ? ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+        : [],
+    );
+  };
+
   return (
-    <TreeView
-      className={classes.root}
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
-      expanded={expanded}
-      selected={selected}
-      onNodeToggle={handleToggle}
-      onNodeSelect={handleSelect}
-    >
-      <TreeItem nodeId="1" label="Applications">
-        <TreeItem nodeId="2" label="Calendar" />
-        <TreeItem nodeId="3" label="Chrome" />
-        <TreeItem nodeId="4" label="Webstorm" />
-      </TreeItem>
-      <TreeItem nodeId="5" label="Documents">
-        <TreeItem nodeId="6" label="Material-UI">
-          <TreeItem nodeId="7" label="src">
-            <TreeItem nodeId="8" label="index.js" />
-            <TreeItem nodeId="9" label="tree-view.js" />
+    <div className={classes.root}>
+      <div className={classes.actions}>
+        <Button onClick={handleExpandClick}>
+          {expanded.length === 0 ? 'Expand all' : 'Collapse all'}
+        </Button>
+        <Button onClick={handleSelectClick}>
+          {selected.length === 0 ? 'Select all' : 'Unselect all'}
+        </Button>
+      </div>
+      <TreeView
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        expanded={expanded}
+        selected={selected}
+        onNodeToggle={handleToggle}
+        onNodeSelect={handleSelect}
+        multiSelect
+      >
+        <TreeItem nodeId="1" label="Applications">
+          <TreeItem nodeId="2" label="Calendar" />
+          <TreeItem nodeId="3" label="Chrome" />
+          <TreeItem nodeId="4" label="Webstorm" />
+        </TreeItem>
+        <TreeItem nodeId="5" label="Documents">
+          <TreeItem nodeId="6" label="Material-UI">
+            <TreeItem nodeId="7" label="src">
+              <TreeItem nodeId="8" label="index.js" />
+              <TreeItem nodeId="9" label="tree-view.js" />
+            </TreeItem>
           </TreeItem>
         </TreeItem>
-      </TreeItem>
-    </TreeView>
+      </TreeView>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/tree-view/ControlledTreeView.tsx b/docs/src/pages/components/tree-view/ControlledTreeView.tsx
@@ -1,17 +1,23 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import TreeView from '@material-ui/lab/TreeView';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      height: 270,
+      flexGrow: 1,
+      maxWidth: 400,
+    },
+    actions: {
+      marginBottom: theme.spacing(1),
+    },
+  }),
+);
 
 export default function ControlledTreeView() {
   const classes = useStyles();
@@ -26,29 +32,53 @@ export default function ControlledTreeView() {
     setSelected(nodeIds);
   };
 
+  const handleExpandClick = () => {
+    setExpanded((oldExpanded) =>
+      oldExpanded.length === 0 ? ['1', '5', '6', '7'] : [],
+    );
+  };
+
+  const handleSelectClick = () => {
+    setSelected((oldSelected) =>
+      oldSelected.length === 0
+        ? ['1', '2', '3', '4', '5', '6', '7', '8', '9']
+        : [],
+    );
+  };
+
   return (
-    <TreeView
-      className={classes.root}
-      defaultCollapseIcon={<ExpandMoreIcon />}
-      defaultExpandIcon={<ChevronRightIcon />}
-      expanded={expanded}
-      selected={selected}
-      onNodeToggle={handleToggle}
-      onNodeSelect={handleSelect}
-    >
-      <TreeItem nodeId="1" label="Applications">
-        <TreeItem nodeId="2" label="Calendar" />
-        <TreeItem nodeId="3" label="Chrome" />
-        <TreeItem nodeId="4" label="Webstorm" />
-      </TreeItem>
-      <TreeItem nodeId="5" label="Documents">
-        <TreeItem nodeId="6" label="Material-UI">
-          <TreeItem nodeId="7" label="src">
-            <TreeItem nodeId="8" label="index.js" />
-            <TreeItem nodeId="9" label="tree-view.js" />
+    <div className={classes.root}>
+      <div className={classes.actions}>
+        <Button onClick={handleExpandClick}>
+          {expanded.length === 0 ? 'Expand all' : 'Collapse all'}
+        </Button>
+        <Button onClick={handleSelectClick}>
+          {selected.length === 0 ? 'Select all' : 'Unselect all'}
+        </Button>
+      </div>
+      <TreeView
+        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultExpandIcon={<ChevronRightIcon />}
+        expanded={expanded}
+        selected={selected}
+        onNodeToggle={handleToggle}
+        onNodeSelect={handleSelect}
+        multiSelect
+      >
+        <TreeItem nodeId="1" label="Applications">
+          <TreeItem nodeId="2" label="Calendar" />
+          <TreeItem nodeId="3" label="Chrome" />
+          <TreeItem nodeId="4" label="Webstorm" />
+        </TreeItem>
+        <TreeItem nodeId="5" label="Documents">
+          <TreeItem nodeId="6" label="Material-UI">
+            <TreeItem nodeId="7" label="src">
+              <TreeItem nodeId="8" label="index.js" />
+              <TreeItem nodeId="9" label="tree-view.js" />
+            </TreeItem>
           </TreeItem>
         </TreeItem>
-      </TreeItem>
-    </TreeView>
+      </TreeView>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/tree-view/tree-view.md b/docs/src/pages/components/tree-view/tree-view.md
@@ -19,7 +19,7 @@ Tree views also support multi selection.
 
 {{"demo": "pages/components/tree-view/MultiSelectTreeView.js"}}
 
-### Controlled tree view
+## Controlled tree view
 
 The tree view also offers a controlled API.