plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
191 lines (190 loc) • 10.3 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 __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());
});
};
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 i18next_1 = __importDefault(require("i18next"));
const prop_types_1 = __importDefault(require("prop-types"));
const antd_1 = require("antd");
const react_json_view_1 = __importDefault(require("react-json-view"));
const flex_1 = require("../flex");
const CommonButton_1 = __importDefault(require("../common/CommonButton"));
const InputJson_1 = __importDefault(require("../common/InputJson"));
const WorkflowSiderContainer_1 = __importDefault(require("./WorkflowSiderContainer"));
const { Option } = antd_1.Select;
const initSelectedVar = {
type: 'text',
key: null,
value: null,
};
const WorkflowGlobalParameters = ({ workflow = {}, onChange }) => {
const [form] = antd_1.Form.useForm();
const [types] = (0, react_1.useState)(['text', 'number', 'boolean', 'json']);
const [vars, setVars] = (0, react_1.useState)(workflow.vars || {});
const [selectedVar, setSelectedVar] = (0, react_1.useState)(initSelectedVar);
const [visible, setVisible] = (0, react_1.useState)(false);
const [isEdit, setIsEdit] = (0, react_1.useState)(false);
const [errors, setErrors] = (0, react_1.useState)(null);
const getComponentByType = (type) => {
switch (type) {
case 'text':
return react_1.default.createElement(antd_1.Input, null);
case 'number':
return react_1.default.createElement(antd_1.InputNumber, null);
case 'boolean':
return react_1.default.createElement(antd_1.Switch, null);
case 'json':
return react_1.default.createElement(InputJson_1.default, { onValidate: setErrors });
default:
return react_1.default.createElement(antd_1.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(i18next_1.default.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: i18next_1.default.t('common.enter-property') }];
if (selectedVar.type === 'json') {
valueRules.push({ validator: valueValidator });
}
return (react_1.default.createElement(WorkflowSiderContainer_1.default, { title: i18next_1.default.t('workflow.variables'), icon: "globe" },
react_1.default.createElement(flex_1.Flex, { justifyContent: "flex-end" },
react_1.default.createElement(CommonButton_1.default, { className: "rde-action-btn", shape: "circle", icon: "plus", onClick: handleAdd }),
react_1.default.createElement(CommonButton_1.default, { className: "rde-action-btn", type: "danger", shape: "circle", icon: "times", onClick: handleClear })),
react_1.default.createElement(antd_1.Divider, { style: { margin: '12px 0' } }),
react_1.default.createElement(antd_1.List, { dataSource: dataSource, renderItem: (variable) => {
var _a;
const type = getType(variable);
const description = type === 'json' ? (react_1.default.createElement(react_json_view_1.default, { src: JSON.parse(variable.value), name: false, enableClipboard: false, displayDataTypes: false, groupArraysAfterLength: 10, collapseStringsAfterLength: 100 })) : (react_1.default.createElement("pre", null, (_a = variable.value) === null || _a === void 0 ? void 0 : _a.toString()));
return (react_1.default.createElement(antd_1.List.Item, { actions: [
react_1.default.createElement(CommonButton_1.default, { key: 1, className: "rde-action-btn", shape: "circle", icon: "edit", onClick: () => handleEdit(variable) }),
react_1.default.createElement(CommonButton_1.default, { key: 2, className: "rde-action-btn", shape: "circle", icon: "trash", onClick: () => handleDelete(variable.key) }),
] },
react_1.default.createElement(antd_1.List.Item.Meta, { title: variable.key, description: description })));
} }),
react_1.default.createElement(antd_1.Modal, { title: isEdit ? i18next_1.default.t('workflow.variables-modify') : i18next_1.default.t('workflow.variables-add'), open: visible, onOk: handleOk, onCancel: () => handleModalVisible(false) },
react_1.default.createElement(antd_1.Form, { form: form, layout: "vertical", initialValues: selectedVar },
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.key'), name: "key", rules: [{ required: true, message: i18next_1.default.t('common.enter-property') }, { validator: keyValidator }] },
react_1.default.createElement(antd_1.Input, null)),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.type') },
react_1.default.createElement(antd_1.Select, { value: selectedVar.type, onChange: handleChangeType, style: { width: '100%' } }, types.map((type) => (react_1.default.createElement(Option, { key: type, value: type }, type))))),
react_1.default.createElement(antd_1.Form.Item, { label: i18next_1.default.t('common.value'), name: "value", rules: valueRules, valuePropName: selectedVar.type === 'boolean' ? 'checked' : 'value' }, getComponentByType(selectedVar.type))))));
};
WorkflowGlobalParameters.propTypes = {
workflow: prop_types_1.default.object,
onChange: prop_types_1.default.func,
};
exports.default = WorkflowGlobalParameters;