plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
33 lines (32 loc) • 1.52 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { Collapse, Form } from 'antd';
import _ from 'lodash';
import PropertyDefinition from './PropertyDefinition';
import Scrollbar from '../../common/Scrollbar';
import i18n from 'i18next';
const { Panel } = Collapse;
const MapProperties = ({ canvasRef, onChange, selectedItem }) => {
const [form] = Form.useForm();
const showArrow = false;
const handleValuesChange = (changedValues, allValues) => {
if (onChange) {
onChange(selectedItem, changedValues, { workarea: allValues });
}
};
if (!canvasRef)
return null;
const activeKey = _.filter(Object.values(PropertyDefinition.map), (mapProps) => mapProps.isActive).map((object) => i18n.t(object.title));
return (React.createElement(Scrollbar, null,
React.createElement(Form, { layout: "horizontal", form: form, onValuesChange: handleValuesChange },
React.createElement(Collapse, { bordered: false, activeKey: activeKey }, Object.keys(PropertyDefinition.map).map((key) => {
const header = i18n.t(PropertyDefinition.map[key].title);
return (React.createElement(Panel, { key: header, header: header, showArrow: showArrow }, PropertyDefinition.map[key].component.render(canvasRef, form, canvasRef.handler.workarea)));
})))));
};
MapProperties.propTypes = {
canvasRef: PropTypes.any,
onChange: PropTypes.func,
selectedItem: PropTypes.object,
};
export default MapProperties;