172 lines
8.0 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-09 18:32:52 -08:00
import { fetchMapById } from "..";
2021-02-08 11:30:32 -08:00
import BaseDialog from "../base-dialog";
2021-02-09 18:32:52 -08:00
import { FormControl, FormControlLabel, MenuItem, Radio, RadioGroup, Select } from "@material-ui/core";
2021-02-09 09:14:49 -08:00
import { useStyles } from './style';
import { Alert } from "@material-ui/lab";
2021-02-08 11:30:32 -08:00
2021-02-09 18:32:52 -08:00
type ExportFormat = 'pdf' | 'svg' | 'jpeg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'txt';
2021-02-09 09:14:49 -08:00
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,
2021-02-09 18:32:52 -08:00
svgXml?: string,
2021-02-09 09:14:49 -08:00
onClose: () => void,
}
const ExportDialog = (props: ExportDialogProps) => {
2021-02-08 11:30:32 -08:00
const intl = useIntl();
2021-02-09 18:32:52 -08:00
const { mapId, onClose, enableImgExport, svgXml } = 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');
2021-02-09 18:32:52 -08:00
const [exportFormat, setExportFormat] = React.useState<ExportFormat>(enableImgExport ? 'svg' : 'xls');
2021-02-09 09:14:49 -08:00
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) => {
2021-02-09 18:32:52 -08:00
const value: ExportGroup = event.target.value;
setExportGroup(value);
let defaultFormat: ExportFormat;
switch (value) {
case 'document':
defaultFormat = 'pdf';
break;
case 'image':
defaultFormat = 'svg';
break;
case 'mindmap-tool':
defaultFormat = 'wxml';
break;
}
setExportFormat(defaultFormat);
}
2021-02-09 09:14:49 -08:00
2021-02-08 11:30:32 -08:00
const handleOnClose = (): void => {
onClose();
};
2021-02-09 18:32:52 -08:00
const handleOnSubmit = (): void => {
2021-02-08 11:30:32 -08:00
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">
2021-02-09 18:32:52 -08:00
<FormattedMessage id="export.warning" defaultMessage="Exporting to Image (SVG,PNG,JPEG,PDF) is only available in the editor toolbar." />
2021-02-09 09:14:49 -08:00
</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
2021-02-09 18:32:52 -08:00
onSelect={handleOnExportFormatChange}
2021-02-09 09:14:49 -08:00
variant="outlined"
2021-02-09 18:32:52 -08:00
value={exportFormat}
2021-02-09 09:14:49 -08:00
className={classes.label}>
<MenuItem value="svg" className={classes.menu}>Scalable Vector Graphics (SVG)</MenuItem>
2021-02-09 18:32:52 -08:00
<MenuItem value="pdf" className={classes.select} >Portable Document Format (PDF)</MenuItem>
2021-02-09 09:14:49 -08:00
<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"
2021-02-09 18:32:52 -08:00
value={exportFormat}
2021-02-09 09:14:49 -08:00
className={classes.select}
>
<MenuItem className={classes.select} value="xls">Microsoft Excel (XLS)</MenuItem>
2021-02-09 18:32:52 -08:00
<MenuItem className={classes.select} value="txt">Plain Text File (TXT)</MenuItem>
2021-02-09 09:14:49 -08:00
</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}
2021-02-09 18:32:52 -08:00
value={exportFormat}
2021-02-09 09:14:49 -08:00
>
<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} />
2021-02-09 18:32:52 -08:00
<input name="svgXml" id="svgXml" value={svgXml} type="hidden" />
2021-02-08 11:30:32 -08:00
</form>
</div>
);
}
export default ExportDialog;