plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
188 lines (187 loc) • 7.78 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const antd_1 = require("antd");
const flex_1 = require("../../flex");
const DataSourceModal_1 = __importDefault(require("./DataSourceModal"));
const DataSourceList_1 = __importDefault(require("./DataSourceList"));
const Icon_1 = __importDefault(require("../../icon/Icon"));
class DataSources extends react_1.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_1.default.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_1.default.createElement(antd_1.Form, null,
react_1.default.createElement(flex_1.Flex, { flexDirection: "column" },
react_1.default.createElement(flex_1.Flex, { justifyContent: "flex-end", style: { padding: 8 } },
react_1.default.createElement(antd_1.Button, { className: "rde-action-btn", shape: "circle", onClick: onAdd },
react_1.default.createElement(Icon_1.default, { name: "plus" })),
react_1.default.createElement(antd_1.Button, { className: "rde-action-btn", shape: "circle", onClick: onClear },
react_1.default.createElement(Icon_1.default, { name: "times" })),
react_1.default.createElement(DataSourceModal_1.default, { ref: (c) => {
this.modalRef = c;
}, validateTitle: validateTitle, visible: visible, onOk: onOk, dataSource: dataSource, onCancel: onCancel, onChange: onChange, onValid: onValid })),
react_1.default.createElement(DataSourceList_1.default, { dataSources: dataSources, onEdit: onEdit, onDelete: onDelete }))));
}
}
DataSources.propTypes = {
dataSources: prop_types_1.default.arrayOf(prop_types_1.default.shape({
title: prop_types_1.default.string.isRequired,
})),
onChangeDataSources: prop_types_1.default.func.isRequired,
};
DataSources.defaultProps = {
dataSources: [],
};
exports.default = DataSources;