plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
214 lines (213 loc) • 10.5 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 });
exports.getEllipsis = exports.getConfiguration = exports.getNode = void 0;
const react_1 = __importStar(require("react"));
const prop_types_1 = __importDefault(require("prop-types"));
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
const i18next_1 = __importDefault(require("i18next"));
const antd_1 = require("antd");
const Icon_1 = __importDefault(require("../../icon/Icon"));
const InputScript_1 = __importDefault(require("../../common/InputScript"));
const InputTemplate_1 = __importDefault(require("../../common/InputTemplate"));
const InputJson_1 = __importDefault(require("../../common/InputJson"));
const index_1 = __importDefault(require("./index"));
const getNode = (nodeClazz) => {
const classPath = nodeClazz.split('.');
return classPath[classPath.length - 1];
};
exports.getNode = getNode;
const getConfiguration = (clazz) => index_1.default[clazz] || null;
exports.getConfiguration = getConfiguration;
const getEllipsis = (text, length) => {
if (!length) {
return /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(text)
? text.length > 8
? text.substring(0, 8).concat('...')
: text
: text.length > 15
? text.substring(0, 15).concat('...')
: text;
}
return /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(text)
? text.length > length / 2
? text.substring(0, length / 2).concat('...')
: text
: text.length > length
? text.substring(0, length).concat('...')
: text;
};
exports.getEllipsis = getEllipsis;
class NodeConfiguration extends react_1.Component {
constructor() {
super(...arguments);
this.state = {
errors: null,
};
this.handlers = {
onValidate: (errors) => {
this.setState({
errors,
});
this.props.selectedItem.set({
errors,
});
},
aceEditorValidator: (rule, value, callback) => {
const { errors } = this.state;
if (errors && errors.length) {
callback(errors);
return;
}
callback();
},
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.selectedItem && nextProps.selectedItem) {
if (this.props.selectedItem.id !== nextProps.selectedItem.id) {
this.setState({
errors: null,
});
}
}
}
getForm(form, configuration, key, formConfig) {
let component;
const { disabled, icon, extra, help, description, span, max, min, placeholder, valuePropName, required } = formConfig;
let initialValue = configuration[key] || formConfig.default;
let rules = required
? [{ required: true, message: i18next_1.default.t('validation.enter-property', { arg: formConfig.label }) }]
: [];
if (formConfig.rules) {
rules = rules.concat(formConfig.rules);
}
let selectFormItems = null;
switch (formConfig.type) {
case 'text':
component = react_1.default.createElement(antd_1.Input, { disabled: disabled, minLength: min, maxLength: max, placeholder: placeholder });
break;
case 'textarea':
component = react_1.default.createElement(antd_1.Input.TextArea, { disabled: disabled, placeholder: placeholder });
break;
case 'number':
component = react_1.default.createElement(antd_1.InputNumber, { style: { width: '100%' }, disabled: disabled, min: min, max: max });
initialValue = configuration[key];
break;
case 'boolean':
component = react_1.default.createElement(antd_1.Switch, { disabled: disabled });
break;
case 'select':
component = (react_1.default.createElement(antd_1.Select, { placeholder: placeholder, disabled: disabled }, formConfig.items.map((item) => {
if (item.forms && item.value === initialValue) {
selectFormItems = Object.keys(item.forms).map((formKey) => {
return this.getForm(form, configuration, formKey, item.forms[formKey]);
});
}
return (react_1.default.createElement(antd_1.Select.Option, { key: item.value, value: item.value }, item.label));
})));
break;
case 'script':
component = react_1.default.createElement(InputScript_1.default, { onValidate: this.handlers.onValidate, disabled: disabled });
rules.push({ required: true, validator: this.handlers.aceEditorValidator });
break;
case 'template':
component = react_1.default.createElement(InputTemplate_1.default, { showLineNumbers: false, newLineMode: false, disabled: disabled });
break;
case 'templatearea':
component = react_1.default.createElement(InputTemplate_1.default, { height: "120px", disabled: disabled });
break;
case 'json':
component = react_1.default.createElement(InputJson_1.default, { onValidate: this.handlers.onValidate, disabled: disabled });
rules.push({ required: true, validator: this.handlers.aceEditorValidator });
break;
case 'tags':
component = (react_1.default.createElement(antd_1.Select, { mode: "tags", dropdownStyle: { display: 'none' }, placeholder: placeholder, disabled: disabled }, initialValue.map((item) => (react_1.default.createElement(antd_1.Select.Option, { key: item, value: item }, item)))));
break;
case 'custom':
component = (react_1.default.createElement(formConfig.component, { onValidate: this.handlers.onValidate, form: form, configuration: configuration, selectedItem: this.props.selectedItem, workflow: this.props.workflow, disabled: disabled }));
break;
default:
component = react_1.default.createElement(antd_1.Input, { minLength: min, maxLength: max, placeholder: placeholder, disabled: disabled });
}
const label = description && description.length ? (react_1.default.createElement(react_1.default.Fragment, null,
icon ? react_1.default.createElement(Icon_1.default, { name: icon }) : null,
react_1.default.createElement("span", null, formConfig.label),
react_1.default.createElement(antd_1.Tooltip, { title: description, placement: "topRight" },
react_1.default.createElement("span", { style: { float: 'right', marginLeft: 280 } },
react_1.default.createElement(Icon_1.default, { name: "question-circle" }))))) : (react_1.default.createElement(react_1.default.Fragment, null,
icon ? react_1.default.createElement(Icon_1.default, { name: icon }) : null,
react_1.default.createElement("span", null, formConfig.label)));
return (react_1.default.createElement(react_1.default.Fragment, { key: key },
react_1.default.createElement(antd_1.Col, { key: key, span: span || 24 },
react_1.default.createElement(antd_1.Form.Item, { label: label, help: help, extra: extra, colon: false },
react_1.default.createElement(antd_1.Form.Item, { name: `configuration.${key}`, initialValue: initialValue, rules: rules, valuePropName: typeof initialValue === 'boolean' ? 'checked' : valuePropName || 'value' }, component))),
selectFormItems));
}
createForm(canvasRef, form, selectedItem) {
const { configuration, nodeClazz } = selectedItem;
if (!nodeClazz) {
return null;
}
const clazz = (0, exports.getNode)(nodeClazz);
const formConfig = (0, exports.getConfiguration)(clazz);
if ((0, isEmpty_1.default)(formConfig)) {
return null;
}
if ((0, isEmpty_1.default)(configuration)) {
return null;
}
return Object.keys(formConfig).map((key) => {
return this.getForm(form, configuration, key, formConfig[key]);
});
}
render() {
const { selectedItem, form, canvasRef } = this.props;
if (!selectedItem || (0, isEmpty_1.default)(selectedItem)) {
return null;
}
return this.createForm(canvasRef, form, selectedItem);
}
}
NodeConfiguration.propTypes = {
canvasRef: prop_types_1.default.any,
selectedItem: prop_types_1.default.object,
form: prop_types_1.default.object,
workflow: prop_types_1.default.object,
};
exports.default = NodeConfiguration;