121 lines
4 KiB
TypeScript
121 lines
4 KiB
TypeScript
import {
|
|
Breakpoint,
|
|
Button,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogProps,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { t } from "i18next";
|
|
import React from "react";
|
|
import DialogIcon from "./DialogIcon";
|
|
import DialogTitleWithCloseButton, {
|
|
dialogCloseHandler,
|
|
} from "./TitleWithCloseButton";
|
|
import DialogBoxBase from "./base";
|
|
import { DialogBoxAttributes } from "./types";
|
|
|
|
type IProps = React.PropsWithChildren<
|
|
Omit<DialogProps, "onClose" | "maxSize"> & {
|
|
onClose: () => void;
|
|
attributes: DialogBoxAttributes;
|
|
size?: Breakpoint;
|
|
titleCloseButton?: boolean;
|
|
}
|
|
>;
|
|
|
|
export default function DialogBox({
|
|
attributes,
|
|
children,
|
|
open,
|
|
size,
|
|
onClose,
|
|
titleCloseButton,
|
|
...props
|
|
}: IProps) {
|
|
if (!attributes) {
|
|
return <></>;
|
|
}
|
|
|
|
const handleClose = dialogCloseHandler({
|
|
staticBackdrop: attributes.staticBackdrop,
|
|
nonClosable: attributes.nonClosable,
|
|
onClose: onClose,
|
|
});
|
|
|
|
return (
|
|
<DialogBoxBase
|
|
open={open}
|
|
maxWidth={size}
|
|
onClose={handleClose}
|
|
{...props}
|
|
>
|
|
{attributes.icon && <DialogIcon icon={attributes.icon} />}
|
|
{attributes.title && (
|
|
<DialogTitleWithCloseButton
|
|
onClose={
|
|
titleCloseButton &&
|
|
!attributes.nonClosable &&
|
|
handleClose
|
|
}
|
|
>
|
|
{attributes.title}
|
|
</DialogTitleWithCloseButton>
|
|
)}
|
|
{(children || attributes?.content) && (
|
|
<DialogContent>
|
|
{children || (
|
|
<Typography color="text.muted">
|
|
{attributes.content}
|
|
</Typography>
|
|
)}
|
|
</DialogContent>
|
|
)}
|
|
{(attributes.close || attributes.proceed) && (
|
|
<DialogActions>
|
|
<>
|
|
{attributes.close && (
|
|
<Button
|
|
size="large"
|
|
color={attributes.close?.variant ?? "secondary"}
|
|
onClick={() => {
|
|
attributes.close.action &&
|
|
attributes.close?.action();
|
|
onClose();
|
|
}}
|
|
>
|
|
{attributes.close?.text ?? t("OK")}
|
|
</Button>
|
|
)}
|
|
{attributes.proceed && (
|
|
<Button
|
|
size="large"
|
|
color={attributes.proceed?.variant}
|
|
onClick={() => {
|
|
attributes.proceed.action();
|
|
onClose();
|
|
}}
|
|
disabled={attributes.proceed.disabled}
|
|
>
|
|
{attributes.proceed.text}
|
|
</Button>
|
|
)}
|
|
{attributes.secondary && (
|
|
<Button
|
|
size="large"
|
|
color={attributes.secondary?.variant}
|
|
onClick={() => {
|
|
attributes.secondary.action();
|
|
onClose();
|
|
}}
|
|
disabled={attributes.secondary.disabled}
|
|
>
|
|
{attributes.secondary.text}
|
|
</Button>
|
|
)}
|
|
</>
|
|
</DialogActions>
|
|
)}
|
|
</DialogBoxBase>
|
|
);
|
|
}
|