153 lines
7.5 KiB
TypeScript
Raw Normal View History

2021-02-08 11:30:32 -08:00
import React, { useEffect } from "react";
2021-02-09 09:14:49 -08:00
import { FormattedMessage, useIntl } from "react-intl";
2021-02-08 11:30:32 -08:00
import { fetchMapById, SimpleDialogProps } from "..";
import BaseDialog from "../base-dialog";
2021-02-09 09:14:49 -08:00
import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select, Tooltip, Typography } from "@material-ui/core";
import { useStyles } from './style';
import { Alert } from "@material-ui/lab";
2021-02-08 11:30:32 -08:00
2021-02-09 09:14:49 -08:00
type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml';
type ExportGroup = 'image' | 'document' | 'mindmap-tool';
2021-02-08 11:30:32 -08:00
2021-02-09 09:14:49 -08:00
type ExportDialogProps = {
mapId: number,
enableImgExport: boolean,
onClose: () => void,
}
const ExportDialog = (props: ExportDialogProps) => {
2021-02-08 11:30:32 -08:00
const intl = useIntl();
2021-02-09 09:14:49 -08:00
const { mapId, onClose, enableImgExport } = props;
2021-02-08 11:30:32 -08:00
const [submit, setSubmit] = React.useState<boolean>(false);
2021-02-09 09:14:49 -08:00
const [formExportRef, setExportFormRef] = React.useState<any>();
const [formTransformtRef, setTransformFormRef] = React.useState<any>();
const [exportGroup, setExportGroup] = React.useState<ExportGroup>(enableImgExport ? 'image' : 'document');
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'pdf');
const classes = useStyles();
2021-02-08 11:30:32 -08:00
2021-02-09 09:14:49 -08:00
const handleOnExportFormatChange = (event) => {
2021-02-08 11:30:32 -08:00
setExportFormat(event.target.value);
};
2021-02-09 09:14:49 -08:00
const handleOnGroupChange = (event) => {
setExportGroup(event.target.value);
};
2021-02-08 11:30:32 -08:00
const handleOnClose = (): void => {
onClose();
};
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
setSubmit(true);
}
useEffect(() => {
if (submit) {
// Depending on the type of export. It will require differt POST.
2021-02-09 09:14:49 -08:00
if (exportFormat == 'pdf' || exportFormat == "svg" || exportFormat == "jpeg" || exportFormat == "png") {
2021-02-08 11:30:32 -08:00
formTransformtRef.submit();
} else {
2021-02-09 09:14:49 -08:00
2021-02-08 11:30:32 -08:00
formExportRef.submit();
}
onClose();
}
}, [submit]);
const { map } = fetchMapById(mapId);
return (
<div>
<BaseDialog
onClose={handleOnClose}
onSubmit={handleOnSubmit}
title={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })}
description={"Export this map in the format that you want and start using it in your presentations or sharing by email"}
submitButton={intl.formatMessage({ id: "export.title", defaultMessage: "Export" })} >
2021-02-09 09:14:49 -08:00
<Alert severity="info">
<FormattedMessage id="export.warning" defaultMessage="Exporting to Image (SVG,PNG,JPEG )is available only in the editor toolbar." />
</Alert>
2021-02-08 11:30:32 -08:00
2021-02-09 09:14:49 -08:00
<FormControl component="fieldset" >
<RadioGroup name="export" value={exportGroup} onChange={handleOnGroupChange}>
<FormControl>
<FormControlLabel
className={classes.label}
value="image"
disabled={!enableImgExport}
control={<Radio color="primary" />}
label={intl.formatMessage({ id: "export.image", defaultMessage: "Image: Get a graphic representation of your map including all colors and shapes." })}
color="secondary"
style={{ fontSize: '9px' }} />
{(exportGroup == 'image') &&
(<Select
onChange={handleOnExportFormatChange}
variant="outlined"
className={classes.label}>
<MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
<MenuItem value="png" className={classes.menu}>Portable Network Graphics (PNG)</MenuItem>
<MenuItem value="jpeg" className={classes.menu}>JPEG Image (JPEG)</MenuItem>
</Select>)
}
</FormControl>
<FormControl>
<FormControlLabel
className={classes.label}
value="document"
control={<Radio color="primary" />}
label={intl.formatMessage({ id: "export.document", defaultMessage: "Document: Export your mindmap in a self-contained document ready to share" })}
color="secondary" />
{exportGroup == 'document' &&
(<Select onChange={handleOnExportFormatChange}
variant="outlined"
className={classes.select}
>
<MenuItem className={classes.select} value="pdf">Portable Document Format (PDF)</MenuItem>
<MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
<MenuItem className={classes.select} value="xls">Microsoft Excel (XLS)</MenuItem>
</Select>)
}
</FormControl>
<FormControl>
<FormControlLabel
className={classes.label}
value="mindmap-tool"
control={<Radio color="primary" />}
label={intl.formatMessage({ id: "export.document", defaultMessage: "Mindmap Tools: Export your mindmap in thirdparty mindmap tool formats" })}
color="secondary" />
{exportGroup == 'mindmap-tool' &&
(<Select
onChange={handleOnExportFormatChange}
variant="outlined"
className={classes.select}
>
<MenuItem className={classes.select} value="wxml">WiseMapping (WXML)</MenuItem>
<MenuItem className={classes.select} value="mm">Freemind 1.0.1 (MM)</MenuItem>
<MenuItem className={classes.select} value="mmap">MindManager (MMAP)</MenuItem>
</Select>)
}
</FormControl>
2021-02-08 11:30:32 -08:00
</RadioGroup>
</FormControl>
</BaseDialog>
{/* Hidden form for the purpose of summit */}
<form action={`/c/restful/maps/${mapId}.${exportFormat}`} ref={setExportFormRef} method="GET">
<input name="download" type="hidden" value={exportFormat} />
<input name="filename" type="hidden" value={map?.title} />
</form>
2021-02-09 09:14:49 -08:00
<form action={`/c/restful/transform.${exportFormat}`} ref={setTransformFormRef} method="POST">
2021-02-08 11:30:32 -08:00
<input name="download" type="hidden" value={exportFormat} />
<input name="filename" type="hidden" value={map?.title} />
<input name="svgXml" id="svgXml" value="" type="hidden" />
</form>
</div>
);
}
export default ExportDialog;