hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
201 lines • 9.72 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__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 = __importStar(require("react"));
const PropTypes = __importStar(require("prop-types"));
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
const i18next_1 = __importDefault(require("i18next"));
const antd_1 = require("antd");
const index_1 = __importDefault(require("./index"));
const common_1 = require("../../../components/common");
const Icon_1 = __importDefault(require("../../../components/icon/Icon"));
exports.getNode = nodeClazz => {
const classPath = nodeClazz.split('.');
return classPath[classPath.length - 1];
};
exports.getConfiguration = clazz => index_1.default[clazz] || null;
exports.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;
};
class NodeConfiguration extends React.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 = null;
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.createElement(antd_1.Input, { disabled: disabled, minLength: min, maxLength: max, placeholder: placeholder });
break;
case 'textarea':
component = React.createElement(antd_1.Input.TextArea, { disabled: disabled, placeholder: placeholder });
break;
case 'number':
component = React.createElement(antd_1.InputNumber, { style: { width: '100%' }, disabled: disabled, min: min, max: max });
initialValue = configuration[key];
break;
case 'boolean':
component = React.createElement(antd_1.Switch, { disabled: disabled });
break;
case 'select':
component = (React.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.createElement(antd_1.Select.Option, { key: item.value, value: item.value }, item.label));
})));
break;
case 'script':
component = React.createElement(common_1.InputScript, { onValidate: this.handlers.onValidate, disabled: disabled });
// @ts-ignore
rules.push({ required: true, validator: this.handlers.aceEditorValidator });
break;
case 'template':
component = React.createElement(common_1.InputTemplate, { showLineNumbers: false, newLineMode: false, disabled: disabled });
break;
case 'templatearea':
component = React.createElement(common_1.InputTemplate, { height: "120px", disabled: disabled });
break;
case 'json':
component = React.createElement(common_1.InputJson, { onValidate: this.handlers.onValidate, disabled: disabled });
// @ts-ignore
rules.push({ required: true, validator: this.handlers.aceEditorValidator });
break;
case 'tags':
component = (React.createElement(antd_1.Select, { mode: "tags", dropdownStyle: { display: 'none' }, placeholder: placeholder, disabled: disabled }, initialValue.map(item => (React.createElement(antd_1.Select.Option, { key: item, value: item }, item)))));
break;
case 'custom':
component = (React.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.createElement(antd_1.Input, { minLength: min, maxLength: max, placeholder: placeholder, disabled: disabled });
}
const label = description && description.length ? (React.createElement(React.Fragment, null,
icon ? React.createElement(Icon_1.default, { name: icon }) : null,
React.createElement("span", null, formConfig.label),
React.createElement(antd_1.Tooltip, { title: description, placement: "topRight" },
React.createElement("span", { style: { float: 'right', marginLeft: 280 } },
React.createElement(Icon_1.default, { name: "question-circle" }))))) : (React.createElement(React.Fragment, null,
icon ? React.createElement(Icon_1.default, { name: icon }) : null,
React.createElement("span", null, formConfig.label)));
return (React.createElement(React.Fragment, { key: key },
React.createElement(antd_1.Col, { key: key, span: span || 24 },
React.createElement(antd_1.Form.Item, { label: label, help: help, extra: extra, colon: false }, form.getFieldDecorator(`configuration.${key}`, {
initialValue,
rules,
valuePropName: typeof initialValue === 'boolean' ? 'checked' : valuePropName || 'value',
})(component))),
selectFormItems));
}
createForm(canvasRef, form, selectedItem) {
const { configuration, nodeClazz } = selectedItem;
if (!nodeClazz) {
return null;
}
const clazz = exports.getNode(nodeClazz);
const formConfig = exports.getConfiguration(clazz);
if (isEmpty_1.default(formConfig)) {
return null;
}
if (isEmpty_1.default(configuration)) {
return null;
}
const components = Object.keys(formConfig).map(key => {
return this.getForm(form, configuration, key, formConfig[key]);
});
return components;
}
render() {
const { selectedItem, form, canvasRef } = this.props;
if (!selectedItem || isEmpty_1.default(selectedItem)) {
return null;
}
return this.createForm(canvasRef, form, selectedItem);
}
}
exports.default = NodeConfiguration;
NodeConfiguration.propTypes = {
canvasRef: PropTypes.any,
selectedItem: PropTypes.object,
form: PropTypes.object,
workflow: PropTypes.object,
};
//# sourceMappingURL=NodeConfiguration.js.map