feat: Simplified PageDrawer component to use sitcky instead of absolu…

…te positioning
Enterwell · Oct 17, 2023 · eeb77a0 · eeb77a0
1 parent f634663
commit eeb77a0
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 71 deletions.
diff --git a/apps/docs/components/ExamplePageDrawer.tsx b/apps/docs/components/ExamplePageDrawer.tsx
@@ -5,8 +5,10 @@ export function ExamplePageDrawer() {
     const [expanded, setExpanded] = useState(false);
 
     return (
-        <div className="flex flex-col items-center justify-center relative h-72 overflow-hidden rounded-lg">
-            <span>Page content</span>
+        <div className="max-h-72 overflow-y-auto">
+            <div className='flex flex-col items-center justify-center'>
+                {(Array(100).fill(0)).map((_, i) => (<div>Page content {i}</div>))}
+            </div>
             {/* // @highlight-start */}
             <PageDrawer
                 expanded={expanded}

diff --git a/packages/react-ui/PageDrawer/PageDrawer.tsx b/packages/react-ui/PageDrawer/PageDrawer.tsx
@@ -2,7 +2,6 @@ import { type HTMLAttributes, useState } from 'react';
 import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
 import { Box } from '@mui/system';
 import { ExpandMore } from '@mui/icons-material';
-import { useDebounce, useResizeObserver } from '@enterwell/react-hooks';
 
 /**
  * The PageDrawer component props.
@@ -22,81 +21,71 @@ export type PageDrawerProps = HTMLAttributes<HTMLDivElement> & {
  * @public
  */
 export function PageDrawer({ expanded, onChange, children, color, ...rest }: PageDrawerProps): JSX.Element {
-  const [drawerSize, setDrawerSize] = useState(0);
-  const drawerSizeDebounced = useDebounce(drawerSize, 50);
-  const resizeObserverRef = useResizeObserver((_, entry) => {
-    setDrawerSize(entry.contentRect.height);
-  });
-
   return (
-    <>
-      <Box sx={{ height: drawerSizeDebounced }} />
-      <Accordion
-        ref={resizeObserverRef}
+    <Accordion
+      sx={{
+        position: 'sticky',
+        inset: 'auto 0 0 0',
+        bgcolor: 'transparent',
+        backgroundImage: 'none',
+        border: 'none',
+        '&::before': {
+          display: 'none'
+        }
+      }}
+      expanded={expanded}
+      onChange={onChange}
+      {...rest}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMore />}
         sx={{
-          position: 'absolute',
-          inset: 'auto 0 0 0',
-          bgcolor: 'transparent',
-          backgroundImage: 'none',
-          border: 'none',
+          position: 'relative',
+          minHeight: 32,
+          height: 32,
+          '.MuiAccordionSummary-expandIconWrapper': {
+            bgcolor: color ?? 'primary.dark',
+            color: 'primary.main',
+            borderRadius: 1
+          },
+          '&.Mui-expanded': {
+            minHeight: 24,
+            height: 24,
+          },
           '&::before': {
-            display: 'none'
+            display: 'block',
+            content: '""',
+            position: 'absolute',
+            top: '40%',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgcolor: 'background.default'
           }
         }}
-        expanded={expanded}
-        onChange={onChange}
-        {...rest}
       >
-        <AccordionSummary
-          expandIcon={<ExpandMore />}
+        <Box
           sx={{
-            position: 'relative',
-            minHeight: 32,
-            height: 32,
-            '.MuiAccordionSummary-expandIconWrapper': {
-              bgcolor: color ?? 'primary.dark',
-              color: 'primary.main',
-              borderRadius: 1
-            },
-            '&.Mui-expanded': {
-              minHeight: 24,
-              height: 24,
-            },
-            '&::before': {
-              display: 'block',
-              content: '""',
-              position: 'absolute',
-              top: '40%',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              bgcolor: 'background.default'
-            }
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: color ?? 'primary.dark',
+            height: 3,
+            width: '100%',
+            position: 'absolute',
+            left: 0,
+            right: 0,
           }}
-        >
-          <Box
-            sx={{
-              borderTop: '1px solid',
-              borderBottom: '1px solid',
-              borderColor: color ?? 'primary.dark',
-              height: 3,
-              width: '100%',
-              position: 'absolute',
-              left: 0,
-              right: 0,
-            }}
-          />
-        </AccordionSummary>
-        <AccordionDetails sx={{
-          bgcolor: 'background.default',
-          maxHeight: '40vh',
-          overflowX: 'hidden',
-          overflowY: 'auto'
-        }}
-        >
-          {children}
-        </AccordionDetails>
-      </Accordion>
-    </>
+        />
+      </AccordionSummary>
+      <AccordionDetails sx={{
+        bgcolor: 'background.default',
+        maxHeight: '40vh',
+        overflowX: 'hidden',
+        overflowY: 'auto'
+      }}
+      >
+        {children}
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/...ges/Changed Simplified PageDrawer component to use sitcky instead of absolute positioning b/...ges/Changed Simplified PageDrawer component to use sitcky instead of absolute positioning