plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
65 lines (64 loc) • 2.65 kB
JavaScript
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Radio } from 'antd';
import i18n from 'i18next';
import { InputHtml } from '.';
import FileUpload from './FileUpload';
const SVGModal = ({ visible, onOk, onCancel }) => {
const [form] = Form.useForm();
const [loadType, setLoadType] = useState('file');
useEffect(() => {
if (!visible) {
form.resetFields();
setLoadType('file');
}
}, [visible, form]);
const handleChangeSvgType = (e) => {
form.resetFields(['svg']);
setLoadType(e.target.value);
};
const handleOk = () => {
form
.validateFields()
.then((values) => {
if (values.svg instanceof Blob) {
const reader = new FileReader();
reader.readAsDataURL(values.svg);
reader.onload = () => {
onOk(Object.assign(Object.assign({}, values), { svg: reader.result }));
};
}
else {
onOk(values);
}
})
.catch(() => {
// Validation failed
});
};
const handleCancel = () => {
if (onCancel) {
onCancel();
}
};
return (React.createElement(Modal, { title: i18n.t('imagemap.svg.add-svg'), open: visible, onCancel: handleCancel, onOk: handleOk },
React.createElement(Form, { form: form, layout: "vertical" },
React.createElement(Form.Item, { label: i18n.t('common.type'), name: "loadType", initialValue: loadType },
React.createElement(Radio.Group, { onChange: handleChangeSvgType, value: loadType },
React.createElement(Radio.Button, { value: "file" }, i18n.t('common.file')),
React.createElement(Radio.Button, { value: "svg" }, i18n.t('common.svg')))),
React.createElement(Form.Item, { label: loadType === 'svg' ? i18n.t('common.svg') : i18n.t('common.file'), name: "svg", rules: [
{
required: true,
message: i18n.t('validation.enter-property', {
arg: loadType === 'svg' ? i18n.t('common.svg') : i18n.t('common.file'),
}),
},
] }, loadType === 'svg' ? React.createElement(InputHtml, null) : React.createElement(FileUpload, { accept: ".svg" })))));
};
SVGModal.propTypes = {
onOk: PropTypes.func.isRequired,
onCancel: PropTypes.func,
visible: PropTypes.bool.isRequired,
};
export default SVGModal;