jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
84 lines • 3.57 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 { useField, observer } from 'jjb-lc-formily/react';
import { usePrefix, IconWidget } from 'jjb-lc-designable/react';
import { FoldItem } from '../FoldItem';
import { SizeInput } from '../SizeInput';
import { InputItems } from '../InputItems';
import cls from 'classnames';
const PositionMap = {
top: 1,
right: 2,
bottom: 3,
left: 4,
all: 1
};
const BoxRex = /([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+)(?:\s+([\d\.]+[^\d\s\.+-]+))?)?)?/;
export const BoxStyleSetter = observer(props => {
const field = useField();
const prefix = usePrefix('box-style-setter');
const createPositionHandler = (position, props) => {
const matched = String(props.value).match(BoxRex) || [];
const value = matched[PositionMap[position]];
const v1 = matched[1];
const v2 = matched[2];
const v3 = matched[3];
const v4 = matched[4];
const allEqualls = v1 === v2 && v2 === v3 && v3 === v4;
return {
...props,
value: position === 'all' ? allEqualls ? v1 : undefined : value,
onChange(value) {
if (position === 'all') {
props.onChange?.(`${value || '0px'} ${value || '0px'} ${value || '0px'} ${value || '0px'}`);
} else {
matched[PositionMap[position]] = value;
props.onChange?.(`${matched[1] || '0px'} ${matched[2] || '0px'} ${matched[3] || '0px'} ${matched[4] || '0px'}`);
}
}
};
};
return /*#__PURE__*/React.createElement(FoldItem, {
className: cls(prefix, props.className),
label: field.title
}, /*#__PURE__*/React.createElement(FoldItem.Base, null, /*#__PURE__*/React.createElement(SizeInput, _extends({}, createPositionHandler('all', props), {
exclude: ['inherit', 'auto']
}))), /*#__PURE__*/React.createElement(FoldItem.Extra, null, /*#__PURE__*/React.createElement(InputItems, {
width: "50%"
}, /*#__PURE__*/React.createElement(InputItems.Item, {
icon: props.labels[0]
}, /*#__PURE__*/React.createElement(SizeInput, _extends({}, createPositionHandler('top', props), {
exclude: ['inherit', 'auto']
}))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: props.labels[1]
}, /*#__PURE__*/React.createElement(SizeInput, _extends({}, createPositionHandler('right', props), {
exclude: ['inherit', 'auto']
}))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: props.labels[2]
}, /*#__PURE__*/React.createElement(SizeInput, _extends({}, createPositionHandler('bottom', props), {
exclude: ['inherit', 'auto']
}))), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: props.labels[3]
}, /*#__PURE__*/React.createElement(SizeInput, _extends({}, createPositionHandler('left', props), {
exclude: ['inherit', 'auto']
}))))));
});
BoxStyleSetter.defaultProps = {
labels: [/*#__PURE__*/React.createElement(IconWidget, {
infer: "Top",
size: 16,
key: "1"
}), /*#__PURE__*/React.createElement(IconWidget, {
infer: "Right",
size: 16,
key: "2"
}), /*#__PURE__*/React.createElement(IconWidget, {
infer: "Bottom",
size: 16,
key: "3"
}), /*#__PURE__*/React.createElement(IconWidget, {
infer: "Left",
size: 16,
key: "4"
})]
};