Fix dialog bug.

This commit is contained in:
Paulo Gustavo Veiga 2020-12-27 18:18:57 -08:00
parent cbb53d244f
commit 73120ca91d
3 changed files with 594 additions and 520 deletions

View File

@ -1,4 +1,4 @@
import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@material-ui/core"; import { Button, DialogActions, DialogContent, DialogTitle } from "@material-ui/core";
import { Alert, AlertTitle } from "@material-ui/lab"; import { Alert, AlertTitle } from "@material-ui/lab";
import React from "react"; import React from "react";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
@ -7,6 +7,7 @@ import { useSelector } from "react-redux";
import { Service } from "../../../services/Service"; import { Service } from "../../../services/Service";
import { activeInstance } from '../../../reducers/serviceSlice'; import { activeInstance } from '../../../reducers/serviceSlice';
import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon"; import { DialogProps, fetchMapById, handleOnMutationSuccess } from "./DialogCommon";
import Dialog from "./Dialog";
const DeleteDialog = (props: DialogProps) => { const DeleteDialog = (props: DialogProps) => {
@ -19,40 +20,31 @@ const DeleteDialog = (props: DialogProps) => {
); );
const mapId = props.mapId; const mapId = props.mapId;
const handleOnClose = (action: 'accept' | undefined): void => { const handleOnClose = (): void => {
if (action == 'accept') {
mutation.mutate(mapId);
} else {
props.onClose(); props.onClose();
}
}; };
const handleOnSubmit = (): void => {
mutation.mutate(mapId);
}
// Fetch map model to be rendered ... // Fetch map model to be rendered ...
const { map } = fetchMapById(mapId); const { map } = fetchMapById(mapId);
return ( return (
<div> <div>
<Dialog <Dialog
open={props.open} open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
onClose={() => handleOnClose(undefined)} > title={{ id: "action.delete-title", defaultMessage: "Delete" }}
<DialogTitle><FormattedMessage id="action.delete-title" defaultMessage="Delete" /></DialogTitle> submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
<DialogContent>
<Alert severity="warning"> <Alert severity="warning">
<AlertTitle>Delete '{map?.name}'</AlertTitle> <AlertTitle>Delete '{map?.name}'</AlertTitle>
<FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." /> <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
</Alert> </Alert>
</DialogContent>
<DialogActions>
<Button onClick={() => handleOnClose('accept')} variant="outlined" color="primary">
<FormattedMessage id="action.delete-button" defaultMessage="Delete" />
</Button>
<Button onClick={() => handleOnClose(undefined)} variant="outlined" color="secondary" autoFocus>
<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />
</Button>
</DialogActions>
</Dialog> </Dialog>
</div> </div>
); );
} }
export default DeleteDialog; export default DeleteDialog;

View File

@ -12,7 +12,7 @@ export type DialogProps = {
error?: ErrorInfo; error?: ErrorInfo;
title: MessageDescriptor; title: MessageDescriptor;
description:MessageDescriptor; description?: MessageDescriptor;
submitButton: MessageDescriptor; submitButton: MessageDescriptor;
} }
@ -22,6 +22,8 @@ const Dialog = (props: DialogProps) => {
const isOpen = props.open; const isOpen = props.open;
const handleOnSubmit = props.onSubmit; const handleOnSubmit = props.onSubmit;
const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
return ( return (
<div> <div>
<DialogUI <DialogUI
@ -33,15 +35,14 @@ const Dialog = (props: DialogProps) => {
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText> {description}
<GlobalError error={props.error} /> <GlobalError error={props.error} />
{props.children} {props.children}
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button color="primary" variant="outlined" type="submit"> <Button color="primary" variant="outlined" type="submit">
<FormattedMessage id="action.rename-button" defaultMessage="Rename" /> {intl.formatMessage(props.title)}
</Button> </Button>
<Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}> <Button color="secondary" variant="outlined" autoFocus onClick={handleOnClose}>

1017
yarn.lock

File diff suppressed because it is too large Load Diff