plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
80 lines (79 loc) • 3.19 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Modal, Button, notification } from 'antd';
import Icon from '../icon/Icon';
import AceEditor from './AceEditor';
notification.config({
top: 80,
duration: 1,
});
class AceModal extends Component {
constructor() {
super(...arguments);
this.handlers = {
onOk: () => {
const { onChange } = this.props;
const code = this.aceRef.handlers.getCodes();
onChange(code);
this.setState({
visible: false,
code,
});
},
onCancel: () => {
this.modalHandlers.onHide();
},
onClick: () => {
this.modalHandlers.onShow();
},
};
this.modalHandlers = {
onShow: () => {
this.setState({
visible: true,
});
},
onHide: () => {
this.setState({
visible: false,
});
},
};
this.state = {
code: this.props.value || { html: '', css: '', js: '' },
visible: false,
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
code: nextProps.value || { html: '', css: '', js: '' },
});
}
render() {
const { onOk, onCancel, onClick } = this.handlers;
const { code: { html, css, js }, visible, } = this.state;
const label = (React.createElement(React.Fragment, null,
React.createElement("span", { style: { marginRight: 8 } }, "Code Editor"),
React.createElement(Button, { onClick: onClick, shape: "circle" },
React.createElement(Icon, { name: "code" }))));
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: label, colon: false, name: "code", initialValue: "" },
React.createElement("span", null)),
React.createElement(Form.Item, { label: "HTML", colon: false, name: "html", initialValue: html || '' },
React.createElement("pre", { style: { wordBreak: 'break-all', lineHeight: '1.2em' } }, html)),
React.createElement(Form.Item, { label: "CSS", colon: false, name: "css", initialValue: css || '' },
React.createElement("pre", { style: { wordBreak: 'break-all', lineHeight: '1.2em' } }, css)),
React.createElement(Form.Item, { label: "JS", colon: false, name: "js", initialValue: js || '' },
React.createElement("pre", { style: { wordBreak: 'break-all', lineHeight: '1.2em' } }, js)),
React.createElement(Modal, { onCancel: onCancel, onOk: onOk, open: visible, width: "80%" },
React.createElement(AceEditor, { ref: (c) => {
this.aceRef = c;
}, html: html, css: css, js: js }))));
}
}
AceModal.propTypes = {
value: PropTypes.any,
onChange: PropTypes.func,
form: PropTypes.any,
};
export default AceModal;