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

package/esm/components/FlexStyleSetter/index.js

@@ -1,111 +1,161 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field, useField, observer } from '@formily/react';
-import { Radio } from '@thienvu18/formily-antd-v6';
-import { usePrefix, IconWidget } from '@thienvu18/designable-react';
-import { InputItems } from '../InputItems';
-import cls from 'classnames';
-import './styles.less';
+import { Field, observer, useField } from '@formily/react'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { Radio } from '@thienvu18/formily-antd-v6'
+import cls from 'classnames'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { InputItems } from '../InputItems'
+import './styles.less'
 export const FlexStyleSetter = observer((props) => {
-    const field = useField();
-    const prefix = usePrefix('flex-style-setter');
-    return (_jsx("div", { className: cls(prefix, props.className), style: props.style, children: _jsxs(InputItems, { vertical: true, children: [_jsx(Field, { name: "flexDirection", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexDirectionRow" }),
-                            value: 'row',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexDirectionColumn" }),
-                            value: 'column',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Flex Direction : ${field.value || ''}`;
-                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "flexWrap", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexNoWrap" }),
-                            value: 'nowrap',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexWrap" }),
-                            value: 'wrap',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Flex Wrap : ${field.value || ''}`;
-                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "alignContent", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentSpaceAround" }),
-                            value: 'space-around',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentSpaceBetween" }),
-                            value: 'space-between',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignContentStretch" }),
-                            value: 'stretch',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Align Content : ${field.value || ''}`;
-                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "justifyContent", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifyCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifyStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifyEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceAround" }),
-                            value: 'space-around',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceBetween" }),
-                            value: 'space-between',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexJustifySpaceEvenly" }),
-                            value: 'space-evenly',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Justify Content : ${field.value || ''}`;
-                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] }), _jsx(Field, { name: "alignItems", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignItemsCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignItemsStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignItemsEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignItemsStretch" }),
-                            value: 'stretch',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "FlexAlignItemsBaseline" }),
-                            value: 'baseline',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Align Items : ${field.value || ''}`;
-                    }, decorator: [InputItems.Item], component: [Radio.Group, { optionType: 'button' }] })] }) }));
-});
+  const field = useField()
+  const prefix = usePrefix('flex-style-setter')
+  return _jsx('div', {
+    className: cls(prefix, props.className),
+    style: props.style,
+    children: _jsxs(InputItems, {
+      vertical: true,
+      children: [
+        _jsx(Field, {
+          name: 'flexDirection',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: _jsx(IconWidget, { infer: 'FlexDirectionRow' }),
+              value: 'row',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexDirectionColumn' }),
+              value: 'column',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Flex Direction : ${field.value || ''}`
+          },
+          decorator: [InputItems.Item],
+          component: [Radio.Group, { optionType: 'button' }],
+        }),
+        _jsx(Field, {
+          name: 'flexWrap',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: _jsx(IconWidget, { infer: 'FlexNoWrap' }),
+              value: 'nowrap',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexWrap' }),
+              value: 'wrap',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Flex Wrap : ${field.value || ''}`
+          },
+          decorator: [InputItems.Item],
+          component: [Radio.Group, { optionType: 'button' }],
+        }),
+        _jsx(Field, {
+          name: 'alignContent',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignContentCenter' }),
+              value: 'center',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignContentStart' }),
+              value: 'flex-start',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignContentEnd' }),
+              value: 'flex-end',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignContentSpaceAround' }),
+              value: 'space-around',
+            },
+            {
+              label: _jsx(IconWidget, {
+                infer: 'FlexAlignContentSpaceBetween',
+              }),
+              value: 'space-between',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignContentStretch' }),
+              value: 'stretch',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Align Content : ${field.value || ''}`
+          },
+          decorator: [InputItems.Item],
+          component: [Radio.Group, { optionType: 'button' }],
+        }),
+        _jsx(Field, {
+          name: 'justifyContent',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifyCenter' }),
+              value: 'center',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifyStart' }),
+              value: 'flex-start',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifyEnd' }),
+              value: 'flex-end',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifySpaceAround' }),
+              value: 'space-around',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifySpaceBetween' }),
+              value: 'space-between',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexJustifySpaceEvenly' }),
+              value: 'space-evenly',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Justify Content : ${field.value || ''}`
+          },
+          decorator: [InputItems.Item],
+          component: [Radio.Group, { optionType: 'button' }],
+        }),
+        _jsx(Field, {
+          name: 'alignItems',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignItemsCenter' }),
+              value: 'center',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignItemsStart' }),
+              value: 'flex-start',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignItemsEnd' }),
+              value: 'flex-end',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignItemsStretch' }),
+              value: 'stretch',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'FlexAlignItemsBaseline' }),
+              value: 'baseline',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Align Items : ${field.value || ''}`
+          },
+          decorator: [InputItems.Item],
+          component: [Radio.Group, { optionType: 'button' }],
+        }),
+      ],
+    }),
+  })
+})

package/esm/components/FoldItem/index.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
-import { IFormItemProps } from '@thienvu18/formily-antd-v6';
-import './styles.less';
-export declare const FoldItem: React.FC<React.PropsWithChildren<IFormItemProps>> & {
-    Base?: React.FC<React.PropsWithChildren<{}>>;
-    Extra?: React.FC<React.PropsWithChildren<{}>>;
-};
+import { IFormItemProps } from '@thienvu18/formily-antd-v6'
+import React from 'react'
+import './styles.less'
+export declare const FoldItem: React.FC<
+  React.PropsWithChildren<IFormItemProps>
+> & {
+  Base?: React.FC<React.PropsWithChildren<{}>>
+  Extra?: React.FC<React.PropsWithChildren<{}>>
+}

package/esm/components/FoldItem/index.js

@@ -1,49 +1,83 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, useRef, useMemo } from 'react';
-import { FormItem } from '@thienvu18/formily-antd-v6';
-import { useField, observer } from '@formily/react';
-import { observable } from '@formily/reactive';
-import { IconWidget, usePrefix } from '@thienvu18/designable-react';
-import cls from 'classnames';
-import './styles.less';
-const ExpandedMap = new Map();
+import { observer, useField } from '@formily/react'
+import { observable } from '@formily/reactive'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { FormItem } from '@thienvu18/formily-antd-v6'
+import cls from 'classnames'
+import React, { Fragment, useMemo, useRef } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
+const ExpandedMap = new Map()
 export const FoldItem = observer(({ className, style, children, ...props }) => {
-    const prefix = usePrefix('fold-item');
-    const field = useField();
-    const expand = useMemo(() => observable.ref(ExpandedMap.get(field?.address?.toString() || '')), [field?.address]);
-    const slots = useRef({
-        base: null,
-        extra: null,
-    });
-    slots.current = { base: null, extra: null };
-    React.Children.forEach(children, (node) => {
-        if (React.isValidElement(node)) {
-            if (node?.type?.displayName === 'FoldItem.Base') {
-                slots.current.base = node.props?.children;
-            }
-            if (node?.type?.displayName === 'FoldItem.Extra') {
-                slots.current.extra = node.props?.children;
-            }
-        }
-    });
-    return (_jsxs("div", { className: cls(prefix, className), style: style, children: [_jsx("div", { className: prefix + '-base', onClick: () => {
-                    expand.value = !expand.value;
-                    if (field?.address) {
-                        ExpandedMap.set(field.address.toString(), expand.value);
-                    }
-                }, children: _jsx(FormItem.BaseItem, { ...props, label: _jsxs("span", { className: cls(prefix + '-title', {
-                            expand: expand.value,
-                        }), children: [slots.current.extra && _jsx(IconWidget, { infer: "Expand", size: 10 }), props.label] }), children: _jsx("div", { style: { width: '100%' }, onClick: (e) => {
-                            e.stopPropagation();
-                        }, children: slots.current.base }) }) }), expand.value && slots.current.extra && (_jsx("div", { className: prefix + '-extra', children: slots.current.extra }))] }));
-});
+  const prefix = usePrefix('fold-item')
+  const field = useField()
+  const expand = useMemo(
+    () => observable.ref(ExpandedMap.get(field?.address?.toString() || '')),
+    [field?.address]
+  )
+  const slots = useRef({
+    base: null,
+    extra: null,
+  })
+  slots.current = { base: null, extra: null }
+  React.Children.forEach(children, (node) => {
+    if (React.isValidElement(node)) {
+      if (node?.type?.displayName === 'FoldItem.Base') {
+        slots.current.base = node.props?.children
+      }
+      if (node?.type?.displayName === 'FoldItem.Extra') {
+        slots.current.extra = node.props?.children
+      }
+    }
+  })
+  return _jsxs('div', {
+    className: cls(prefix, className),
+    style: style,
+    children: [
+      _jsx('div', {
+        className: prefix + '-base',
+        onClick: () => {
+          expand.value = !expand.value
+          if (field?.address) {
+            ExpandedMap.set(field.address.toString(), expand.value)
+          }
+        },
+        children: _jsx(FormItem.BaseItem, {
+          ...props,
+          label: _jsxs('span', {
+            className: cls(prefix + '-title', {
+              expand: expand.value,
+            }),
+            children: [
+              slots.current.extra &&
+                _jsx(IconWidget, { infer: 'Expand', size: 10 }),
+              props.label,
+            ],
+          }),
+          children: _jsx('div', {
+            style: { width: '100%' },
+            onClick: (e) => {
+              e.stopPropagation()
+            },
+            children: slots.current.base,
+          }),
+        }),
+      }),
+      expand.value &&
+        slots.current.extra &&
+        _jsx('div', {
+          className: prefix + '-extra',
+          children: slots.current.extra,
+        }),
+    ],
+  })
+})
 const Base = () => {
-    return _jsx(Fragment, {});
-};
-Base.displayName = 'FoldItem.Base';
+  return _jsx(Fragment, {})
+}
+Base.displayName = 'FoldItem.Base'
 const Extra = () => {
-    return _jsx(Fragment, {});
-};
-Extra.displayName = 'FoldItem.Extra';
-FoldItem.Base = Base;
-FoldItem.Extra = Extra;
+  return _jsx(Fragment, {})
+}
+Extra.displayName = 'FoldItem.Extra'
+FoldItem.Base = Base
+FoldItem.Extra = Extra

package/esm/components/FontStyleSetter/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from 'react'
 export interface IFontStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
+  className?: string
+  style?: React.CSSProperties
 }
-export declare const FontStyleSetter: React.FC<IFontStyleSetterProps>;
+export declare const FontStyleSetter: React.FC<IFontStyleSetterProps>