diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx index a35e65d..a1af206 100644 --- a/src/components/Drawer/Drawer.tsx +++ b/src/components/Drawer/Drawer.tsx @@ -56,6 +56,12 @@ export interface DrawerItemProps { /** The maximum width of the resizable drawer item */ maxResizeWidth?: number; + + /** + * Keep child components mounted when closed, prioritized over Drawer.keepMounted property + * @default false + * */ + keepMounted?: boolean; } export const DrawerItem = React.forwardRef( @@ -71,6 +77,7 @@ export const DrawerItem = React.forwardRef( minResizeWidth, maxResizeWidth, onResize, + keepMounted = false, } = props; const itemRef = React.useRef(null); @@ -95,7 +102,8 @@ export const DrawerItem = React.forwardRef( @@ -144,6 +152,12 @@ export interface DrawerProps { /** Optional flag to not use `Portal` for drawer */ disablePortal?: boolean; + + /** + * Keep child components mounted when closed + * @default false + * */ + keepMounted?: boolean; } export const Drawer: React.FC = ({ @@ -156,6 +170,7 @@ export const Drawer: React.FC = ({ preventScrollBody = true, hideVeil, disablePortal = true, + keepMounted = false, }) => { let someItemVisible = false; React.Children.forEach(children, (child) => { @@ -190,8 +205,8 @@ export const Drawer: React.FC = ({ {(state) => { @@ -218,6 +233,7 @@ export const Drawer: React.FC = ({ ) { const childVisible = Boolean(child.props.visible); return React.cloneElement(child, { + keepMounted, ...child.props, visible: childVisible && childrenVisible, }); diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md index 0501d35..39afeeb 100644 --- a/src/components/Drawer/README.md +++ b/src/components/Drawer/README.md @@ -76,6 +76,7 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | onResize | Callback function called at the end of resizing. Can be used to save the new width. | `(width: number) => void` | | | minResizeWidth | The minimum width of the resizable drawer item | `number` | | | maxResizeWidth | The maximum width of the resizable drawer item | `number` | | +| keepMounted | Keep child components mounted when closed, prioritized over Drawer.keepMounted property | `boolean` | `false` | ### `Drawer` Props @@ -90,6 +91,7 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`. | onEscape | Optional callback function that is called when the escape key is pressed, if the drawer is open. | `() => void` | | | hideVeil | Optional flag to hide the background darkening | `boolean` | | | disablePortal | Optional flag to not render drawer inside `Portal` | `boolean` | `true` | +| keepMounted | Keep child components mounted when closed | `boolean` | `false` | ## CSS API diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png index d4d1f3c..3679a18 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-chromium-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png index 49285f4..61c35f2 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-dark-webkit-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png index a8cd8c0..6eeeec4 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-chromium-linux.png differ diff --git a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png index af4f1ae..e94f1b1 100644 Binary files a/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png and b/src/components/Drawer/__snapshots__/Drawer.visual.test.tsx-snapshots/DrawerStories-render-story-Showcase-light-webkit-linux.png differ diff --git a/src/components/Drawer/__stories__/DrawerShowcase.tsx b/src/components/Drawer/__stories__/DrawerShowcase.tsx index 2fad0a8..79ab1a2 100644 --- a/src/components/Drawer/__stories__/DrawerShowcase.tsx +++ b/src/components/Drawer/__stories__/DrawerShowcase.tsx @@ -16,6 +16,9 @@ export function DrawerShowcase() { const [direction, setDirection] = React.useState('left'); const [direction2, setDirection2] = React.useState('left'); + const [keepMountedGlobal, setKeepMountedGlobal] = React.useState(false); + const [keepMounted1, setKeepMounted1] = React.useState(false); + const hideAll = React.useCallback(() => { setVisible1(false); setVisible2(false); @@ -41,9 +44,32 @@ export function DrawerShowcase() { left right +
Keep Mounted Drawer:   + +    Keep Mounted 1:   + - +