Add overridable fullscreen prop for the modal

Gavant · Jan 28, 2025 · 32088c7 · 32088c7
1 parent 9b8a262
commit 32088c7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/app/src/core/components/Modal.tsx b/app/src/core/components/Modal.tsx
@@ -5,14 +5,35 @@ import { useTheme } from '@mui/material/styles';
 import { DialogActions } from '@mui/material';
 
 interface ResponsiveModalProps extends DialogProps {
+    /**
+     * Callback function to be called when the modal is closed
+     *
+     * @memberof ResponsiveModalProps
+     */
     onCloseCallback?: () => void;
+    /**
+     * Disables the close button on the modal
+     *
+     * @memberof ResponsiveModalProps
+     */
     closeDisabled?: boolean;
+    /**
+     * Action children to be rendered in the modal
+     *
+     * @memberof ResponsiveModalProps
+     */
     actionChildren?: DialogProps['children'];
+    /**
+     * Overrides the default fullscreen behavior of showing full screen based upon the theme breakpoints (md or less)
+     *
+     * @memberof ResponsiveModalProps
+     */
+    fullScreen?: boolean;
 }
 
-export default function Modal({ children, onCloseCallback, closeDisabled, actionChildren, ...rest }: ResponsiveModalProps) {
+export default function Modal({ children, onCloseCallback, closeDisabled, actionChildren, fullScreen, ...rest }: ResponsiveModalProps) {
     const theme = useTheme();
-    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const isFullScreen = fullScreen ?? useMediaQuery(theme.breakpoints.down('md'));
 
     const onClose = () => {
         if (!closeDisabled) {
@@ -23,7 +44,7 @@ export default function Modal({ children, onCloseCallback, closeDisabled, action
     };
 
     return (
-        <Dialog {...rest} fullScreen={fullScreen} onClose={onClose}>
+        <Dialog {...rest} fullScreen={isFullScreen} onClose={onClose}>
             <DialogContent>{children}</DialogContent>
             {actionChildren && <DialogActions>{actionChildren}</DialogActions>}
         </Dialog>

diff --git a/app/src/core/components/__tests__/Modal.test.tsx b/app/src/core/components/__tests__/Modal.test.tsx
@@ -52,7 +52,7 @@ describe('Modal', () => {
         expect(onCloseCallback).not.toHaveBeenCalled();
     });
 
-    it('renders in fullScreen mode on small screens', () => {
+    it('renders in fullScreen mode on small screens by default', () => {
         vi.mocked(useMediaQuery).mockReturnValue(true);
 
         render(
@@ -64,7 +64,7 @@ describe('Modal', () => {
         expect(document.querySelector('.MuiDialog-paperFullScreen')).toBeInTheDocument();
     });
 
-    it('renders in normal mode on large screens', () => {
+    it('renders in normal mode on large screens by default', () => {
         vi.mocked(useMediaQuery).mockReturnValue(false);
 
         render(
@@ -75,4 +75,24 @@ describe('Modal', () => {
 
         expect(document.querySelector('.MuiDialog-paperFullScreen')).not.toBeInTheDocument();
     });
+
+    it('renders in fullScreen mode when fullScreen prop is passed in as true', () => {
+        render(
+            <Modal open fullScreen>
+                <div>Test Content</div>
+            </Modal>
+        );
+
+        expect(document.querySelector('.MuiDialog-paperFullScreen')).toBeInTheDocument();
+    });
+
+    it('does not render in fullScreen mode when fullScreen prop is passed in as false', () => {
+        render(
+            <Modal open fullScreen={false}>
+                <div>Test Content</div>
+            </Modal>
+        );
+
+        expect(document.querySelector('.MuiDialog-paperFullScreen')).not.toBeInTheDocument();
+    });
 });