jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
50 lines • 2.47 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import { usePrefix } from 'jjb-lc-designable/react';
import { useField, observer } from 'jjb-lc-formily/react';
import { FoldItem } from '../FoldItem';
import { ColorInput } from '../ColorInput';
import { SizeInput } from '../SizeInput';
import { InputItems } from '../InputItems';
import cls from 'classnames';
export const BoxShadowStyleSetter = observer(props => {
const field = useField();
const prefix = usePrefix('shadow-style-setter');
const createBoxShadowConnector = position => {
const splited = String(props.value || '').trim().split(' ');
return {
value: splited[position],
onChange: value => {
splited[position] = value;
props.onChange?.(`${splited[0] || ''} ${splited[1] || ''} ${splited[2] || ''} ${splited[3] || ''} ${splited[4] || ''}`);
}
};
};
return (
/*#__PURE__*/
// @ts-ignore
React.createElement(FoldItem, {
className: cls(prefix, props.className),
style: props.style,
label: field.title
}, /*#__PURE__*/React.createElement(FoldItem.Base, null, /*#__PURE__*/React.createElement(ColorInput, createBoxShadowConnector(4))), /*#__PURE__*/React.createElement(FoldItem.Extra, null, /*#__PURE__*/React.createElement(InputItems, {
width: "50%"
}, /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "AxisX"
}, /*#__PURE__*/React.createElement(SizeInput, _extends({
exclude: ['inherit', 'auto']
}, createBoxShadowConnector(0)))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "AxisY"
}, /*#__PURE__*/React.createElement(SizeInput, _extends({
exclude: ['inherit', 'auto']
}, createBoxShadowConnector(1)))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "Blur"
}, /*#__PURE__*/React.createElement(SizeInput, _extends({
exclude: ['inherit', 'auto']
}, createBoxShadowConnector(2)))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "Shadow"
}, /*#__PURE__*/React.createElement(SizeInput, _extends({
exclude: ['inherit', 'auto']
}, createBoxShadowConnector(3)))))))
);
});