update drawer playground

mui · Sep 21, 2023 · bf13669 · bf13669
1 parent 6994907
commit bf13669
Showing 1 changed file with 59 additions and 72 deletions.
diff --git a/docs/data/joy/components/drawer/DrawerUsage.js b/docs/data/joy/components/drawer/DrawerUsage.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import Button from '@mui/joy/Button';
 import Box from '@mui/joy/Box';
 import Drawer from '@mui/joy/Drawer';
-import ButtonGroup from '@mui/joy/ButtonGroup';
 import List from '@mui/joy/List';
 import Divider from '@mui/joy/Divider';
 import ListItem from '@mui/joy/ListItem';
@@ -13,82 +12,16 @@ import InboxIcon from '@mui/icons-material/MoveToInbox';
 import MailIcon from '@mui/icons-material/Mail';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-function Demo(props) {
-  const [state, setState] = React.useState({
-    top: false,
-    left: false,
-    bottom: false,
-    right: false,
-  });
+export default function DrawerUsage() {
+  const [open, setOpen] = React.useState(false);
 
-  const toggleDrawer = (anchor, open) => (event) => {
+  const toggleDrawer = (value) => (event) => {
     if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
       return;
     }
 
-    setState({ ...state, [anchor]: open });
+    setOpen(value);
   };
-
-  const list = (anchor) => (
-    <Box
-      role="presentation"
-      onClick={toggleDrawer(anchor, false)}
-      onKeyDown={toggleDrawer(anchor, false)}
-    >
-      <List>
-        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-          <ListItem key={text}>
-            <ListItemButton>
-              <ListItemDecorator>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemDecorator>
-              <ListItemContent>{text}</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-      <Divider />
-      <List>
-        {['All mail', 'Trash', 'Spam'].map((text, index) => (
-          <ListItem key={text}>
-            <ListItemButton>
-              <ListItemDecorator>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemDecorator>
-              <ListItemContent>{text}</ListItemContent>
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-    </Box>
-  );
-
-  return (
-    <React.Fragment>
-      <ButtonGroup variant="outlined">
-        {['top', 'right', 'bottom', 'left'].map((anchor) => (
-          <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
-            {anchor}
-          </Button>
-        ))}
-      </ButtonGroup>
-      {['top', 'right', 'bottom', 'left'].map((anchor) => (
-        <Drawer
-          key={anchor}
-          anchor={anchor}
-          open={state[anchor]}
-          onClose={toggleDrawer(anchor, false)}
-          invertedColors
-          {...props}
-        >
-          {list(anchor)}
-        </Drawer>
-      ))}
-    </React.Fragment>
-  );
-}
-
-export default function DrawerUsage() {
   return (
     <JoyUsageDemo
       componentName="Drawer"
@@ -104,14 +37,68 @@ export default function DrawerUsage() {
           knob: 'color',
           defaultValue: 'neutral',
         },
+        {
+          propName: 'anchor',
+          knob: 'radio',
+          defaultValue: 'left',
+          options: ['left', 'top', 'right', 'bottom'],
+        },
         {
           propName: 'size',
           knob: 'radio',
           defaultValue: 'md',
           options: ['sm', 'md', 'lg'],
         },
+        {
+          propName: 'children',
+          defaultValue: '{/* Drawer content */}',
+        },
       ]}
-      renderDemo={(props) => <Demo {...props} />}
+      renderDemo={(props) => (
+        <React.Fragment>
+          <Button variant="outlined" color="neutral" onClick={toggleDrawer(true)}>
+            Open drawer
+          </Button>
+          <Drawer
+            open={open}
+            onClose={toggleDrawer(false)}
+            invertedColors
+            {...props}
+          >
+            <Box
+              role="presentation"
+              onClick={toggleDrawer(false)}
+              onKeyDown={toggleDrawer(false)}
+            >
+              <List>
+                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+                  <ListItem key={text}>
+                    <ListItemButton>
+                      <ListItemDecorator>
+                        {index === 0 && <InboxIcon />}
+                      </ListItemDecorator>
+                      <ListItemContent>{text}</ListItemContent>
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+              <Divider />
+              <List>
+                {['All mail', 'Trash', 'Spam'].map((text, index) => (
+                  <ListItem key={text}>
+                    <ListItemButton>
+                      <ListItemDecorator>
+                        {index === 0 && <MailIcon />}
+                      </ListItemDecorator>
+                      <ListItemContent>{text}</ListItemContent>
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+          </Drawer>
+        </React.Fragment>
+      )}
     />
   );
 }