Skip to content

Commit

Permalink
[docs] Simplify drawer examples (mui#20040)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TommyJackson85 @EsoterikStare
TommyJackson85 authored and EsoterikStare committed Mar 30, 2020
1 parent 592f0b5 commit ad29df9
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 237 deletions.
90 changes: 22 additions & 68 deletions docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import Button from '@material-ui/core/Button';
Expand Down Expand Up @@ -28,47 +29,22 @@ export default function SwipeableTemporaryDrawer() {
right: false,
});

const toggleDrawer = (side, open) => event => {
const toggleDrawer = (anchor, open) => event => {
if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}

setState({ ...state, [side]: open });
setState({ ...state, [anchor]: open });
};

const sideList = side => (
const list = anchor => (
<div
className={classes.list}
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);

const fullList = side => (
<div
className={classes.fullList}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
Expand All @@ -92,41 +68,19 @@ export default function SwipeableTemporaryDrawer() {

return (
<div>
<Button onClick={toggleDrawer('left', true)}>Open Left</Button>
<Button onClick={toggleDrawer('right', true)}>Open Right</Button>
<Button onClick={toggleDrawer('top', true)}>Open Top</Button>
<Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
<SwipeableDrawer
open={state.left}
onClose={toggleDrawer('left', false)}
onOpen={toggleDrawer('left', true)}
>
{sideList('left')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}
onOpen={toggleDrawer('top', true)}
>
{fullList('top')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="bottom"
open={state.bottom}
onClose={toggleDrawer('bottom', false)}
onOpen={toggleDrawer('bottom', true)}
>
{fullList('bottom')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="right"
open={state.right}
onClose={toggleDrawer('right', false)}
onOpen={toggleDrawer('right', true)}
>
{sideList('right')}
</SwipeableDrawer>
{['left', 'right', 'top', 'bottom'].map(anchor => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
}
93 changes: 24 additions & 69 deletions docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import Button from '@material-ui/core/Button';
Expand All @@ -19,6 +20,8 @@ const useStyles = makeStyles({
},
});

type Anchor = 'top' | 'left' | 'bottom' | 'right';

export default function SwipeableTemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
Expand All @@ -28,8 +31,7 @@ export default function SwipeableTemporaryDrawer() {
right: false,
});

type DrawerSide = 'top' | 'left' | 'bottom' | 'right';
const toggleDrawer = (side: DrawerSide, open: boolean) => (
const toggleDrawer = (anchor: Anchor, open: boolean) => (
event: React.KeyboardEvent | React.MouseEvent,
) => {
if (
Expand All @@ -41,42 +43,17 @@ export default function SwipeableTemporaryDrawer() {
return;
}

setState({ ...state, [side]: open });
setState({ ...state, [anchor]: open });
};

const sideList = (side: DrawerSide) => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);

const fullList = (side: DrawerSide) => (
const list = (anchor: Anchor) => (
<div
className={classes.fullList}
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
Expand All @@ -100,41 +77,19 @@ export default function SwipeableTemporaryDrawer() {

return (
<div>
<Button onClick={toggleDrawer('left', true)}>Open Left</Button>
<Button onClick={toggleDrawer('right', true)}>Open Right</Button>
<Button onClick={toggleDrawer('top', true)}>Open Top</Button>
<Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
<SwipeableDrawer
open={state.left}
onClose={toggleDrawer('left', false)}
onOpen={toggleDrawer('left', true)}
>
{sideList('left')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}
onOpen={toggleDrawer('top', true)}
>
{fullList('top')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="bottom"
open={state.bottom}
onClose={toggleDrawer('bottom', false)}
onOpen={toggleDrawer('bottom', true)}
>
{fullList('bottom')}
</SwipeableDrawer>
<SwipeableDrawer
anchor="right"
open={state.right}
onClose={toggleDrawer('right', false)}
onOpen={toggleDrawer('right', true)}
>
{sideList('right')}
</SwipeableDrawer>
{(['left', 'right', 'top', 'bottom'] as Anchor[]).map(anchor => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
}
66 changes: 17 additions & 49 deletions docs/src/pages/components/drawers/TemporaryDrawer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
Expand Down Expand Up @@ -28,47 +29,22 @@ export default function TemporaryDrawer() {
right: false,
});

const toggleDrawer = (side, open) => event => {
const toggleDrawer = (anchor, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}

setState({ ...state, [side]: open });
setState({ ...state, [anchor]: open });
};

const sideList = side => (
const list = anchor => (
<div
className={classes.list}
className={clsx(classes.list, {
[classes.fullList]: anchor === 'top' || anchor === 'bottom',
})}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);

const fullList = side => (
<div
className={classes.fullList}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
Expand All @@ -92,22 +68,14 @@ export default function TemporaryDrawer() {

return (
<div>
<Button onClick={toggleDrawer('left', true)}>Open Left</Button>
<Button onClick={toggleDrawer('right', true)}>Open Right</Button>
<Button onClick={toggleDrawer('top', true)}>Open Top</Button>
<Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
<Drawer open={state.left} onClose={toggleDrawer('left', false)}>
{sideList('left')}
</Drawer>
<Drawer anchor="top" open={state.top} onClose={toggleDrawer('top', false)}>
{fullList('top')}
</Drawer>
<Drawer anchor="bottom" open={state.bottom} onClose={toggleDrawer('bottom', false)}>
{fullList('bottom')}
</Drawer>
<Drawer anchor="right" open={state.right} onClose={toggleDrawer('right', false)}>
{sideList('right')}
</Drawer>
{['left', 'right', 'top', 'bottom'].map(anchor => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
{list(anchor)}
</Drawer>
</React.Fragment>
))}
</div>
);
}
Loading

0 comments on commit ad29df9

Please sign in to comment.