Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | 183x 1824x 725x 725x 725x 248x 248x 725x 725x 2900x 248x 725x 183x 183x 1208x 1208x 1208x 1208x 1208x 1208x 1208x 358x 1208x 137x 1208x 137x 137x 137x 136x 1208x 1208x 2018x | import React, { useEffect } from "react";
import { Dialog, DialogProps } from "@mui/material";
import { NavigationType, useNavigationType } from "react-router-dom";
import { animated, useTransition } from "react-spring";
import { palette } from "@palette";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
export type BaseModalProps = DialogProps & {
width?: string;
isPeekMode?: boolean;
scroll?: DialogProps["scroll"];
testId?: string;
onAnimationEnd?: () => void;
};
export const generateModalSx = (modalSx: any) => {
if (!modalSx) return null;
const restSx = { ...modalSx };
const custom: any = { paper: {}, title: {}, content: {}, actions: {} };
const moveToCustomObj = (property: string, customObjProperty: string) => {
custom[customObjProperty] = { ...restSx[property] };
delete restSx[property];
};
const customStyleNames = [
{ name: "& .MuiDialog-paper", objName: "paper" },
{ name: "& .MuiDialogTitle-root", objName: "title" },
{ name: "& .MuiDialogContent-root", objName: "content" },
{ name: "& .MuiDialogActions-root", objName: "actions" },
];
for (const style of customStyleNames) {
if (restSx?.[style.name]) {
moveToCustomObj(style.name, style.objName);
}
}
return {
custom,
restSx,
};
};
/* This extra space is required when the maintenance banner is visible,
so modals don’t end up stacked directly against each other. */
const EXTRA_TOP_SPACING = 20;
const BaseModal: React.FC<BaseModalProps> = ({
sx,
children,
width = "640px",
open,
scroll = "paper",
testId,
onAnimationEnd,
...rest
}) => {
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const navType: NavigationType = useNavigationType();
const bannerOffset = useBannerOffset(true);
const extraSpace = bannerOffset ? bannerOffset + EXTRA_TOP_SPACING : 40;
const AnimatedDialog = animated(Dialog);
const transitions = useTransition(isOpen, {
from: { transform: "translateY(25px)" },
enter: { transform: "translateY(0px)" },
leave: { transform: "translateY(50px)" },
onDestroyed: () => {
if (onAnimationEnd && open === false) {
onAnimationEnd();
}
},
});
useEffect(() => {
setIsOpen(open);
}, [open]);
useEffect(() => {
Iif (navType === "POP" && isOpen) {
setIsOpen(false);
}
}, [navType]);
useEffect(() => {
const handlePopstate = () => {
setIsOpen(false);
};
window.addEventListener("popstate", handlePopstate);
return () => {
window.removeEventListener("popstate", handlePopstate);
};
}, []);
const modalSx = generateModalSx(sx);
return (
<>
{transitions((style, itemVisible) => (
<AnimatedDialog
open={!isOpen ? isOpen : itemVisible}
style={style}
scroll={scroll}
BackdropProps={{
sx: {
backgroundColor: palette.backdrop.main,
},
}}
PaperProps={{
style: {
transformOrigin: "top",
},
}}
sx={{
overscrollBehavior: "contain",
"& .MuiDialog-paper": {
borderRadius: "20px",
width: width,
maxWidth: width,
background: palette.neutral.white,
top: `${extraSpace}px`,
maxHeight: `calc(90% - ${bannerOffset ? extraSpace : 0}px)`,
...modalSx?.custom.paper,
},
"& .MuiDialogTitle-root": {
backgroundColor: "transparent",
...modalSx?.custom.title,
},
"& .MuiDialogContent-root": {
backgroundColor: "transparent",
...modalSx?.custom.content,
},
"& .MuiDialogActions-root": {
backgroundColor: "transparent",
...modalSx?.custom.actions,
},
...modalSx?.restSx,
}}
data-testid={testId}
{...rest}
>
{children}
</AnimatedDialog>
))}
</>
);
};
export default BaseModal;
|