plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
153 lines (152 loc) • 7.95 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import React, { useState } from 'react';
import i18n from 'i18next';
import PropTypes from 'prop-types';
import { List, Divider, Modal, Form, Input, Select, InputNumber, Switch } from 'antd';
import ReactJson from 'react-json-view';
import { Flex } from '../flex';
import CommonButton from '../common/CommonButton';
import InputJson from '../common/InputJson';
import WorkflowSiderContainer from './WorkflowSiderContainer';
const { Option } = Select;
const initSelectedVar = {
type: 'text',
key: null,
value: null,
};
const WorkflowGlobalParameters = ({ workflow = {}, onChange }) => {
const [form] = Form.useForm();
const [types] = useState(['text', 'number', 'boolean', 'json']);
const [vars, setVars] = useState(workflow.vars || {});
const [selectedVar, setSelectedVar] = useState(initSelectedVar);
const [visible, setVisible] = useState(false);
const [isEdit, setIsEdit] = useState(false);
const [errors, setErrors] = useState(null);
const getComponentByType = (type) => {
switch (type) {
case 'text':
return React.createElement(Input, null);
case 'number':
return React.createElement(InputNumber, null);
case 'boolean':
return React.createElement(Switch, null);
case 'json':
return React.createElement(InputJson, { onValidate: setErrors });
default:
return React.createElement(Input, null);
}
};
const getType = (variable) => {
if (typeof variable.value === 'number')
return 'number';
if (typeof variable.value === 'boolean')
return 'boolean';
if (typeof variable.value === 'string' && variable.value.startsWith('{') && variable.value.endsWith('}'))
return 'json';
return 'text';
};
const handleModalVisible = (show) => {
setVisible(show);
form.resetFields();
if (!show) {
setSelectedVar(initSelectedVar);
}
};
const handleAdd = () => {
setIsEdit(false);
setSelectedVar(initSelectedVar);
handleModalVisible(true);
};
const handleClear = () => {
onChange === null || onChange === void 0 ? void 0 : onChange(null, { workflow: { vars: {} } }, null);
setVars({});
setSelectedVar(initSelectedVar);
};
const handleDelete = (key) => {
const updated = Object.assign({}, vars);
delete updated[key];
setVars(updated);
onChange === null || onChange === void 0 ? void 0 : onChange(null, { workflow: { vars: updated } }, null);
};
const handleEdit = (variable) => {
const type = getType(variable);
setIsEdit(true);
setSelectedVar(Object.assign(Object.assign({}, variable), { type }));
handleModalVisible(true);
};
const handleOk = () => __awaiter(void 0, void 0, void 0, function* () {
try {
const values = yield form.validateFields();
if (isEdit) {
delete vars[selectedVar.key];
}
const updated = Object.assign(Object.assign({}, vars), { [values.key]: values.value });
setVars(updated);
onChange === null || onChange === void 0 ? void 0 : onChange(null, { workflow: { vars: updated } }, null);
handleModalVisible(false);
}
catch (_a) {
// validation error
}
});
const handleChangeType = (value) => {
let newValue = '';
if (value === 'number')
newValue = 0;
else if (value === 'boolean')
newValue = false;
setSelectedVar((prev) => (Object.assign(Object.assign({}, prev), { type: value, value: newValue })));
};
const keyValidator = (_, value) => {
if (!isEdit && vars[value]) {
return Promise.reject(i18n.t('common.enter-exist', { arg: value }));
}
return Promise.resolve();
};
const valueValidator = () => {
if (errors) {
return Promise.reject(errors);
}
return Promise.resolve();
};
const dataSource = Object.keys(vars).map((key) => ({ key, value: vars[key] }));
const valueRules = [{ required: true, message: i18n.t('common.enter-property') }];
if (selectedVar.type === 'json') {
valueRules.push({ validator: valueValidator });
}
return (React.createElement(WorkflowSiderContainer, { title: i18n.t('workflow.variables'), icon: "globe" },
React.createElement(Flex, { justifyContent: "flex-end" },
React.createElement(CommonButton, { className: "rde-action-btn", shape: "circle", icon: "plus", onClick: handleAdd }),
React.createElement(CommonButton, { className: "rde-action-btn", type: "danger", shape: "circle", icon: "times", onClick: handleClear })),
React.createElement(Divider, { style: { margin: '12px 0' } }),
React.createElement(List, { dataSource: dataSource, renderItem: (variable) => {
var _a;
const type = getType(variable);
const description = type === 'json' ? (React.createElement(ReactJson, { src: JSON.parse(variable.value), name: false, enableClipboard: false, displayDataTypes: false, groupArraysAfterLength: 10, collapseStringsAfterLength: 100 })) : (React.createElement("pre", null, (_a = variable.value) === null || _a === void 0 ? void 0 : _a.toString()));
return (React.createElement(List.Item, { actions: [
React.createElement(CommonButton, { key: 1, className: "rde-action-btn", shape: "circle", icon: "edit", onClick: () => handleEdit(variable) }),
React.createElement(CommonButton, { key: 2, className: "rde-action-btn", shape: "circle", icon: "trash", onClick: () => handleDelete(variable.key) }),
] },
React.createElement(List.Item.Meta, { title: variable.key, description: description })));
} }),
React.createElement(Modal, { title: isEdit ? i18n.t('workflow.variables-modify') : i18n.t('workflow.variables-add'), open: visible, onOk: handleOk, onCancel: () => handleModalVisible(false) },
React.createElement(Form, { form: form, layout: "vertical", initialValues: selectedVar },
React.createElement(Form.Item, { label: i18n.t('common.key'), name: "key", rules: [{ required: true, message: i18n.t('common.enter-property') }, { validator: keyValidator }] },
React.createElement(Input, null)),
React.createElement(Form.Item, { label: i18n.t('common.type') },
React.createElement(Select, { value: selectedVar.type, onChange: handleChangeType, style: { width: '100%' } }, types.map((type) => (React.createElement(Option, { key: type, value: type }, type))))),
React.createElement(Form.Item, { label: i18n.t('common.value'), name: "value", rules: valueRules, valuePropName: selectedVar.type === 'boolean' ? 'checked' : 'value' }, getComponentByType(selectedVar.type))))));
};
WorkflowGlobalParameters.propTypes = {
workflow: PropTypes.object,
onChange: PropTypes.func,
};
export default WorkflowGlobalParameters;