141 lines
4.8 KiB
TypeScript
141 lines
4.8 KiB
TypeScript
import { dialogCloseHandler } from "@ente/shared/components/DialogBox/TitleWithCloseButton";
|
|
import EnteButton from "@ente/shared/components/EnteButton";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogProps,
|
|
Stack,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { t } from "i18next";
|
|
import React, { useState } from "react";
|
|
import { DialogBoxAttributesV2 } from "./types";
|
|
|
|
type IProps = React.PropsWithChildren<
|
|
Omit<DialogProps, "onClose"> & {
|
|
onClose: () => void;
|
|
attributes: DialogBoxAttributesV2;
|
|
}
|
|
>;
|
|
|
|
export default function DialogBoxV2({
|
|
attributes,
|
|
children,
|
|
open,
|
|
onClose,
|
|
...props
|
|
}: IProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
if (!attributes) {
|
|
return <></>;
|
|
}
|
|
|
|
const handleClose = dialogCloseHandler({
|
|
staticBackdrop: attributes.staticBackdrop,
|
|
nonClosable: attributes.nonClosable,
|
|
onClose: onClose,
|
|
});
|
|
|
|
const { PaperProps, ...rest } = props;
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={handleClose}
|
|
PaperProps={{
|
|
...PaperProps,
|
|
sx: {
|
|
padding: "8px 12px",
|
|
maxWidth: "360px",
|
|
...PaperProps?.sx,
|
|
},
|
|
}}
|
|
{...rest}
|
|
>
|
|
<Stack spacing={"36px"} p={"16px"}>
|
|
<Stack spacing={"19px"}>
|
|
{attributes.icon && (
|
|
<Box
|
|
sx={{
|
|
"& > svg": {
|
|
fontSize: "32px",
|
|
},
|
|
}}
|
|
>
|
|
{attributes.icon}
|
|
</Box>
|
|
)}
|
|
{attributes.title && (
|
|
<Typography variant="large" fontWeight={"bold"}>
|
|
{attributes.title}
|
|
</Typography>
|
|
)}
|
|
{children ||
|
|
(attributes?.content && (
|
|
<Typography color="text.muted">
|
|
{attributes.content}
|
|
</Typography>
|
|
))}
|
|
</Stack>
|
|
{(attributes.proceed ||
|
|
attributes.close ||
|
|
attributes.buttons?.length) && (
|
|
<Stack
|
|
spacing={"8px"}
|
|
direction={
|
|
attributes.buttonDirection === "row"
|
|
? "row-reverse"
|
|
: "column"
|
|
}
|
|
flex={1}
|
|
>
|
|
{attributes.proceed && (
|
|
<EnteButton
|
|
loading={loading}
|
|
size="large"
|
|
color={attributes.proceed?.variant}
|
|
onClick={async () => {
|
|
await attributes.proceed.action(setLoading);
|
|
|
|
onClose();
|
|
}}
|
|
disabled={attributes.proceed.disabled}
|
|
>
|
|
{attributes.proceed.text}
|
|
</EnteButton>
|
|
)}
|
|
{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.buttons &&
|
|
attributes.buttons.map((b) => (
|
|
<Button
|
|
size="large"
|
|
key={b.text}
|
|
color={b.variant}
|
|
onClick={() => {
|
|
b.action();
|
|
onClose();
|
|
}}
|
|
disabled={b.disabled}
|
|
>
|
|
{b.text}
|
|
</Button>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Dialog>
|
|
);
|
|
}
|