plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
150 lines (149 loc) • 5.87 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Button } from 'antd';
import { Flex } from '../../flex';
import DataSourceModal from './DataSourceModal';
import DataSourceList from './DataSourceList';
import Icon from '../../icon/Icon';
class DataSources extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: {},
visible: false,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
};
this.handlers = {
onOk: () => {
if (this.state.validateTitle.validateStatus === 'error') {
return;
}
if (!this.state.dataSource.title) {
this.setState({
validateTitle: this.handlers.onValid(),
});
return;
}
if (this.state.current === 'add') {
if (Object.keys(this.state.dataSource).length === 1) {
this.modalRef.validateFields((err, values) => {
Object.assign(this.state.dataSource, values);
});
}
this.props.dataSources.push(this.state.dataSource);
}
else {
this.props.dataSources.splice(this.state.index, 1, this.state.dataSource);
}
this.setState({
visible: false,
dataSource: {},
}, () => {
this.props.onChangeDataSources(this.props.dataSources);
});
},
onCancel: () => {
this.setState({
visible: false,
dataSource: {},
validateTitle: {
validateStatus: '',
help: '',
},
});
},
onAdd: () => {
this.setState({
visible: true,
dataSource: {},
validateTitle: {
validateStatus: '',
help: '',
},
current: 'add',
});
},
onEdit: (dataSource, index) => {
this.setState({
visible: true,
dataSource,
validateTitle: {
validateStatus: '',
help: '',
},
current: 'modify',
index,
});
},
onDelete: (index) => {
this.props.dataSources.splice(index, 1);
this.props.onChangeDataSources(this.props.dataSources);
},
onClear: () => {
this.props.onChangeDataSources([]);
},
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({
dataSource: Object.assign({ title: this.state.dataSource.title }, allValues),
});
},
onValid: (value) => {
if (!value || !value.length) {
return {
validateStatus: 'error',
help: 'Please input title.',
};
}
const exist = this.props.dataSources.some((dataSource) => dataSource.title === value);
if (!exist) {
return {
validateStatus: 'success',
help: '',
};
}
return {
validateStatus: 'error',
help: 'Already exist title.',
};
},
};
this.canvasRef = React.createRef();
}
render() {
const { dataSources } = this.props;
const { visible, dataSource, 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(DataSourceModal, { ref: (c) => {
this.modalRef = c;
}, validateTitle: validateTitle, visible: visible, onOk: onOk, dataSource: dataSource, onCancel: onCancel, onChange: onChange, onValid: onValid })),
React.createElement(DataSourceList, { dataSources: dataSources, onEdit: onEdit, onDelete: onDelete }))));
}
}
DataSources.propTypes = {
dataSources: PropTypes.arrayOf(PropTypes.shape({
title: PropTypes.string.isRequired,
})),
onChangeDataSources: PropTypes.func.isRequired,
};
DataSources.defaultProps = {
dataSources: [],
};
export default DataSources;