plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
22 lines (21 loc) • 1.76 kB
JavaScript
import React from 'react';
import { Form, Slider, Switch } from 'antd';
import i18n from 'i18next';
import ColorPicker from '../../common/ColorPicker';
export default {
render(canvasRef, form, data) {
const enabled = data.shadow ? data.shadow.enabled || false : false;
return (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('imagemap.shadow.shadow-enabled'), colon: false, name: "shadow.enabled", initialValue: enabled, valuePropName: "checked" },
React.createElement(Switch, { size: "small" })),
enabled ? (React.createElement(React.Fragment, null,
React.createElement(Form.Item, { label: i18n.t('common.color'), colon: false, name: "shadow.color", initialValue: data.shadow.color || 'rgba(0, 0, 0, 0)' },
React.createElement(ColorPicker, null)),
React.createElement(Form.Item, { label: i18n.t('common.blur'), colon: false, name: "shadow.blur", initialValue: data.shadow.blur || 15, rules: [{ type: 'number', min: 0, max: 100 }] },
React.createElement(Slider, { min: 0, max: 100 })),
React.createElement(Form.Item, { label: i18n.t('imagemap.shadow.offset-x'), colon: false, name: "shadow.offsetX", initialValue: data.shadow.offsetX || 10, rules: [{ type: 'number', min: 0, max: 100 }] },
React.createElement(Slider, { min: 0, max: 100 })),
React.createElement(Form.Item, { label: i18n.t('imagemap.shadow.offset-y'), colon: false, name: "shadow.offsetY", initialValue: data.shadow.offsetY || 10, rules: [{ type: 'number', min: 0, max: 100 }] },
React.createElement(Slider, { min: 0, max: 100 })))) : null));
},
};