55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
DialogProps,
|
|
DialogTitle,
|
|
IconButton,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { SpaceBetweenFlex } from '@ente/shared/components/Container';
|
|
|
|
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();
|
|
}
|
|
};
|