plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
40 lines (39 loc) • 1.92 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Collapse, Form, Empty } from 'antd';
import PropertyDefinition from './PropertyDefinition';
import Scrollbar from '../../common/Scrollbar';
import { Flex } from '../../flex';
import i18n from 'i18next';
const { Panel } = Collapse;
const NodeProperties = ({ canvasRef, selectedItem, onChange }) => {
const [form] = Form.useForm();
useEffect(() => {
form.resetFields();
}, [selectedItem, form]);
const handleValuesChange = (changedValues, allValues) => {
if (onChange && selectedItem) {
onChange(selectedItem, changedValues, allValues);
}
};
const showArrow = false;
return (React.createElement(Scrollbar, null,
React.createElement(Form, { layout: "horizontal", colon: false, form: form, onValuesChange: handleValuesChange },
React.createElement(Collapse, { bordered: false }, selectedItem && PropertyDefinition[selectedItem.type] ? (Object.keys(PropertyDefinition[selectedItem.type]).map((key) => {
return (React.createElement(Panel, { key: key, header: i18n.t(PropertyDefinition[selectedItem.type][key].title), showArrow: showArrow }, PropertyDefinition[selectedItem.type][key].component.render(canvasRef, form, selectedItem)));
})) : (React.createElement(Flex, { justifyContent: "center", alignItems: "center", style: {
width: '100%',
height: '100%',
color: 'rgba(0, 0, 0, 0.45)',
fontSie: 16,
padding: 16,
} },
React.createElement(Empty, { description: i18n.t('placeholder.empty-property') })))))));
};
NodeProperties.propTypes = {
canvasRef: PropTypes.any,
selectedItem: PropTypes.object,
form: PropTypes.object,
onChange: PropTypes.func,
};
export default NodeProperties;