fix: propagate width props to drawer mode

lifinance · Jul 15, 2022 · 8d36f1c · 8d36f1c
1 parent 6f16ea1
commit 8d36f1c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/packages/widget/src/AppDrawer.style.tsx b/packages/widget/src/AppDrawer.style.tsx
@@ -1,9 +1,35 @@
 import { Button, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
+const getButtonTransformWidth = (
+  drawerWidth?: number | string,
+  drawerMaxWidth?: number | string,
+) => {
+  if (typeof drawerWidth === 'number') {
+    return `${drawerWidth}px`;
+  }
+  if (typeof drawerWidth === 'string' && !drawerWidth.includes('%')) {
+    return drawerWidth;
+  }
+  if (typeof drawerMaxWidth === 'number') {
+    return `${drawerMaxWidth}px`;
+  }
+  if (typeof drawerMaxWidth === 'string' && !drawerMaxWidth.includes('%')) {
+    return drawerMaxWidth;
+  }
+  return '392px';
+};
+
 export const DrawerButton = styled(Button, {
-  shouldForwardProp: (prop) => prop !== 'open',
-})<{ open?: boolean }>(({ theme, open }) => ({
+  shouldForwardProp: (prop) =>
+    !['open', 'drawerProps'].includes(prop as string),
+})<{
+  open?: boolean;
+  drawerProps?: {
+    width?: number | string;
+    maxWidth?: number | string;
+  };
+}>(({ theme, open, drawerProps }) => ({
   background:
     theme.palette.mode === 'light'
       ? theme.palette.common.black
@@ -23,7 +49,11 @@ export const DrawerButton = styled(Button, {
   position: 'absolute',
   right: 0,
   top: 'calc(50% - 74px)',
-  transform: `translate3d(calc(${open ? '392px' : '0px'} * -1), 0, 0)`,
+  transform: `translate3d(calc(${
+    open
+      ? getButtonTransformWidth(drawerProps?.width, drawerProps?.maxWidth)
+      : '0px'
+  } * -1), 0, 0)`,
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.enteringScreen,
     easing: theme.transitions.easing.easeOut,

diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -64,6 +64,7 @@ export const AppDrawer = forwardRef<AppDrawerBase, AppDrawerProps>(
           variant="contained"
           onClick={toggleDrawer}
           open={drawerOpen}
+          drawerProps={config?.containerStyle}
           disableElevation
         >
           {drawerOpen ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
@@ -82,6 +83,13 @@ export const AppDrawer = forwardRef<AppDrawerBase, AppDrawerProps>(
               backdropFilter: 'blur(3px)',
             },
           }}
+          PaperProps={{
+            sx: {
+              width: config?.containerStyle?.width ?? '100%',
+              minWidth: config?.containerStyle?.minWidth ?? 375,
+              maxWidth: config?.containerStyle?.maxWidth ?? 392,
+            },
+          }}
           keepMounted
         >
           <AppDefault />