Skip to content

Commit

Permalink
[Drawer] Simplify examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@TommyJackson85 @oliviertassinari
TommyJackson85 authored and oliviertassinari committed Mar 15, 2020
1 parent f27c78f commit f8979fa
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 103 deletions.
48 changes: 13 additions & 35 deletions docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,41 +92,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)}
>
{sideList(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
}
48 changes: 13 additions & 35 deletions docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,41 +100,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 DrawerSide[]).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)}
>
{sideList(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
}
24 changes: 8 additions & 16 deletions docs/src/pages/components/drawers/TemporaryDrawer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,22 +92,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)}>
{sideList(anchor)}
</Drawer>
</React.Fragment>
))}
</div>
);
}
25 changes: 9 additions & 16 deletions docs/src/pages/components/drawers/TemporaryDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export default function TemporaryDrawer() {
});

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

const toggleDrawer = (side: DrawerSide, open: boolean) => (
event: React.KeyboardEvent | React.MouseEvent,
) => {
Expand Down Expand Up @@ -99,22 +100,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'] as DrawerSide[]).map(anchor => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
{sideList(anchor)}
</Drawer>
</React.Fragment>
))}
</div>
);
}
2 changes: 1 addition & 1 deletion docs/src/pages/components/drawers/drawers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ It closes when an item is selected, handled by controlling the `open` prop.

{{"demo": "pages/components/drawers/TemporaryDrawer.js"}}

## Swipeable Temporary drawer
### Swipeable

You can make the drawer swipeable with the `SwipeableDrawer` component.

Expand Down

0 comments on commit f8979fa

Please sign in to comment.