feat: app prop to disable drawer close on outside click

affects: @medly-components/core
medly · Jul 24, 2024 · d041a13 · d041a13
1 parent 17f2c42
commit d041a13
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/core/src/components/Drawer/Drawer.tsx b/packages/core/src/components/Drawer/Drawer.tsx
@@ -10,13 +10,14 @@ import Header from './Header';
 import { DrawerProps, DrawerStaticProps } from './types';
 
 const Component: FC<DrawerProps> = memo(
-    forwardRef(({ id, onClose, open, width, children, withOverlay, position, ...props }, ref) => {
+    forwardRef(({ id, onClose, open, width, children, withOverlay, position, shouldCloseOnOutsideClick, ...props }, ref) => {
         const isEscPressed = useKeyPress('Escape'),
             [shouldRender, setRenderState] = useState(open),
             [scrollState, dispatch] = useReducer(reducer, { scrolledToTop: true, scrolledToBottom: false, scrollPosition: 0 });
 
         const handleBackgroundClick = useCallback(
-                (event: MouseEvent<HTMLDivElement>) => event.currentTarget === event.target && onClose && onClose(),
+                (event: MouseEvent<HTMLDivElement>) =>
+                    event.currentTarget === event.target && shouldCloseOnOutsideClick && onClose && onClose(),
                 [onClose]
             ),
             handleAnimationEnd = useCallback(() => !open && setRenderState(false), [open]);
@@ -52,7 +53,8 @@ Component.defaultProps = {
     open: false,
     position: 'right',
     width: '40rem',
-    withOverlay: true
+    withOverlay: true,
+    shouldCloseOnOutsideClick: true
 };
 export const Drawer: FC<DrawerProps> & WithStyle & DrawerStaticProps = Object.assign(Component, {
     Style: DrawerBackground,

diff --git a/packages/core/src/components/Drawer/types.ts b/packages/core/src/components/Drawer/types.ts
@@ -9,6 +9,7 @@ export interface DrawerProps extends HTMLProps<HTMLDivElement> {
     onClose: () => void;
     width?: string;
     withOverlay?: boolean;
+    shouldCloseOnOutsideClick?: boolean;
 }
 
 export interface DrawerStaticProps {