58 lines
2.0 KiB
TypeScript
Raw Normal View History

2020-12-27 16:37:10 -08:00
import React from "react";
import { Button, Dialog as DialogUI, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@material-ui/core";
import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
import GlobalError from "../../form/global-error";
import { ErrorInfo } from "../../../services/Service";
export type DialogProps = {
onClose: () => void;
onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
open: boolean;
children: any;
error?: ErrorInfo;
2020-12-27 18:18:57 -08:00
2020-12-27 16:37:10 -08:00
title: MessageDescriptor;
2020-12-27 18:18:57 -08:00
description?: MessageDescriptor;
submitButton: MessageDescriptor;
2020-12-27 16:37:10 -08:00
}
const Dialog = (props: DialogProps) => {
const intl = useIntl();
const handleOnClose = props.onClose;
const isOpen = props.open;
const handleOnSubmit = props.onSubmit;
2020-12-27 18:18:57 -08:00
const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
2020-12-27 16:37:10 -08:00
return (
<div>
<DialogUI
open={isOpen}
onClose={handleOnClose} >
<form autoComplete="off" onSubmit={handleOnSubmit}>
<DialogTitle>
{intl.formatMessage(props.title)}
</DialogTitle>
<DialogContent>
2020-12-27 18:18:57 -08:00
{description}
2020-12-27 16:37:10 -08:00
<GlobalError error={props.error} />
{props.children}
</DialogContent>
<DialogActions>
<Button color="primary" variant="outlined" type="submit">
2020-12-27 18:18:57 -08:00
{intl.formatMessage(props.title)}
2020-12-27 16:37:10 -08:00
</Button>
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button>
</DialogActions>
</form>
</DialogUI>
</div>
);
}
export default Dialog;