plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
80 lines (79 loc) • 3.15 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.handlers = {
onOk: () => {
const { onChange } = this.props;
const { tempCode } = this.state;
onChange(tempCode);
this.setState({
visible: false,
code: tempCode,
});
},
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,
tempCode: this.props.value,
visible: false,
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
code: nextProps.value,
});
}
render() {
const { onOk, onCancel, onClick } = this.handlers;
const { code, visible, tempCode } = 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: "trigger.code", initialValue: code || this.props.value },
React.createElement("pre", { style: { wordBreak: 'break-all', lineHeight: '1.2em' } }, code)),
React.createElement(Modal, { onCancel: onCancel, onOk: onOk, visible: visible },
React.createElement(Form.Item, { label: codeLabel, colon: false },
React.createElement(ReactAce, { ref: (c) => {
this.jsRef = c;
}, mode: "javascript", theme: "github", width: "100%", height: "200px", defaultValue: code, value: tempCode, editorProps: {
$blockScrolling: true,
}, onChange: (value) => {
this.setState({ tempCode: value });
} })))));
}
}
CodeModal.propTypes = {
value: PropTypes.any,
onChange: PropTypes.func,
form: PropTypes.any,
};
export default CodeModal;