@thienvu18/designable-react-settings-form 2.0.1 → 2.0.2

package/lib/components/BorderStyleSetter/index.js

@@ -1,80 +1,144 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderStyleSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const designable_react_1 = require("@thienvu18/designable-react");
-const shared_1 = require("@formily/shared");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const reactive_1 = require("@formily/reactive");
-const react_2 = require("@formily/react");
-const FoldItem_1 = require("../FoldItem");
-const ColorInput_1 = require("../ColorInput");
-const SizeInput_1 = require("../SizeInput");
-const PositionInput_1 = require("../PositionInput");
-const classnames_1 = __importDefault(require("classnames"));
-require("./styles.less");
-const Positions = ['center', 'top', 'right', 'bottom', 'left'];
+'use strict'
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.BorderStyleSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const designable_react_1 = require('@thienvu18/designable-react')
+const shared_1 = require('@formily/shared')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const reactive_1 = require('@formily/reactive')
+const react_2 = require('@formily/react')
+const FoldItem_1 = require('../FoldItem')
+const ColorInput_1 = require('../ColorInput')
+const SizeInput_1 = require('../SizeInput')
+const PositionInput_1 = require('../PositionInput')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
+const Positions = ['center', 'top', 'right', 'bottom', 'left']
 const BorderStyleOptions = [
-    {
-        label: 'None',
-        value: 'none',
-    },
-    {
-        label: (0, jsx_runtime_1.jsx)("span", { className: "border-style-solid-line" }),
-        value: 'solid',
-    },
-    {
-        label: (0, jsx_runtime_1.jsx)("span", { className: "border-style-dashed-line" }),
-        value: 'dashed',
-    },
-    {
-        label: (0, jsx_runtime_1.jsx)("span", { className: "border-style-dotted-line" }),
-        value: 'dotted',
-    },
-];
+  {
+    label: 'None',
+    value: 'none',
+  },
+  {
+    label: (0, jsx_runtime_1.jsx)('span', {
+      className: 'border-style-solid-line',
+    }),
+    value: 'solid',
+  },
+  {
+    label: (0, jsx_runtime_1.jsx)('span', {
+      className: 'border-style-dashed-line',
+    }),
+    value: 'dashed',
+  },
+  {
+    label: (0, jsx_runtime_1.jsx)('span', {
+      className: 'border-style-dotted-line',
+    }),
+    value: 'dotted',
+  },
+]
 const createBorderProp = (position, key) => {
-    const insert = position === 'center' ? '' : `-${position}`;
-    return (0, shared_1.camelCase)(`border${insert}-${key}`);
-};
+  const insert = position === 'center' ? '' : `-${position}`
+  return (0, shared_1.camelCase)(`border${insert}-${key}`)
+}
 const parseInitPosition = (field) => {
-    const basePath = field.address.parent();
-    for (let i = 0; i < Positions.length; i++) {
-        const position = Positions[i];
-        const stylePath = `${basePath}.${createBorderProp(position, 'style')}`;
-        const widthPath = `${basePath}.${createBorderProp(position, 'width')}`;
-        const colorPath = `${basePath}.${createBorderProp(position, 'color')}`;
-        if (field.query(stylePath).value() ||
-            field.query(widthPath).value() ||
-            field.query(colorPath).value()) {
-            return position;
-        }
+  const basePath = field.address.parent()
+  for (let i = 0; i < Positions.length; i++) {
+    const position = Positions[i]
+    const stylePath = `${basePath}.${createBorderProp(position, 'style')}`
+    const widthPath = `${basePath}.${createBorderProp(position, 'width')}`
+    const colorPath = `${basePath}.${createBorderProp(position, 'color')}`
+    if (
+      field.query(stylePath).value() ||
+      field.query(widthPath).value() ||
+      field.query(colorPath).value()
+    ) {
+      return position
     }
-    return 'center';
-};
+  }
+  return 'center'
+}
 exports.BorderStyleSetter = (0, react_2.observer)(({ className, style }) => {
-    const field = (0, react_2.useField)();
-    const currentPosition = (0, react_1.useMemo)(() => (0, reactive_1.observable)({
+  const field = (0, react_2.useField)()
+  const currentPosition = (0, react_1.useMemo)(
+    () =>
+      (0, reactive_1.observable)({
         value: parseInitPosition(field),
-    }), [field.value]);
-    const prefix = (0, designable_react_1.usePrefix)('border-style-setter');
-    const createReaction = (position) => (field) => {
-        field.display = currentPosition.value === position ? 'visible' : 'hidden';
-        if (position !== 'center') {
-            const borderStyle = field.query('.borderStyle').value();
-            const borderWidth = field.query('.borderWidth').value();
-            const borderColor = field.query('.borderColor').value();
-            if (borderStyle || borderWidth || borderColor) {
-                field.value = undefined;
-            }
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem, { label: field.title, children: (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: prefix + '-position', children: (0, jsx_runtime_1.jsx)(PositionInput_1.PositionInput, { value: currentPosition.value, onChange: (value) => {
-                                currentPosition.value = value;
-                            } }) }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-input', children: Positions.map((position, key) => {
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Field, { name: createBorderProp(position, 'style'), basePath: field.address.parent(), dataSource: BorderStyleOptions, reactions: createReaction(position), component: [formily_antd_v6_1.Select, { placeholder: 'Please Select' }] }), (0, jsx_runtime_1.jsx)(react_2.Field, { name: createBorderProp(position, 'width'), basePath: field.address.parent(), reactions: createReaction(position), component: [SizeInput_1.SizeInput, { exclude: ['auto'] }] }), (0, jsx_runtime_1.jsx)(react_2.Field, { name: createBorderProp(position, 'color'), basePath: field.address.parent(), reactions: createReaction(position), component: [ColorInput_1.ColorInput] })] }, key));
-                        }) })] }) }) }));
-});
+      }),
+    [field.value]
+  )
+  const prefix = (0, designable_react_1.usePrefix)('border-style-setter')
+  const createReaction = (position) => (field) => {
+    field.display = currentPosition.value === position ? 'visible' : 'hidden'
+    if (position !== 'center') {
+      const borderStyle = field.query('.borderStyle').value()
+      const borderWidth = field.query('.borderWidth').value()
+      const borderColor = field.query('.borderColor').value()
+      if (borderStyle || borderWidth || borderColor) {
+        field.value = undefined
+      }
+    }
+  }
+  return (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem, {
+    label: field.title,
+    children: (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, {
+      children: (0, jsx_runtime_1.jsxs)('div', {
+        className: (0, classnames_1.default)(prefix, className),
+        style: style,
+        children: [
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-position',
+            children: (0, jsx_runtime_1.jsx)(PositionInput_1.PositionInput, {
+              value: currentPosition.value,
+              onChange: (value) => {
+                currentPosition.value = value
+              },
+            }),
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-input',
+            children: Positions.map((position, key) => {
+              return (0, jsx_runtime_1.jsxs)(
+                react_1.Fragment,
+                {
+                  children: [
+                    (0, jsx_runtime_1.jsx)(react_2.Field, {
+                      name: createBorderProp(position, 'style'),
+                      basePath: field.address.parent(),
+                      dataSource: BorderStyleOptions,
+                      reactions: createReaction(position),
+                      component: [
+                        formily_antd_v6_1.Select,
+                        { placeholder: 'Please Select' },
+                      ],
+                    }),
+                    (0, jsx_runtime_1.jsx)(react_2.Field, {
+                      name: createBorderProp(position, 'width'),
+                      basePath: field.address.parent(),
+                      reactions: createReaction(position),
+                      component: [SizeInput_1.SizeInput, { exclude: ['auto'] }],
+                    }),
+                    (0, jsx_runtime_1.jsx)(react_2.Field, {
+                      name: createBorderProp(position, 'color'),
+                      basePath: field.address.parent(),
+                      reactions: createReaction(position),
+                      component: [ColorInput_1.ColorInput],
+                    }),
+                  ],
+                },
+                key
+              )
+            }),
+          }),
+        ],
+      }),
+    }),
+  })
+})

package/lib/components/BoxShadowStyleSetter/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 export interface IBoxShadowStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
-    value?: string;
-    onChange?: (value: string) => void;
+  className?: string
+  style?: React.CSSProperties
+  value?: string
+  onChange?: (value: string) => void
 }
-export declare const BoxShadowStyleSetter: React.FC<IBoxShadowStyleSetterProps>;
+export declare const BoxShadowStyleSetter: React.FC<IBoxShadowStyleSetterProps>

package/lib/components/BoxShadowStyleSetter/index.js

@@ -1,31 +1,83 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxShadowStyleSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const designable_react_1 = require("@thienvu18/designable-react");
-const react_1 = require("@formily/react");
-const FoldItem_1 = require("../FoldItem");
-const ColorInput_1 = require("../ColorInput");
-const SizeInput_1 = require("../SizeInput");
-const InputItems_1 = require("../InputItems");
-const classnames_1 = __importDefault(require("classnames"));
+'use strict'
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.BoxShadowStyleSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const designable_react_1 = require('@thienvu18/designable-react')
+const react_1 = require('@formily/react')
+const FoldItem_1 = require('../FoldItem')
+const ColorInput_1 = require('../ColorInput')
+const SizeInput_1 = require('../SizeInput')
+const InputItems_1 = require('../InputItems')
+const classnames_1 = __importDefault(require('classnames'))
 exports.BoxShadowStyleSetter = (0, react_1.observer)((props) => {
-    const field = (0, react_1.useField)();
-    const prefix = (0, designable_react_1.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 ((0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, { className: (0, classnames_1.default)(prefix, props.className), style: props.style, label: field.title, children: [(0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, { children: (0, jsx_runtime_1.jsx)(ColorInput_1.ColorInput, { ...createBoxShadowConnector(4) }) }), (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { width: "50%", children: [(0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "AxisX", children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(0) }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "AxisY", children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(1) }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "Blur", children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(2) }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "Shadow", children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { exclude: ['inherit', 'auto'], ...createBoxShadowConnector(3) }) })] }) })] }));
-});
+  const field = (0, react_1.useField)()
+  const prefix = (0, designable_react_1.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 (0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, {
+    className: (0, classnames_1.default)(prefix, props.className),
+    style: props.style,
+    label: field.title,
+    children: [
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, {
+        children: (0, jsx_runtime_1.jsx)(ColorInput_1.ColorInput, {
+          ...createBoxShadowConnector(4),
+        }),
+      }),
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, {
+        children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, {
+          width: '50%',
+          children: [
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'AxisX',
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(0),
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'AxisY',
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(1),
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'Blur',
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(2),
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'Shadow',
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                exclude: ['inherit', 'auto'],
+                ...createBoxShadowConnector(3),
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

package/lib/components/BoxStyleSetter/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 export interface IMarginStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
-    labels?: React.ReactNode[];
-    value?: string;
-    onChange?: (value: string) => void;
+  className?: string
+  style?: React.CSSProperties
+  labels?: React.ReactNode[]
+  value?: string
+  onChange?: (value: string) => void
 }
-export declare const BoxStyleSetter: React.FC<IMarginStyleSetterProps>;
+export declare const BoxStyleSetter: React.FC<IMarginStyleSetterProps>

package/lib/components/BoxStyleSetter/index.js

@@ -1,55 +1,125 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxStyleSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@formily/react");
-const designable_react_1 = require("@thienvu18/designable-react");
-const FoldItem_1 = require("../FoldItem");
-const SizeInput_1 = require("../SizeInput");
-const InputItems_1 = require("../InputItems");
-const classnames_1 = __importDefault(require("classnames"));
+'use strict'
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.BoxStyleSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('@formily/react')
+const designable_react_1 = require('@thienvu18/designable-react')
+const FoldItem_1 = require('../FoldItem')
+const SizeInput_1 = require('../SizeInput')
+const InputItems_1 = require('../InputItems')
+const classnames_1 = __importDefault(require('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\.+-]+))?)?)?/;
+  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\.+-]+))?)?)?/
 const defaultLabels = [
-    (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Top", size: 16 }, "1"),
-    (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Right", size: 16 }, "2"),
-    (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Bottom", size: 16 }, "3"),
-    (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Left", size: 16 }, "4"),
-];
+  (0, jsx_runtime_1.jsx)(
+    designable_react_1.IconWidget,
+    { infer: 'Top', size: 16 },
+    '1'
+  ),
+  (0, jsx_runtime_1.jsx)(
+    designable_react_1.IconWidget,
+    { infer: 'Right', size: 16 },
+    '2'
+  ),
+  (0, jsx_runtime_1.jsx)(
+    designable_react_1.IconWidget,
+    { infer: 'Bottom', size: 16 },
+    '3'
+  ),
+  (0, jsx_runtime_1.jsx)(
+    designable_react_1.IconWidget,
+    { infer: 'Left', size: 16 },
+    '4'
+  ),
+]
 exports.BoxStyleSetter = (0, react_1.observer)((props) => {
-    const { labels = defaultLabels, className } = props;
-    const field = (0, react_1.useField)();
-    const prefix = (0, designable_react_1.usePrefix)('box-style-setter');
-    const createPositionHandler = (position, setterProps) => {
-        const matched = String(setterProps.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 {
-            ...setterProps,
-            value: position === 'all' ? (allEqualls ? v1 : undefined) : value,
-            onChange(val) {
-                if (position === 'all') {
-                    setterProps.onChange?.(`${val || '0px'} ${val || '0px'} ${val || '0px'} ${val || '0px'}`);
-                }
-                else {
-                    matched[PositionMap[position]] = val;
-                    setterProps.onChange?.(`${matched[1] || '0px'} ${matched[2] || '0px'} ${matched[3] || '0px'} ${matched[4] || '0px'}`);
-                }
-            },
-        };
-    };
-    return ((0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, { className: (0, classnames_1.default)(prefix, className), label: field.title, children: [(0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, { children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { ...createPositionHandler('all', props), exclude: ['inherit', 'auto'] }) }), (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { width: "50%", children: [(0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: labels[0], children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { ...createPositionHandler('top', props), exclude: ['inherit', 'auto'] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: labels[1], children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { ...createPositionHandler('right', props), exclude: ['inherit', 'auto'] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: labels[2], children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { ...createPositionHandler('bottom', props), exclude: ['inherit', 'auto'] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: labels[3], children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, { ...createPositionHandler('left', props), exclude: ['inherit', 'auto'] }) })] }) })] }));
-});
+  const { labels = defaultLabels, className } = props
+  const field = (0, react_1.useField)()
+  const prefix = (0, designable_react_1.usePrefix)('box-style-setter')
+  const createPositionHandler = (position, setterProps) => {
+    const matched = String(setterProps.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 {
+      ...setterProps,
+      value: position === 'all' ? (allEqualls ? v1 : undefined) : value,
+      onChange(val) {
+        if (position === 'all') {
+          setterProps.onChange?.(
+            `${val || '0px'} ${val || '0px'} ${val || '0px'} ${val || '0px'}`
+          )
+        } else {
+          matched[PositionMap[position]] = val
+          setterProps.onChange?.(
+            `${matched[1] || '0px'} ${matched[2] || '0px'} ${
+              matched[3] || '0px'
+            } ${matched[4] || '0px'}`
+          )
+        }
+      },
+    }
+  }
+  return (0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, {
+    className: (0, classnames_1.default)(prefix, className),
+    label: field.title,
+    children: [
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, {
+        children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+          ...createPositionHandler('all', props),
+          exclude: ['inherit', 'auto'],
+        }),
+      }),
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, {
+        children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, {
+          width: '50%',
+          children: [
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: labels[0],
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                ...createPositionHandler('top', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: labels[1],
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                ...createPositionHandler('right', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: labels[2],
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                ...createPositionHandler('bottom', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: labels[3],
+              children: (0, jsx_runtime_1.jsx)(SizeInput_1.SizeInput, {
+                ...createPositionHandler('left', props),
+                exclude: ['inherit', 'auto'],
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

package/lib/components/CollapseItem/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface ICollapseItemProps {
-    className?: string;
-    style?: React.CSSProperties;
-    defaultExpand?: boolean;
+  className?: string
+  style?: React.CSSProperties
+  defaultExpand?: boolean
 }
-export declare const CollapseItem: React.FC<ICollapseItemProps>;
+export declare const CollapseItem: React.FC<ICollapseItemProps>

package/lib/components/CollapseItem/index.js

@@ -1,22 +1,50 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapseItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@formily/react");
-const designable_react_1 = require("@thienvu18/designable-react");
-const classnames_1 = __importDefault(require("classnames"));
-require("./styles.less");
+'use strict'
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.CollapseItem = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const react_2 = require('@formily/react')
+const designable_react_1 = require('@thienvu18/designable-react')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 exports.CollapseItem = (0, react_2.observer)((props) => {
-    const prefix = (0, designable_react_1.usePrefix)('collapse-item');
-    const field = (0, react_2.useField)();
-    const [expand, setExpand] = (0, react_1.useState)(props.defaultExpand ?? true);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, props.className, { expand }), style: props.style, children: [(0, jsx_runtime_1.jsxs)("div", { className: prefix + '-header', onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    setExpand(!expand);
-                }, children: [(0, jsx_runtime_1.jsx)("div", { className: prefix + '-header-expand', children: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Expand", size: 10 }) }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-header-content', children: field.title })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-content', children: props.children })] }));
-});
+  const prefix = (0, designable_react_1.usePrefix)('collapse-item')
+  const field = (0, react_2.useField)()
+  const [expand, setExpand] = (0, react_1.useState)(props.defaultExpand ?? true)
+  return (0, jsx_runtime_1.jsxs)('div', {
+    className: (0, classnames_1.default)(prefix, props.className, { expand }),
+    style: props.style,
+    children: [
+      (0, jsx_runtime_1.jsxs)('div', {
+        className: prefix + '-header',
+        onClick: (e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          setExpand(!expand)
+        },
+        children: [
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-header-expand',
+            children: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+              infer: 'Expand',
+              size: 10,
+            }),
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-header-content',
+            children: field.title,
+          }),
+        ],
+      }),
+      (0, jsx_runtime_1.jsx)('div', {
+        className: prefix + '-content',
+        children: props.children,
+      }),
+    ],
+  })
+})