plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
72 lines (71 loc) • 2.6 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Modal, Button, Input } from 'antd';
import i18n from 'i18next';
import Icon from '../icon/Icon';
class UrlModal extends Component {
constructor() {
super(...arguments);
this.handlers = {
onOk: () => {
const { onChange } = this.props;
const { tempUrl } = this.state;
onChange(tempUrl);
this.setState({
visible: false,
url: tempUrl,
});
},
onCancel: () => {
this.modalHandlers.onHide();
},
onClick: () => {
this.modalHandlers.onShow();
},
};
this.modalHandlers = {
onShow: () => {
this.setState({
visible: true,
});
},
onHide: () => {
this.setState({
visible: false,
});
},
};
this.state = {
url: this.props.value || '',
tempUrl: '',
visible: false,
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
url: nextProps.value || '',
});
}
render() {
const { onOk, onCancel, onClick } = this.handlers;
const { url, visible } = this.state;
const label = (React.createElement(React.Fragment, null,
React.createElement("span", { style: { marginRight: 8 } }, i18n.t('common.url')),
React.createElement(Button, { onClick: onClick, shape: "circle", className: "rde-action-btn" },
React.createElement(Icon, { name: "edit" }))));
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: label, colon: false, name: "url", initialValue: url || '' },
React.createElement("span", { style: { wordBreak: 'break-all' } }, url)),
React.createElement(Modal, { onCancel: onCancel, onOk: onOk, open: visible },
React.createElement(Form.Item, { label: i18n.t('common.url'), colon: false, name: "tempUrl" },
React.createElement(Input, { defaultValue: url, onChange: (e) => {
this.setState({ tempUrl: e.target.value });
} })))));
}
}
UrlModal.propTypes = {
value: PropTypes.any,
onChange: PropTypes.func,
form: PropTypes.any,
};
export default UrlModal;