plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
49 lines (48 loc) • 2.81 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Divider, Input } from 'antd';
import i18n from 'i18next';
import { Flex } from '../flex';
import NodeDescriptor from './configuration/NodeDescriptor';
import NodeAction from './configuration/NodeAction';
import NodeConfiguration from './configuration/NodeConfiguration';
import Scrollbar from '../common/Scrollbar';
const WorkflowNodeConfigurations = ({ canvasRef, workflow, selectedItem, onChange }) => {
const [form] = Form.useForm();
// Reset form if selectedItem changes
useEffect(() => {
form.resetFields();
}, [selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id]);
const handleValuesChange = (_, allValues) => {
onChange === null || onChange === void 0 ? void 0 : onChange(selectedItem, _, allValues);
};
return (React.createElement(Scrollbar, null, selectedItem && (React.createElement(Form, { layout: "horizontal", form: form, initialValues: {
name: selectedItem.name,
description: selectedItem.description,
}, onValuesChange: handleValuesChange },
React.createElement(NodeDescriptor, { workflow: workflow, selectedItem: selectedItem }),
React.createElement(Flex, { flexDirection: "column", style: { margin: '8px 16px' } },
React.createElement(Form.Item, { label: i18n.t('common.name'), name: "name", rules: [
{
required: true,
message: i18n.t('validation.enter-property', {
arg: i18n.t('common.name'),
}),
},
] },
React.createElement(Input, { minLength: 0, maxLength: 30, placeholder: i18n.t('workflow.node-name-required') })),
React.createElement(Form.Item, { label: i18n.t('common.description'), name: "description" },
React.createElement(Input.TextArea, { style: { maxHeight: 200 }, placeholder: i18n.t('workflow.node-description-required') }))),
React.createElement(Divider, null, i18n.t('workflow.node-configuration')),
React.createElement(Flex, { flexDirection: "column", style: { height: '100%', overflowY: 'hidden', margin: '8px 16px' } },
React.createElement(NodeConfiguration, { canvasRef: canvasRef, form: form, selectedItem: selectedItem, workflow: workflow })),
React.createElement(NodeAction, { workflow: workflow, selectedItem: selectedItem, canvasRef: canvasRef })))));
};
WorkflowNodeConfigurations.propTypes = {
canvasRef: PropTypes.any,
selectedItem: PropTypes.object,
workflow: PropTypes.object,
descriptors: PropTypes.object,
onChange: PropTypes.func,
};
export default WorkflowNodeConfigurations;