plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
79 lines (78 loc) • 3.25 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Button, Form } from 'antd';
import ReactAce from 'react-ace';
import i18n from 'i18next';
import Icon from '../icon/Icon';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
class CodeModal extends Component {
constructor() {
super(...arguments);
this.state = {
chartOption: this.props.value,
visible: false,
};
this.handlers = {
onOk: () => {
const { onChange } = this.props;
const { tempChartOption } = this.state;
onChange(tempChartOption);
this.setState({
visible: false,
chartOption: tempChartOption,
});
},
onCancel: () => {
this.modalHandlers.onHide();
},
onClick: () => {
this.modalHandlers.onShow();
},
};
this.modalHandlers = {
onShow: () => {
this.setState({
visible: true,
});
},
onHide: () => {
this.setState({
visible: false,
});
},
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
chartOption: nextProps.value,
});
}
render() {
const { onOk, onCancel, onClick } = this.handlers;
const { visible, chartOption, tempChartOption } = this.state;
const label = (React.createElement(React.Fragment, null,
React.createElement("span", { style: { marginRight: 8 } }, i18n.t('common.code')),
React.createElement(Button, { onClick: onClick, shape: "circle", className: "rde-action-btn" },
React.createElement(Icon, { name: "edit" }))));
const codeLabel = React.createElement("span", null, "Code (value, styles, animations, userProperty)");
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: label, colon: false, name: "chartOption", initialValue: chartOption },
React.createElement("pre", { style: { wordBreak: 'break-all', lineHeight: '1.2em' } }, chartOption)),
React.createElement(Modal, { onCancel: onCancel, onOk: onOk, open: visible, style: { minWidth: 800 } },
React.createElement(Form.Item, { label: codeLabel, colon: false, name: "chartOption", initialValue: chartOption },
React.createElement(ReactAce, { ref: (c) => {
this.jsRef = c;
}, mode: "javascript", theme: "github", width: "100%", height: "600px", defaultValue: chartOption, value: tempChartOption, editorProps: {
$blockScrolling: true,
}, onChange: (text) => {
this.setState({ tempChartOption: text });
} })))));
}
}
CodeModal.propTypes = {
value: PropTypes.any,
onChange: PropTypes.func,
form: PropTypes.any,
};
export default CodeModal;