From 3c0260bc5a6bd3569b13177a1d36320695c4f614 Mon Sep 17 00:00:00 2001 From: zanivan Date: Wed, 7 Feb 2024 09:55:37 -0300 Subject: [PATCH 1/6] Add simpler demo --- .../drawers/AnchorTemporaryDrawer.js | 81 +++++++++++++++++ .../drawers/AnchorTemporaryDrawer.tsx | 89 +++++++++++++++++++ .../drawers/AnchorTemporaryDrawer.tsx.preview | 12 +++ .../components/drawers/TemporaryDrawer.js | 42 +++------ .../components/drawers/TemporaryDrawer.tsx | 52 +++-------- .../drawers/TemporaryDrawer.tsx.preview | 18 ++-- .../material/components/drawers/drawers.md | 6 ++ 7 files changed, 217 insertions(+), 83 deletions(-) create mode 100644 docs/data/material/components/drawers/AnchorTemporaryDrawer.js create mode 100644 docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx create mode 100644 docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js b/docs/data/material/components/drawers/AnchorTemporaryDrawer.js new file mode 100644 index 00000000000000..0c539ab6419e93 --- /dev/null +++ b/docs/data/material/components/drawers/AnchorTemporaryDrawer.js @@ -0,0 +1,81 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Drawer from '@mui/material/Drawer'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import Divider from '@mui/material/Divider'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import InboxIcon from '@mui/icons-material/MoveToInbox'; +import MailIcon from '@mui/icons-material/Mail'; + +export default function AnchorTemporaryDrawer() { + const [state, setState] = React.useState({ + top: false, + left: false, + bottom: false, + right: false, + }); + + const toggleDrawer = (anchor, open) => (event) => { + if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { + return; + } + + setState({ ...state, [anchor]: open }); + }; + + const list = (anchor) => ( + + + {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( + + + + {index % 2 === 0 ? : } + + + + + ))} + + + + {['All mail', 'Trash', 'Spam'].map((text, index) => ( + + + + {index % 2 === 0 ? : } + + + + + ))} + + + ); + + return ( +
+ {['left', 'right', 'top', 'bottom'].map((anchor) => ( + + + + {list(anchor)} + + + ))} +
+ ); +} diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx new file mode 100644 index 00000000000000..a6f333aa9edc4d --- /dev/null +++ b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Drawer from '@mui/material/Drawer'; +import Button from '@mui/material/Button'; +import List from '@mui/material/List'; +import Divider from '@mui/material/Divider'; +import ListItem from '@mui/material/ListItem'; +import ListItemButton from '@mui/material/ListItemButton'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import InboxIcon from '@mui/icons-material/MoveToInbox'; +import MailIcon from '@mui/icons-material/Mail'; + +type Anchor = 'top' | 'left' | 'bottom' | 'right'; + +export default function AnchorTemporaryDrawer() { + const [state, setState] = React.useState({ + top: false, + left: false, + bottom: false, + right: false, + }); + + const toggleDrawer = + (anchor: Anchor, open: boolean) => + (event: React.KeyboardEvent | React.MouseEvent) => { + if ( + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } + + setState({ ...state, [anchor]: open }); + }; + + const list = (anchor: Anchor) => ( + + + {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( + + + + {index % 2 === 0 ? : } + + + + + ))} + + + + {['All mail', 'Trash', 'Spam'].map((text, index) => ( + + + + {index % 2 === 0 ? : } + + + + + ))} + + + ); + + return ( +
+ {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( + + + + {list(anchor)} + + + ))} +
+ ); +} diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview new file mode 100644 index 00000000000000..245f5229aeddb8 --- /dev/null +++ b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview @@ -0,0 +1,12 @@ +{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( + + + + {list(anchor)} + + +))} \ No newline at end of file diff --git a/docs/data/material/components/drawers/TemporaryDrawer.js b/docs/data/material/components/drawers/TemporaryDrawer.js index 7ae148fd43c534..0ac796fc28a333 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.js +++ b/docs/data/material/components/drawers/TemporaryDrawer.js @@ -12,28 +12,14 @@ import InboxIcon from '@mui/icons-material/MoveToInbox'; import MailIcon from '@mui/icons-material/Mail'; export default function TemporaryDrawer() { - const [state, setState] = React.useState({ - top: false, - left: false, - bottom: false, - right: false, - }); + const [open, setOpen] = React.useState(false); - const toggleDrawer = (anchor, open) => (event) => { - if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { - return; - } - - setState({ ...state, [anchor]: open }); + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); }; - const list = (anchor) => ( - + const DrawerList = ( + {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( @@ -64,18 +50,12 @@ export default function TemporaryDrawer() { return (
- {['left', 'right', 'top', 'bottom'].map((anchor) => ( - - - - {list(anchor)} - - - ))} + + + + {DrawerList} + +
); } diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx b/docs/data/material/components/drawers/TemporaryDrawer.tsx index 6453a0bd62dc50..28d8cb91ca0c97 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx +++ b/docs/data/material/components/drawers/TemporaryDrawer.tsx @@ -11,37 +11,15 @@ import ListItemText from '@mui/material/ListItemText'; import InboxIcon from '@mui/icons-material/MoveToInbox'; import MailIcon from '@mui/icons-material/Mail'; -type Anchor = 'top' | 'left' | 'bottom' | 'right'; - export default function TemporaryDrawer() { - const [state, setState] = React.useState({ - top: false, - left: false, - bottom: false, - right: false, - }); - - const toggleDrawer = - (anchor: Anchor, open: boolean) => - (event: React.KeyboardEvent | React.MouseEvent) => { - if ( - event.type === 'keydown' && - ((event as React.KeyboardEvent).key === 'Tab' || - (event as React.KeyboardEvent).key === 'Shift') - ) { - return; - } + const [open, setOpen] = React.useState(false); - setState({ ...state, [anchor]: open }); - }; + const toggleDrawer = (newOpen: boolean) => () => { + setOpen(newOpen); + }; - const list = (anchor: Anchor) => ( - + const DrawerList = ( + {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( @@ -72,18 +50,12 @@ export default function TemporaryDrawer() { return (
- {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( - - - - {list(anchor)} - - - ))} + + + + {DrawerList} + +
); } diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview index 245f5229aeddb8..c6aa191404dcba 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview +++ b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview @@ -1,12 +1,6 @@ -{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( - - - - {list(anchor)} - - -))} \ No newline at end of file + + + + {DrawerList} + + \ No newline at end of file diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index 8b386e0cb2516e..eb9b26e82832a3 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -25,6 +25,12 @@ It closes when an item is selected, handled by controlling the `open` prop. {{"demo": "TemporaryDrawer.js"}} +### Anchor + +You can use the `anchor` prop to specify which side of the screen the Drawer should originate from. The default value is `left`. + +{{"demo": "AnchorTemporaryDrawer.js"}} + ### Swipeable You can make the drawer swipeable with the `SwipeableDrawer` component. From 67083399d3018988449a4e00d49965d7939cce2b Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 9 Feb 2024 09:20:02 -0300 Subject: [PATCH 2/6] Fix lint --- .../material/components/drawers/TemporaryDrawer.js | 10 ++++------ .../material/components/drawers/TemporaryDrawer.tsx | 10 ++++------ .../components/drawers/TemporaryDrawer.tsx.preview | 10 ++++------ 3 files changed, 12 insertions(+), 18 deletions(-) diff --git a/docs/data/material/components/drawers/TemporaryDrawer.js b/docs/data/material/components/drawers/TemporaryDrawer.js index 0ac796fc28a333..55cc4b06d2d935 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.js +++ b/docs/data/material/components/drawers/TemporaryDrawer.js @@ -50,12 +50,10 @@ export default function TemporaryDrawer() { return (
- - - - {DrawerList} - - + + + {DrawerList} +
); } diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx b/docs/data/material/components/drawers/TemporaryDrawer.tsx index 28d8cb91ca0c97..65bf707c0a93e7 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx +++ b/docs/data/material/components/drawers/TemporaryDrawer.tsx @@ -50,12 +50,10 @@ export default function TemporaryDrawer() { return (
- - - - {DrawerList} - - + + + {DrawerList} +
); } diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview index c6aa191404dcba..9a79963627fa1d 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview +++ b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview @@ -1,6 +1,4 @@ - - - - {DrawerList} - - \ No newline at end of file + + + {DrawerList} + \ No newline at end of file From 320e7fc48a5f5c4e5ca37d3cdc45786f915dca4d Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Fri, 9 Feb 2024 10:20:06 -0300 Subject: [PATCH 3/6] Danilo's tweak to copy Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Victor Zanivan Monteiro --- docs/data/material/components/drawers/drawers.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index eb9b26e82832a3..1c358c8519a9eb 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -27,7 +27,8 @@ It closes when an item is selected, handled by controlling the `open` prop. ### Anchor -You can use the `anchor` prop to specify which side of the screen the Drawer should originate from. The default value is `left`. +Use the `anchor` prop to specify which side of the screen the Drawer should originate from. +The default value is `left`. {{"demo": "AnchorTemporaryDrawer.js"}} From 2a1b6858792ebcce6e5eb37cb26b6e9e97b715b7 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 13 Feb 2024 10:56:08 -0300 Subject: [PATCH 4/6] Fix markdown lint --- docs/data/material/components/drawers/drawers.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index 1c358c8519a9eb..0a1dd44a5583e0 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -27,8 +27,7 @@ It closes when an item is selected, handled by controlling the `open` prop. ### Anchor -Use the `anchor` prop to specify which side of the screen the Drawer should originate from. -The default value is `left`. +Use the `anchor` prop to specify which side of the screen the Drawer should originate from. The default value is `left`. {{"demo": "AnchorTemporaryDrawer.js"}} From 425b883d27bbd21aef8bc99ff467176ac2a9c1f9 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 13 Feb 2024 11:03:40 -0300 Subject: [PATCH 5/6] Add blank line --- docs/data/material/components/drawers/drawers.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index 0a1dd44a5583e0..8bd8e8048dce8e 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -27,7 +27,9 @@ It closes when an item is selected, handled by controlling the `open` prop. ### Anchor -Use the `anchor` prop to specify which side of the screen the Drawer should originate from. The default value is `left`. +Use the `anchor` prop to specify which side of the screen the Drawer should originate from. + +The default value is `left`. {{"demo": "AnchorTemporaryDrawer.js"}} From 0b2f1e3a4b39e93ec1c9140ad7656a121a25f817 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 13 Feb 2024 14:53:39 -0300 Subject: [PATCH 6/6] =?UTF-8?q?=E2=80=9CEmpty-Commit=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit