2019-06-19 14:40:52 +00:00
|
|
|
import Button from "@material-ui/core/Button";
|
|
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
|
|
import DialogActions from "@material-ui/core/DialogActions";
|
|
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
|
|
import {
|
|
|
|
createStyles,
|
|
|
|
Theme,
|
|
|
|
withStyles,
|
|
|
|
WithStyles
|
|
|
|
} from "@material-ui/core/styles";
|
2019-08-09 11:14:35 +00:00
|
|
|
import classNames from "classnames";
|
2019-08-09 10:26:22 +00:00
|
|
|
import React from "react";
|
2019-08-26 21:54:03 +00:00
|
|
|
import { FormattedMessage, useIntl } from "react-intl";
|
2019-06-19 14:40:52 +00:00
|
|
|
|
2019-08-26 21:54:03 +00:00
|
|
|
import { buttonMessages } from "@saleor/intl";
|
2019-06-19 14:40:52 +00:00
|
|
|
import ConfirmButton, {
|
|
|
|
ConfirmButtonTransitionState
|
|
|
|
} from "../ConfirmButton/ConfirmButton";
|
|
|
|
|
|
|
|
const styles = (theme: Theme) =>
|
|
|
|
createStyles({
|
|
|
|
deleteButton: {
|
|
|
|
"&:hover": {
|
|
|
|
backgroundColor: theme.palette.error.main
|
|
|
|
},
|
|
|
|
backgroundColor: theme.palette.error.main,
|
|
|
|
color: theme.palette.error.contrastText
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
interface ActionDialogProps extends WithStyles<typeof styles> {
|
|
|
|
children?: React.ReactNode;
|
|
|
|
confirmButtonLabel?: string;
|
|
|
|
confirmButtonState: ConfirmButtonTransitionState;
|
|
|
|
open: boolean;
|
|
|
|
title: string;
|
|
|
|
variant?: "default" | "delete";
|
|
|
|
onClose?();
|
|
|
|
onConfirm();
|
|
|
|
}
|
|
|
|
|
|
|
|
const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
|
|
|
|
({
|
|
|
|
children,
|
|
|
|
classes,
|
|
|
|
confirmButtonLabel,
|
|
|
|
confirmButtonState,
|
|
|
|
open,
|
|
|
|
title,
|
|
|
|
variant,
|
|
|
|
onConfirm,
|
|
|
|
onClose
|
2019-08-26 21:54:03 +00:00
|
|
|
}: ActionDialogProps) => {
|
|
|
|
const intl = useIntl();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Dialog onClose={onClose} open={open}>
|
|
|
|
<DialogTitle>{title}</DialogTitle>
|
|
|
|
<DialogContent>{children}</DialogContent>
|
|
|
|
<DialogActions>
|
|
|
|
<Button onClick={onClose}>
|
|
|
|
<FormattedMessage {...buttonMessages.cancel} />
|
|
|
|
</Button>
|
|
|
|
<ConfirmButton
|
|
|
|
transitionState={confirmButtonState}
|
|
|
|
color="primary"
|
|
|
|
variant="contained"
|
|
|
|
onClick={onConfirm}
|
|
|
|
className={classNames({
|
|
|
|
[classes.deleteButton]: variant === "delete"
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
{confirmButtonLabel ||
|
|
|
|
(variant === "delete"
|
|
|
|
? intl.formatMessage(buttonMessages.delete)
|
|
|
|
: intl.formatMessage(buttonMessages.confirm))}
|
|
|
|
</ConfirmButton>
|
|
|
|
</DialogActions>
|
|
|
|
</Dialog>
|
|
|
|
);
|
|
|
|
}
|
2019-06-19 14:40:52 +00:00
|
|
|
);
|
|
|
|
ActionDialog.displayName = "ActionDialog";
|
|
|
|
export default ActionDialog;
|