[docs] Add Nested List and Switch List Secondary TypeScript demos (#1…

…5493) * [List] Add Nested List TypeScript Demo * [List] Add Switch List Secondary TypeScript Demo
mui · Apr 26, 2019 · 5950587 · 5950587
1 parent a97c70f
commit 5950587
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 0 deletions.
diff --git a/docs/src/pages/demos/lists/NestedList.tsx b/docs/src/pages/demos/lists/NestedList.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Collapse from '@material-ui/core/Collapse';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import StarBorder from '@material-ui/icons/StarBorder';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+}));
+
+function NestedList() {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(true);
+
+  function handleClick() {
+    setOpen(!open);
+  }
+
+  return (
+    <List
+      component="nav"
+      subheader={<ListSubheader component="div">Nested List Items</ListSubheader>}
+      className={classes.root}
+    >
+      <ListItem button>
+        <ListItemIcon>
+          <SendIcon />
+        </ListItemIcon>
+        <ListItemText primary="Sent mail" />
+      </ListItem>
+      <ListItem button>
+        <ListItemIcon>
+          <DraftsIcon />
+        </ListItemIcon>
+        <ListItemText primary="Drafts" />
+      </ListItem>
+      <ListItem button onClick={handleClick}>
+        <ListItemIcon>
+          <InboxIcon />
+        </ListItemIcon>
+        <ListItemText primary="Inbox" />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          <ListItem button className={classes.nested}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText primary="Starred" />
+          </ListItem>
+        </List>
+      </Collapse>
+    </List>
+  );
+}
+
+export default NestedList;
diff --git a/docs/src/pages/demos/lists/SwitchListSecondary.tsx b/docs/src/pages/demos/lists/SwitchListSecondary.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Switch from '@material-ui/core/Switch';
+import WifiIcon from '@material-ui/icons/Wifi';
+import BluetoothIcon from '@material-ui/icons/Bluetooth';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    width: '100%',
+    maxWidth: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+function SwitchListSecondary() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(['wifi']);
+
+  const handleToggle = (value: string) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    setChecked(newChecked);
+  };
+
+  return (
+    <List subheader={<ListSubheader>Settings</ListSubheader>} className={classes.root}>
+      <ListItem>
+        <ListItemIcon>
+          <WifiIcon />
+        </ListItemIcon>
+        <ListItemText primary="Wi-Fi" />
+        <ListItemSecondaryAction>
+          <Switch
+            edge="end"
+            onChange={handleToggle('wifi')}
+            checked={checked.indexOf('wifi') !== -1}
+          />
+        </ListItemSecondaryAction>
+      </ListItem>
+      <ListItem>
+        <ListItemIcon>
+          <BluetoothIcon />
+        </ListItemIcon>
+        <ListItemText primary="Bluetooth" />
+        <ListItemSecondaryAction>
+          <Switch
+            edge="end"
+            onChange={handleToggle('bluetooth')}
+            checked={checked.indexOf('bluetooth') !== -1}
+          />
+        </ListItemSecondaryAction>
+      </ListItem>
+    </List>
+  );
+}
+
+export default SwitchListSecondary;