hrw-certificate-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
234 lines • 11.1 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 });
const React = __importStar(require("react"));
const i18next_1 = __importDefault(require("i18next"));
const antd_1 = require("antd");
const react_json_view_1 = __importDefault(require("react-json-view"));
const WorkflowSiderContainer_1 = __importDefault(require("./WorkflowSiderContainer"));
const common_1 = require("../../components/common");
const flex_1 = require("../../components/flex");
const initSelectedVar = {
type: 'text',
key: null,
value: null,
};
class WorkflowGlobalParameters extends React.Component {
constructor() {
super(...arguments);
this.state = {
types: ['text', 'number', 'boolean', 'json'],
vars: this.props.workflow.vars || {},
selectedVar: initSelectedVar,
visible: false,
isEdit: false,
errors: null,
};
this.getComponentByType = type => {
switch (type) {
case 'text':
return React.createElement(antd_1.Input, null);
case 'number':
return React.createElement(antd_1.InputNumber, null);
case 'boolean':
return React.createElement(antd_1.Switch, null);
case 'json':
return React.createElement(common_1.InputJson, { onValidate: this.handlers.onValidate });
default:
return React.createElement(antd_1.Input, null);
}
};
this.getType = variable => {
if (typeof variable.value === 'number') {
return 'number';
}
else if (typeof variable.value === 'boolean') {
return 'boolean';
}
else {
if (variable.value.startsWith('{') && variable.value.endsWith('}')) {
return 'json';
}
else {
return 'text';
}
}
};
this.handlers = {
onModalVisible: visible => {
if (visible) {
this.setState({
visible,
}, () => {
this.props.form.resetFields();
});
return;
}
this.setState({
visible,
selectedVar: initSelectedVar,
}, () => {
this.props.form.resetFields();
});
},
onAdd: () => {
this.setState({
isEdit: false,
selectedVar: initSelectedVar,
}, () => {
this.handlers.onModalVisible(true);
});
},
onClear: () => {
this.props.onChange(null, { workflow: { vars: {} } }, null);
this.setState({
vars: {},
selectedVar: initSelectedVar,
});
},
onDelete: key => {
delete this.state.vars[key];
this.props.onChange(null, { workflow: { vars: this.state.vars } }, null);
this.setState({
vars: this.state.vars,
});
},
onEdit: variable => {
variable.type = this.getType(variable);
this.setState({
isEdit: true,
selectedVar: variable,
}, () => {
this.handlers.onModalVisible(true);
});
},
onOk: () => {
this.props.form.validateFields((err, values) => {
if (err) {
return;
}
if (this.state.isEdit) {
delete this.state.vars[this.state.selectedVar.key];
}
const vars = Object.assign({}, this.state.vars, { [values.key]: values.value });
this.setState({
vars,
}, () => {
this.props.onChange(null, { workflow: { vars } }, null);
this.handlers.onModalVisible(false);
});
});
},
onCancel: () => {
this.handlers.onModalVisible(false);
},
onChange: value => {
let newValue = null;
if (value === 'number') {
newValue = 0;
}
else if (value === 'boolean') {
newValue = false;
}
const selectedVar = Object.assign({}, this.state.selectedVar, {
type: value,
value: newValue,
});
this.setState({
selectedVar,
});
},
onValidate: errors => {
this.setState({
errors,
});
},
keyValidator: (rule, value, callback) => {
if (!this.state.isEdit) {
if (this.state.vars[value]) {
callback(i18next_1.default.t('common.enter-exist', { arg: value }));
return false;
}
}
callback();
return true;
},
valueValidator: (rule, value, callback) => {
if (this.state.errors) {
callback(this.state.errors);
return false;
}
callback();
return true;
},
};
}
render() {
const { form } = this.props;
const { vars, selectedVar, visible, isEdit, types } = this.state;
const dataSource = Object.keys(vars).reduce((prev, key) => {
prev.push({ key, value: vars[key] });
return prev;
}, []);
const rules = [{ required: true, message: i18next_1.default.t('common.enter-property') }];
if (selectedVar.type === 'json') {
rules.push({
required: true,
// @ts-ignore
validator: this.handlers.valueValidator,
});
}
return (React.createElement(WorkflowSiderContainer_1.default, { title: i18next_1.default.t('workflow.variables'), icon: "globe" },
React.createElement(flex_1.Flex, { justifyContent: "flex-end" },
React.createElement(common_1.CommonButton, { className: "rde-action-btn", shape: "circle", icon: "plus", onClick: this.handlers.onAdd }),
React.createElement(common_1.CommonButton, { className: "rde-action-btn", type: "danger", shape: "circle", icon: "times", onClick: this.handlers.onClear })),
React.createElement(antd_1.Divider, { style: { margin: '12px 0' } }),
React.createElement(antd_1.List, { dataSource: dataSource, renderItem: variable => {
const actions = [
React.createElement(common_1.CommonButton, { key: "edit", className: "rde-action-btn", shape: "circle", icon: "edit", onClick: () => this.handlers.onEdit(variable) }),
React.createElement(common_1.CommonButton, { key: "delete", className: "rde-action-btn", shape: "circle", icon: "trash", onClick: () => this.handlers.onDelete(variable.key) }),
];
const description = this.getType(variable) === 'json' ? (React.createElement(react_json_view_1.default, { src: JSON.parse(variable.value), name: false, enableClipboard: false, displayDataTypes: false, groupArraysAfterLength: 10, collapseStringsAfterLength: 100 })) : (React.createElement("pre", null, variable.value.toString()));
return (React.createElement(antd_1.List.Item, { actions: actions },
React.createElement(antd_1.List.Item.Meta, { title: variable.key, description: description })));
} }),
React.createElement(antd_1.Modal, { title: isEdit ? i18next_1.default.t('workflow.variables-modify') : i18next_1.default.t('workflow.variables-add'), onOk: this.handlers.onOk, onCancel: this.handlers.onCancel, visible: visible },
React.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.key'), colon: false }, form.getFieldDecorator('key', {
initialValue: selectedVar.key,
rules: [
{ required: true, message: i18next_1.default.t('common.enter-property') },
{ required: true, validator: this.handlers.keyValidator },
],
})(React.createElement(antd_1.Input, null))),
React.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.type'), colon: false },
React.createElement(antd_1.Select, { defaultValue: selectedVar.type, value: selectedVar.type, onChange: this.handlers.onChange, style: { width: '100%' } }, types.map(type => (React.createElement(antd_1.Select.Option, { key: type, value: type }, type))))),
React.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.value'), colon: false }, form.getFieldDecorator('value', {
initialValue: selectedVar.value,
rules,
valuePropName: selectedVar.type === 'boolean' ? 'checked' : 'value',
})(this.getComponentByType(selectedVar.type))))));
}
}
exports.default = antd_1.Form.create()(WorkflowGlobalParameters);
//# sourceMappingURL=WorkflowGlobalParameters.js.map