jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
57 lines • 1.77 kB
JavaScript
import React from 'react';
import { useField, Field, observer } from 'jjb-lc-formily/react';
import { FormItem } from 'jjb-lc-formily/antd';
import { Radio } from 'antd';
import { usePrefix, IconWidget } from 'jjb-lc-designable/react';
import { FlexStyleSetter } from '../FlexStyleSetter';
import cls from 'classnames';
import './styles.less';
export const DisplayStyleSetter = observer(props => {
const field = useField();
const prefix = usePrefix('display-style-setter');
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormItem.BaseItem, {
label: field.title,
className: cls(prefix, props.className),
style: props.style
}, /*#__PURE__*/React.createElement(Radio.Group, {
className: prefix + '-radio',
options: [{
label: /*#__PURE__*/React.createElement(IconWidget, {
infer: "DisplayBlock",
size: 16
}),
value: 'block'
}, {
label: /*#__PURE__*/React.createElement(IconWidget, {
infer: "DisplayInlineBlock",
size: 16
}),
value: 'inline-block'
}, {
label: /*#__PURE__*/React.createElement(IconWidget, {
infer: "DisplayInline",
size: 16
}),
value: 'inline'
}, {
label: /*#__PURE__*/React.createElement(IconWidget, {
infer: "DisplayFlex",
size: 16
}),
value: 'flex'
}],
value: props.value,
onChange: e => {
props.onChange?.(e.target.value);
},
optionType: "button"
})), /*#__PURE__*/React.createElement(Field, {
name: "flex",
basePath: field.address.parent(),
visible: false,
reactions: flexField => {
flexField.visible = field.value === 'flex';
},
component: [FlexStyleSetter]
}));
});