plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
148 lines (147 loc) • 5.65 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Button } from 'antd';
import i18n from 'i18next';
import { Flex } from '../../flex';
import StyleList from './StyleList';
import StyleModal from './StyleModal';
import Icon from '../../icon/Icon';
class Styles extends Component {
constructor() {
super(...arguments);
this.state = {
style: {},
visible: false,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
};
this.handlers = {
onOk: () => {
if (this.state.validateTitle.validateStatus === 'error') {
return;
}
if (!this.state.style.title) {
this.setState({
validateTitle: this.handlers.onValid(),
});
return;
}
if (this.state.current === 'add') {
if (Object.keys(this.state.style).length === 1) {
this.modalRef.validateFields((err, values) => {
Object.assign(this.state.style, values);
});
}
this.props.styles.push(this.state.style);
}
else {
this.props.styles.splice(this.state.index, 1, this.state.style);
}
this.setState({
visible: false,
style: {},
}, () => {
this.props.onChangeStyles(this.props.styles);
});
},
onCancel: () => {
this.setState({
visible: false,
style: {},
validateTitle: {
validateStatus: '',
help: '',
},
});
},
onAdd: () => {
this.setState({
visible: true,
style: {},
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
});
},
onEdit: (style, index) => {
this.setState({
visible: true,
style,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'modify',
index,
});
},
onDelete: (index) => {
this.props.styles.splice(index, 1);
this.props.onChangeStyles(this.props.styles);
},
onClear: () => {
this.props.onChangeStyles([]);
},
onChange: (props, changedValues, allValues) => {
const field = Object.keys(changedValues)[0];
const isTitle = field === 'title';
if (isTitle) {
this.setState({
validateTitle: this.handlers.onValid(changedValues[field]),
});
}
this.setState({
style: Object.assign({ title: this.state.style.title }, allValues),
});
},
onValid: (value) => {
if (!value || !value.length) {
return {
validateStatus: 'error',
help: i18n.t('validation.enter-property', { arg: i18n.t('common.title') }),
};
}
const exist = this.props.styles.some((style) => style.title === value);
if (!exist) {
return {
validateStatus: 'success',
help: '',
};
}
return {
validateStatus: 'error',
help: i18n.t('validation.already-property', { arg: i18n.t('common.title') }),
};
},
};
}
render() {
const { styles } = this.props;
const { visible, style, validateTitle } = this.state;
const { onOk, onCancel, onAdd, onEdit, onDelete, onClear, onChange, onValid } = this.handlers;
return (React.createElement(Form, null,
React.createElement(Flex, { flexDirection: "column" },
React.createElement(Flex, { justifyContent: "flex-end", style: { padding: 8 } },
React.createElement(Button, { className: "rde-action-btn", shape: "circle", onClick: onAdd },
React.createElement(Icon, { name: "plus" })),
React.createElement(Button, { className: "rde-action-btn", shape: "circle", onClick: onClear },
React.createElement(Icon, { name: "times" })),
React.createElement(StyleModal, { ref: (c) => {
this.modalRef = c;
}, validateTitle: validateTitle, visible: visible, onOk: onOk, style: style, onCancel: onCancel, onChange: onChange, onValid: onValid })),
React.createElement(StyleList, { styles: styles, onEdit: onEdit, onDelete: onDelete }))));
}
}
Styles.propTypes = {
styles: PropTypes.array,
onChangeStyles: PropTypes.func,
};
Styles.defaultProps = {
styles: [],
};
export default Styles;