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 | 86x 129x 129x | import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import * as React from "react";
import BaseModal, { BaseModalProps } from "./BaseModal";
import ModalTitle from "./ModalTitle";
import { IconButton } from "@common/IconButton";
import { Tooltip } from "@common/Tooltip";
// icon
import { CloseIcon } from "@assets/icons";
import { Box } from "@mui/material";
export type DialogProps = BaseModalProps & {
title?: string;
titleComponent?: React.ReactElement;
titleIcon?: JSX.Element;
onClose: any;
actions?: React.ReactNode;
backgroundColor?: string;
headerComponent?: React.ReactNode;
sortIconButton?: React.ReactNode;
modalDialogRef?: React.RefObject<HTMLElement>;
shouldShowProgressBar?: boolean;
progressValues?: Record<string, number>;
handleScrollDialogContent?: (event: React.UIEvent<HTMLElement>) => void;
modalType?: "default" | "builder" | "popUp" | "selection";
shouldShowTitle?: boolean;
wrapper?: (element: JSX.Element) => JSX.Element;
hideActions?: boolean;
};
const Modal = ({
title,
titleIcon,
onClose,
actions,
headerComponent,
backgroundColor,
sortIconButton,
titleComponent,
modalDialogRef,
shouldShowProgressBar,
handleScrollDialogContent,
modalType = "default",
shouldShowTitle = true,
progressValues,
wrapper = (element: any) => element,
hideActions = false,
...props
}: DialogProps) => {
return (
<BaseModal {...props}>
{headerComponent ||
(modalType === "popUp" ? (
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
padding: "4px 8px",
}}
>
<Tooltip title="Close">
<IconButton aria-label="close" onClick={onClose} size="small">
<CloseIcon width={20} />
</IconButton>
</Tooltip>
</Box>
) : modalType === "selection" || !shouldShowTitle ? null : (
<ModalTitle
title={title}
titleComponent={titleComponent}
titleIcon={titleIcon}
onClose={onClose}
sortIconButton={sortIconButton}
modalType={modalType}
shouldShowProgressBar={shouldShowProgressBar}
progressValues={progressValues}
/>
))}
{wrapper(
<>
<DialogContent
sx={{
border: "none !important",
borderTop: "none !important",
backgroundColor: backgroundColor
? backgroundColor
: "transparent",
}}
ref={modalDialogRef}
onScroll={handleScrollDialogContent}
>
{props.children}
</DialogContent>
{actions && !hideActions && <DialogActions>{actions}</DialogActions>}
</>,
)}
</BaseModal>
);
};
export default Modal;
|