ente/web/packages/shared/components/DialogBox/TitleWithCloseButton.tsx
2024-03-01 12:21:07 +05:30

54 lines
1.4 KiB
TypeScript

import { SpaceBetweenFlex } from "@ente/shared/components/Container";
import CloseIcon from "@mui/icons-material/Close";
import {
DialogProps,
DialogTitle,
IconButton,
Typography,
} from "@mui/material";
const DialogTitleWithCloseButton = (props) => {
const { children, onClose, ...other } = props;
return (
<DialogTitle {...other}>
<SpaceBetweenFlex>
<Typography variant="h3" fontWeight={"bold"}>
{children}
</Typography>
{onClose && (
<IconButton
aria-label="close"
onClick={onClose}
sx={{ float: "right" }}
color="secondary"
>
<CloseIcon />
</IconButton>
)}
</SpaceBetweenFlex>
</DialogTitle>
);
};
export default DialogTitleWithCloseButton;
export const dialogCloseHandler =
({
staticBackdrop,
nonClosable,
onClose,
}: {
staticBackdrop?: boolean;
nonClosable?: boolean;
onClose: () => void;
}): DialogProps["onClose"] =>
(_, reason) => {
if (nonClosable) {
// no-op
} else if (staticBackdrop && reason === "backdropClick") {
// no-op
} else {
onClose();
}
};