jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
78 lines • 2.6 kB
JavaScript
import React from 'react';
import { useField, Field, observer } from 'jjb-lc-formily/react';
import { usePrefix } from 'jjb-lc-designable/react';
import { Select, Input } from 'jjb-lc-formily/antd';
import { FoldItem } from '../FoldItem';
import { ColorInput } from '../ColorInput';
import { BackgroundSizeInput } from '../SizeInput';
import { BackgroundImageInput } from '../ImageInput';
import { InputItems } from '../InputItems';
import cls from 'classnames';
export const BackgroundStyleSetter = observer(props => {
const field = useField();
const prefix = usePrefix('background-style-setter');
return (
/*#__PURE__*/
// @ts-ignore
React.createElement(FoldItem, {
className: cls(prefix, props.className),
label: field.title
}, /*#__PURE__*/React.createElement(FoldItem.Base, null, /*#__PURE__*/React.createElement(Field, {
name: "backgroundColor",
basePath: field.address.parent(),
component: [ColorInput]
})), /*#__PURE__*/React.createElement(FoldItem.Extra, null, /*#__PURE__*/React.createElement(InputItems, null, /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "Image"
}, /*#__PURE__*/React.createElement(Field, {
name: "backgroundImage",
basePath: field.address.parent(),
component: [BackgroundImageInput]
})), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "ImageSize",
width: "50%"
}, /*#__PURE__*/React.createElement(Field, {
name: "backgroundSize",
basePath: field.address.parent(),
component: [BackgroundSizeInput]
})), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "Repeat",
width: "50%"
}, /*#__PURE__*/React.createElement(Field, {
name: "backgroundRepeat",
basePath: field.address.parent(),
component: [Select, {
style: {
width: '100%'
},
placeholder: 'Repeat'
}],
dataSource: [{
label: 'No Repeat',
value: 'no-repeat'
}, {
label: 'Repeat',
value: 'repeat'
}, {
label: 'Repeat X',
value: 'repeat-x'
}, {
label: 'Repeat Y',
value: 'repeat-y'
}, {
label: 'Space',
value: 'space'
}, {
label: 'Round',
value: 'round'
}]
})), /*#__PURE__*/React.createElement(InputItems.Item, {
icon: "Position"
}, /*#__PURE__*/React.createElement(Field, {
name: "backgroundPosition",
basePath: field.address.parent(),
component: [Input, {
placeholder: 'center center'
}]
})))))
);
});