From e148ffcd6561ca99123c390cb075cc0e00399aa5 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 6 Apr 2022 16:02:24 +1000
Subject: [PATCH] add FullScreenModal component

---
 src/components/Modal/FullScreenModal.tsx | 110 +++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 src/components/Modal/FullScreenModal.tsx

diff --git a/src/components/Modal/FullScreenModal.tsx b/src/components/Modal/FullScreenModal.tsx
new file mode 100644
index 00000000..3a30ead7
--- /dev/null
+++ b/src/components/Modal/FullScreenModal.tsx
@@ -0,0 +1,110 @@
+import { ReactNode, useState } from "react";
+
+import {
+  Dialog,
+  DialogProps,
+  Slide,
+  IconButton,
+  Container,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+import ScrollableDialogContent, {
+  IScrollableDialogContentProps,
+} from "./ScrollableDialogContent";
+
+export interface IFullScreenModalProps
+  extends Partial<Omit<DialogProps, "title">> {
+  onClose: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => void;
+  disableBackdropClick?: boolean;
+  disableEscapeKeyDown?: boolean;
+
+  "aria-labelledby": DialogProps["aria-labelledby"];
+  header?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+
+  hideCloseButton?: boolean;
+  ScrollableDialogContentProps?: Partial<IScrollableDialogContentProps>;
+}
+
+export default function FullScreenModal({
+  onClose,
+  disableBackdropClick,
+  disableEscapeKeyDown,
+  header,
+  children,
+  footer,
+  hideCloseButton,
+  ScrollableDialogContentProps,
+  ...props
+}: IFullScreenModalProps) {
+  const [open, setOpen] = useState(true);
+  const handleClose: NonNullable<DialogProps["onClose"]> = (_, reason) => {
+    if (
+      (disableBackdropClick && reason === "backdropClick") ||
+      (disableEscapeKeyDown && reason === "escapeKeyDown")
+    ) {
+      setEmphasizeCloseButton(true);
+      return;
+    }
+
+    setOpen(false);
+    setEmphasizeCloseButton(false);
+    setTimeout(() => onClose(setOpen), 300);
+  };
+
+  const [emphasizeCloseButton, setEmphasizeCloseButton] = useState(false);
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={handleClose}
+      TransitionComponent={Slide}
+      TransitionProps={{ direction: "up" } as any}
+      {...props}
+    >
+      <Container
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          pt: { xs: "var(--dialog-spacing)", xl: 6 },
+        }}
+      >
+        {!hideCloseButton && (
+          <IconButton
+            onClick={handleClose as any}
+            aria-label="Close"
+            sx={{
+              position: "absolute",
+              top: (theme) => theme.spacing(1),
+              right: (theme) => theme.spacing(1),
+
+              bgcolor: emphasizeCloseButton ? "error.main" : undefined,
+              color: emphasizeCloseButton ? "error.contrastText" : undefined,
+              "&:hover": emphasizeCloseButton
+                ? { bgcolor: "error.dark" }
+                : undefined,
+            }}
+            className="dialog-close"
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
+
+        {header}
+
+        <ScrollableDialogContent
+          style={{ padding: 0 }}
+          {...ScrollableDialogContentProps}
+        >
+          {children}
+        </ScrollableDialogContent>
+
+        {footer}
+      </Container>
+    </Dialog>
+  );
+}