update: add an ability to pass MUI drawer props inside ResizableDrawer

Exabyte-io · Jun 13, 2024 · 71b7a07 · 71b7a07
1 parent 7e89fd1
commit 71b7a07
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/dist/mui/components/custom/resizable-drawer/ResizableDrawer.d.ts b/dist/mui/components/custom/resizable-drawer/ResizableDrawer.d.ts
@@ -1,10 +1,13 @@
+import { DrawerProps } from "@mui/material/Drawer";
 import React from "react";
-export default function ResizableDrawer({ children, open, onClose, refocusChild, childIdToRefocus, paperProps, containerRef, }: {
+export type MUIDrawerProps = Omit<DrawerProps, "variant" | "anchor" | "open" | "onClose" | "SlideProps" | "PaperProps" | "children">;
+export default function ResizableDrawer({ children, open, onClose, refocusChild, childIdToRefocus, paperProps, containerRef, drawerProps, }: {
     children: React.ReactElement;
     open: boolean;
     onClose: () => void;
     refocusChild?: boolean;
     childIdToRefocus?: string;
     paperProps?: object;
     containerRef?: React.RefObject<HTMLDivElement>;
+    drawerProps?: MUIDrawerProps;
 }): React.JSX.Element;
diff --git a/dist/mui/components/custom/resizable-drawer/ResizableDrawer.js b/dist/mui/components/custom/resizable-drawer/ResizableDrawer.js
@@ -59,7 +59,7 @@ const Puller = styled(Box)(({ theme, isResizing }) => ({
 }));
 const TRANSITION_DURATION = 500; // ms
 const DRAWER_MIN_HEGHT = 20;
-export default function ResizableDrawer({ children, open, onClose, refocusChild = false, childIdToRefocus, paperProps, containerRef, }) {
+export default function ResizableDrawer({ children, open, onClose, refocusChild = false, childIdToRefocus, paperProps, containerRef, drawerProps = {}, }) {
     const { height, setHeight, isResizing, enableResize, disableResize } = useResize({
         minHeight: DRAWER_MIN_HEGHT,
         refocusChild,
@@ -100,7 +100,9 @@ export default function ResizableDrawer({ children, open, onClose, refocusChild
             (_a = document.getElementById(childIdToRefocus)) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    return (React.createElement(Drawer, { variant: "persistent", anchor: "bottom", open: open, onClose: onClose, SlideProps: {
+    return (React.createElement(Drawer
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...drawerProps, variant: "persistent", anchor: "bottom", open: open, onClose: onClose, SlideProps: {
             direction: "up",
             timeout: TRANSITION_DURATION,
             in: true,

diff --git a/src/mui/components/custom/resizable-drawer/ResizableDrawer.tsx b/src/mui/components/custom/resizable-drawer/ResizableDrawer.tsx
@@ -2,7 +2,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import Box from "@mui/material/Box";
-import Drawer from "@mui/material/Drawer";
+import Drawer, { DrawerProps } from "@mui/material/Drawer";
 import { styled, Theme } from "@mui/material/styles";
 import React, { CSSProperties, useCallback, useEffect, useState } from "react";
 
@@ -105,6 +105,12 @@ const Puller = styled(Box)(({ theme, isResizing }: { theme?: Theme; isResizing:
 
 const TRANSITION_DURATION = 500; // ms
 const DRAWER_MIN_HEGHT = 20;
+
+export type MUIDrawerProps = Omit<
+    DrawerProps,
+    "variant" | "anchor" | "open" | "onClose" | "SlideProps" | "PaperProps" | "children"
+>;
+
 export default function ResizableDrawer({
     children,
     open,
@@ -113,6 +119,7 @@ export default function ResizableDrawer({
     childIdToRefocus,
     paperProps,
     containerRef,
+    drawerProps = {},
 }: {
     children: React.ReactElement;
     open: boolean;
@@ -121,6 +128,7 @@ export default function ResizableDrawer({
     childIdToRefocus?: string;
     paperProps?: object;
     containerRef?: React.RefObject<HTMLDivElement>;
+    drawerProps?: MUIDrawerProps;
 }) {
     const { height, setHeight, isResizing, enableResize, disableResize } = useResize({
         minHeight: DRAWER_MIN_HEGHT,
@@ -170,6 +178,8 @@ export default function ResizableDrawer({
 
     return (
         <Drawer
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...drawerProps}
             variant="persistent"
             anchor="bottom"
             open={open}