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

package/lib/components/FlexStyleSetter/index.js

@@ -1,117 +1,209 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexStyleSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@formily/react");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const designable_react_1 = require("@thienvu18/designable-react");
-const InputItems_1 = require("../InputItems");
-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.FlexStyleSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('@formily/react')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const designable_react_1 = require('@thienvu18/designable-react')
+const InputItems_1 = require('../InputItems')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 exports.FlexStyleSetter = (0, react_1.observer)((props) => {
-    const field = (0, react_1.useField)();
-    const prefix = (0, designable_react_1.usePrefix)('flex-style-setter');
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { vertical: true, children: [(0, jsx_runtime_1.jsx)(react_1.Field, { name: "flexDirection", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexDirectionRow" }),
-                            value: 'row',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexDirectionColumn" }),
-                            value: 'column',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Flex Direction : ${field.value || ''}`;
-                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "flexWrap", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexNoWrap" }),
-                            value: 'nowrap',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexWrap" }),
-                            value: 'wrap',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Flex Wrap : ${field.value || ''}`;
-                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "alignContent", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentSpaceAround" }),
-                            value: 'space-around',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentSpaceBetween" }),
-                            value: 'space-between',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignContentStretch" }),
-                            value: 'stretch',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Align Content : ${field.value || ''}`;
-                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "justifyContent", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifyEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceAround" }),
-                            value: 'space-around',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceBetween" }),
-                            value: 'space-between',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexJustifySpaceEvenly" }),
-                            value: 'space-evenly',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Justify Content : ${field.value || ''}`;
-                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "alignItems", basePath: field.address.parent(), dataSource: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsCenter" }),
-                            value: 'center',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsStart" }),
-                            value: 'flex-start',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsEnd" }),
-                            value: 'flex-end',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsStretch" }),
-                            value: 'stretch',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "FlexAlignItemsBaseline" }),
-                            value: 'baseline',
-                        },
-                    ], reactions: (field) => {
-                        field.decorator[1].title = `Align Items : ${field.value || ''}`;
-                    }, decorator: [InputItems_1.InputItems.Item], component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }] })] }) }));
-});
+  const field = (0, react_1.useField)()
+  const prefix = (0, designable_react_1.usePrefix)('flex-style-setter')
+  return (0, jsx_runtime_1.jsx)('div', {
+    className: (0, classnames_1.default)(prefix, props.className),
+    style: props.style,
+    children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, {
+      vertical: true,
+      children: [
+        (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'flexDirection',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexDirectionRow',
+              }),
+              value: 'row',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexDirectionColumn',
+              }),
+              value: 'column',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Flex Direction : ${field.value || ''}`
+          },
+          decorator: [InputItems_1.InputItems.Item],
+          component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }],
+        }),
+        (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'flexWrap',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexNoWrap',
+              }),
+              value: 'nowrap',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexWrap',
+              }),
+              value: 'wrap',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Flex Wrap : ${field.value || ''}`
+          },
+          decorator: [InputItems_1.InputItems.Item],
+          component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }],
+        }),
+        (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'alignContent',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentCenter',
+              }),
+              value: 'center',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentStart',
+              }),
+              value: 'flex-start',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentEnd',
+              }),
+              value: 'flex-end',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentSpaceAround',
+              }),
+              value: 'space-around',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentSpaceBetween',
+              }),
+              value: 'space-between',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignContentStretch',
+              }),
+              value: 'stretch',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Align Content : ${field.value || ''}`
+          },
+          decorator: [InputItems_1.InputItems.Item],
+          component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }],
+        }),
+        (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'justifyContent',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifyCenter',
+              }),
+              value: 'center',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifyStart',
+              }),
+              value: 'flex-start',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifyEnd',
+              }),
+              value: 'flex-end',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifySpaceAround',
+              }),
+              value: 'space-around',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifySpaceBetween',
+              }),
+              value: 'space-between',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexJustifySpaceEvenly',
+              }),
+              value: 'space-evenly',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Justify Content : ${field.value || ''}`
+          },
+          decorator: [InputItems_1.InputItems.Item],
+          component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }],
+        }),
+        (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'alignItems',
+          basePath: field.address.parent(),
+          dataSource: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignItemsCenter',
+              }),
+              value: 'center',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignItemsStart',
+              }),
+              value: 'flex-start',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignItemsEnd',
+              }),
+              value: 'flex-end',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignItemsStretch',
+              }),
+              value: 'stretch',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'FlexAlignItemsBaseline',
+              }),
+              value: 'baseline',
+            },
+          ],
+          reactions: (field) => {
+            field.decorator[1].title = `Align Items : ${field.value || ''}`
+          },
+          decorator: [InputItems_1.InputItems.Item],
+          component: [formily_antd_v6_1.Radio.Group, { optionType: 'button' }],
+        }),
+      ],
+    }),
+  })
+})

package/lib/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/lib/components/FoldItem/index.js

@@ -1,78 +1,146 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FoldItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const react_2 = require("@formily/react");
-const reactive_1 = require("@formily/reactive");
-const designable_react_1 = require("@thienvu18/designable-react");
-const classnames_1 = __importDefault(require("classnames"));
-require("./styles.less");
-const ExpandedMap = new Map();
-exports.FoldItem = (0, react_2.observer)(({ className, style, children, ...props }) => {
-    const prefix = (0, designable_react_1.usePrefix)('fold-item');
-    const field = (0, react_2.useField)();
-    const expand = (0, react_1.useMemo)(() => reactive_1.observable.ref(ExpandedMap.get(field?.address?.toString() || '')), [field?.address]);
+'use strict'
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        var desc = Object.getOwnPropertyDescriptor(m, k)
+        if (
+          !desc ||
+          ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k]
+            },
+          }
+        }
+        Object.defineProperty(o, k2, desc)
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        o[k2] = m[k]
+      })
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v })
+      }
+    : function (o, v) {
+        o['default'] = v
+      })
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod
+    var result = {}
+    if (mod != null)
+      for (var k in mod)
+        if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k)
+    __setModuleDefault(result, mod)
+    return result
+  }
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.FoldItem = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = __importStar(require('react'))
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const react_2 = require('@formily/react')
+const reactive_1 = require('@formily/reactive')
+const designable_react_1 = require('@thienvu18/designable-react')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
+const ExpandedMap = new Map()
+exports.FoldItem = (0, react_2.observer)(
+  ({ className, style, children, ...props }) => {
+    const prefix = (0, designable_react_1.usePrefix)('fold-item')
+    const field = (0, react_2.useField)()
+    const expand = (0, react_1.useMemo)(
+      () =>
+        reactive_1.observable.ref(
+          ExpandedMap.get(field?.address?.toString() || '')
+        ),
+      [field?.address]
+    )
     const slots = (0, react_1.useRef)({
-        base: null,
-        extra: null,
-    });
-    slots.current = { base: null, extra: null };
+      base: null,
+      extra: null,
+    })
+    slots.current = { base: null, extra: null }
     react_1.default.Children.forEach(children, (node) => {
-        if (react_1.default.isValidElement(node)) {
-            if (node?.type?.displayName === 'FoldItem.Base') {
-                slots.current.base = node.props?.children;
+      if (react_1.default.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 (0, jsx_runtime_1.jsxs)('div', {
+      className: (0, classnames_1.default)(prefix, className),
+      style: style,
+      children: [
+        (0, jsx_runtime_1.jsx)('div', {
+          className: prefix + '-base',
+          onClick: () => {
+            expand.value = !expand.value
+            if (field?.address) {
+              ExpandedMap.set(field.address.toString(), expand.value)
             }
-            if (node?.type?.displayName === 'FoldItem.Extra') {
-                slots.current.extra = node.props?.children;
+          },
+          children: (0, jsx_runtime_1.jsx)(
+            formily_antd_v6_1.FormItem.BaseItem,
+            {
+              ...props,
+              label: (0, jsx_runtime_1.jsxs)('span', {
+                className: (0, classnames_1.default)(prefix + '-title', {
+                  expand: expand.value,
+                }),
+                children: [
+                  slots.current.extra &&
+                    (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                      infer: 'Expand',
+                      size: 10,
+                    }),
+                  props.label,
+                ],
+              }),
+              children: (0, jsx_runtime_1.jsx)('div', {
+                style: { width: '100%' },
+                onClick: (e) => {
+                  e.stopPropagation()
+                },
+                children: slots.current.base,
+              }),
             }
-        }
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: [(0, jsx_runtime_1.jsx)("div", { className: prefix + '-base', onClick: () => {
-                    expand.value = !expand.value;
-                    if (field?.address) {
-                        ExpandedMap.set(field.address.toString(), expand.value);
-                    }
-                }, children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormItem.BaseItem, { ...props, label: (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)(prefix + '-title', {
-                            expand: expand.value,
-                        }), children: [slots.current.extra && (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Expand", size: 10 }), props.label] }), children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, onClick: (e) => {
-                            e.stopPropagation();
-                        }, children: slots.current.base }) }) }), expand.value && slots.current.extra && ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-extra', children: slots.current.extra }))] }));
-});
+          ),
+        }),
+        expand.value &&
+          slots.current.extra &&
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-extra',
+            children: slots.current.extra,
+          }),
+      ],
+    })
+  }
+)
 const Base = () => {
-    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
-};
-Base.displayName = 'FoldItem.Base';
+  return (0, jsx_runtime_1.jsx)(react_1.Fragment, {})
+}
+Base.displayName = 'FoldItem.Base'
 const Extra = () => {
-    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
-};
-Extra.displayName = 'FoldItem.Extra';
-exports.FoldItem.Base = Base;
-exports.FoldItem.Extra = Extra;
+  return (0, jsx_runtime_1.jsx)(react_1.Fragment, {})
+}
+Extra.displayName = 'FoldItem.Extra'
+exports.FoldItem.Base = Base
+exports.FoldItem.Extra = Extra

package/lib/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>