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

package/lib/SchemaField.js

@@ -1,45 +1,45 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SchemaField = void 0;
-const react_1 = require("@formily/react");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const antd_1 = require("antd");
-const components_1 = require("./components");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.SchemaField = void 0
+const react_1 = require('@formily/react')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const antd_1 = require('antd')
+const components_1 = require('./components')
 exports.SchemaField = (0, react_1.createSchemaField)({
-    components: {
-        FormItem: formily_antd_v6_1.FormItem,
-        CollapseItem: components_1.CollapseItem,
-        Input: formily_antd_v6_1.Input,
-        ValueInput: components_1.ValueInput,
-        SizeInput: components_1.SizeInput,
-        ColorInput: components_1.ColorInput,
-        ImageInput: components_1.ImageInput,
-        MonacoInput: components_1.MonacoInput,
-        PositionInput: components_1.PositionInput,
-        CornerInput: components_1.CornerInput,
-        BackgroundImageInput: components_1.BackgroundImageInput,
-        BackgroundStyleSetter: components_1.BackgroundStyleSetter,
-        BoxStyleSetter: components_1.BoxStyleSetter,
-        BorderStyleSetter: components_1.BorderStyleSetter,
-        BorderRadiusStyleSetter: components_1.BorderRadiusStyleSetter,
-        DisplayStyleSetter: components_1.DisplayStyleSetter,
-        BoxShadowStyleSetter: components_1.BoxShadowStyleSetter,
-        FlexStyleSetter: components_1.FlexStyleSetter,
-        FontStyleSetter: components_1.FontStyleSetter,
-        DrawerSetter: components_1.DrawerSetter,
-        NumberPicker: formily_antd_v6_1.NumberPicker,
-        DatePicker: formily_antd_v6_1.DatePicker,
-        TimePicker: formily_antd_v6_1.TimePicker,
-        Select: formily_antd_v6_1.Select,
-        Radio: formily_antd_v6_1.Radio,
-        Slider: antd_1.Slider,
-        Switch: formily_antd_v6_1.Switch,
-        Space: formily_antd_v6_1.Space,
-        ArrayItems: formily_antd_v6_1.ArrayItems,
-        ArrayTable: formily_antd_v6_1.ArrayTable,
-        FormCollapse: formily_antd_v6_1.FormCollapse,
-        FormGrid: formily_antd_v6_1.FormGrid,
-        FormLayout: formily_antd_v6_1.FormLayout,
-        FormTab: formily_antd_v6_1.FormTab,
-    },
-});
+  components: {
+    FormItem: formily_antd_v6_1.FormItem,
+    CollapseItem: components_1.CollapseItem,
+    Input: formily_antd_v6_1.Input,
+    ValueInput: components_1.ValueInput,
+    SizeInput: components_1.SizeInput,
+    ColorInput: components_1.ColorInput,
+    ImageInput: components_1.ImageInput,
+    MonacoInput: components_1.MonacoInput,
+    PositionInput: components_1.PositionInput,
+    CornerInput: components_1.CornerInput,
+    BackgroundImageInput: components_1.BackgroundImageInput,
+    BackgroundStyleSetter: components_1.BackgroundStyleSetter,
+    BoxStyleSetter: components_1.BoxStyleSetter,
+    BorderStyleSetter: components_1.BorderStyleSetter,
+    BorderRadiusStyleSetter: components_1.BorderRadiusStyleSetter,
+    DisplayStyleSetter: components_1.DisplayStyleSetter,
+    BoxShadowStyleSetter: components_1.BoxShadowStyleSetter,
+    FlexStyleSetter: components_1.FlexStyleSetter,
+    FontStyleSetter: components_1.FontStyleSetter,
+    DrawerSetter: components_1.DrawerSetter,
+    NumberPicker: formily_antd_v6_1.NumberPicker,
+    DatePicker: formily_antd_v6_1.DatePicker,
+    TimePicker: formily_antd_v6_1.TimePicker,
+    Select: formily_antd_v6_1.Select,
+    Radio: formily_antd_v6_1.Radio,
+    Slider: antd_1.Slider,
+    Switch: formily_antd_v6_1.Switch,
+    Space: formily_antd_v6_1.Space,
+    ArrayItems: formily_antd_v6_1.ArrayItems,
+    ArrayTable: formily_antd_v6_1.ArrayTable,
+    FormCollapse: formily_antd_v6_1.FormCollapse,
+    FormGrid: formily_antd_v6_1.FormGrid,
+    FormLayout: formily_antd_v6_1.FormLayout,
+    FormTab: formily_antd_v6_1.FormTab,
+  },
+})

package/lib/SettingsForm.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { ISettingFormProps } from './types';
-import './styles.less';
-export declare const SettingsForm: React.FC<ISettingFormProps>;
+import React from 'react'
+import './styles.less'
+import { ISettingFormProps } from './types'
+export declare const SettingsForm: React.FC<ISettingFormProps>

package/lib/SettingsForm.js

@@ -1,60 +1,113 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SettingsForm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const core_1 = require("@formily/core");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const react_2 = require("@formily/react");
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const designable_react_1 = require("@thienvu18/designable-react");
-const SchemaField_1 = require("./SchemaField");
-const context_1 = require("./shared/context");
-const effects_1 = require("./effects");
-const antd_1 = require("antd");
-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.SettingsForm = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const core_1 = require('@formily/core')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const react_2 = require('@formily/react')
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const designable_react_1 = require('@thienvu18/designable-react')
+const SchemaField_1 = require('./SchemaField')
+const context_1 = require('./shared/context')
+const effects_1 = require('./effects')
+const antd_1 = require('antd')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 const GlobalState = {
-    idleRequest: null,
-};
-exports.SettingsForm = (0, react_2.observer)((props) => {
-    const workbench = (0, designable_react_1.useWorkbench)();
-    const currentWorkspace = workbench?.activeWorkspace || workbench?.currentWorkspace;
-    const currentWorkspaceId = currentWorkspace?.id;
-    const operation = (0, designable_react_1.useOperation)(currentWorkspaceId);
-    const node = (0, designable_react_1.useSelectedNode)(currentWorkspaceId);
-    const selected = (0, designable_react_1.useSelected)(currentWorkspaceId);
-    const prefix = (0, designable_react_1.usePrefix)('settings-form');
-    const schema = node?.designerProps?.propsSchema;
-    const isEmpty = !(node &&
-        node.designerProps?.propsSchema &&
-        selected.length === 1);
+  idleRequest: null,
+}
+exports.SettingsForm = (0, react_2.observer)(
+  (props) => {
+    const workbench = (0, designable_react_1.useWorkbench)()
+    const currentWorkspace =
+      workbench?.activeWorkspace || workbench?.currentWorkspace
+    const currentWorkspaceId = currentWorkspace?.id
+    const operation = (0, designable_react_1.useOperation)(currentWorkspaceId)
+    const node = (0, designable_react_1.useSelectedNode)(currentWorkspaceId)
+    const selected = (0, designable_react_1.useSelected)(currentWorkspaceId)
+    const prefix = (0, designable_react_1.usePrefix)('settings-form')
+    const schema = node?.designerProps?.propsSchema
+    const isEmpty = !(
+      node &&
+      node.designerProps?.propsSchema &&
+      selected.length === 1
+    )
     const form = (0, react_1.useMemo)(() => {
-        return (0, core_1.createForm)({
-            initialValues: node?.designerProps?.defaultProps,
-            values: node?.props,
-            effects(form) {
-                (0, effects_1.useLocales)(node);
-                (0, effects_1.useSnapshot)(operation);
-                props.effects?.(form);
-            },
-        });
-    }, [node, node?.props, schema, operation, isEmpty]);
+      return (0, core_1.createForm)({
+        initialValues: node?.designerProps?.defaultProps,
+        values: node?.props,
+        effects(form) {
+          ;(0, effects_1.useLocales)(node)
+          ;(0, effects_1.useSnapshot)(operation)
+          props.effects?.(form)
+        },
+      })
+    }, [node, node?.props, schema, operation, isEmpty])
     const render = () => {
-        if (!isEmpty) {
-            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: (0, jsx_runtime_1.jsx)(context_1.SettingsFormContext.Provider, { value: props, children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, { form: form, colon: false, labelWidth: 120, labelAlign: "left", wrapperAlign: "right", feedbackLayout: "none", tooltipLayout: "text", children: (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, { schema: schema, components: props.components, scope: { $node: node, ...props.scope } }) }) }) }, node.id));
-        }
-        return ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-empty', children: (0, jsx_runtime_1.jsx)(antd_1.Empty, {}) }));
-    };
-    return ((0, jsx_runtime_1.jsx)(designable_react_1.IconWidget.Provider, { tooltip: true, children: (0, jsx_runtime_1.jsxs)("div", { className: prefix + '-wrapper', children: [!isEmpty && (0, jsx_runtime_1.jsx)(designable_react_1.NodePathWidget, { workspaceId: currentWorkspaceId }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-content', children: render() })] }) }));
-}, {
+      if (!isEmpty) {
+        return (0, jsx_runtime_1.jsx)(
+          'div',
+          {
+            className: (0, classnames_1.default)(prefix, props.className),
+            style: props.style,
+            children: (0, jsx_runtime_1.jsx)(
+              context_1.SettingsFormContext.Provider,
+              {
+                value: props,
+                children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.Form, {
+                  form: form,
+                  colon: false,
+                  labelWidth: 120,
+                  labelAlign: 'left',
+                  wrapperAlign: 'right',
+                  feedbackLayout: 'none',
+                  tooltipLayout: 'text',
+                  children: (0, jsx_runtime_1.jsx)(SchemaField_1.SchemaField, {
+                    schema: schema,
+                    components: props.components,
+                    scope: { $node: node, ...props.scope },
+                  }),
+                }),
+              }
+            ),
+          },
+          node.id
+        )
+      }
+      return (0, jsx_runtime_1.jsx)('div', {
+        className: prefix + '-empty',
+        children: (0, jsx_runtime_1.jsx)(antd_1.Empty, {}),
+      })
+    }
+    return (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget.Provider, {
+      tooltip: true,
+      children: (0, jsx_runtime_1.jsxs)('div', {
+        className: prefix + '-wrapper',
+        children: [
+          !isEmpty &&
+            (0, jsx_runtime_1.jsx)(designable_react_1.NodePathWidget, {
+              workspaceId: currentWorkspaceId,
+            }),
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-content',
+            children: render(),
+          }),
+        ],
+      }),
+    })
+  },
+  {
     scheduler: (update) => {
-        (0, designable_shared_1.cancelIdle)(GlobalState.idleRequest);
-        GlobalState.idleRequest = (0, designable_shared_1.requestIdle)(update, {
-            timeout: 500,
-        });
+      ;(0, designable_shared_1.cancelIdle)(GlobalState.idleRequest)
+      GlobalState.idleRequest = (0, designable_shared_1.requestIdle)(update, {
+        timeout: 500,
+      })
     },
-});
+  }
+)

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

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

package/lib/components/BackgroundStyleSetter/index.js

@@ -1,49 +1,107 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackgroundStyleSetter = 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 formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const FoldItem_1 = require("../FoldItem");
-const ColorInput_1 = require("../ColorInput");
-const SizeInput_1 = require("../SizeInput");
-const ImageInput_1 = require("../ImageInput");
-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.BackgroundStyleSetter = 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 formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const FoldItem_1 = require('../FoldItem')
+const ColorInput_1 = require('../ColorInput')
+const SizeInput_1 = require('../SizeInput')
+const ImageInput_1 = require('../ImageInput')
+const InputItems_1 = require('../InputItems')
+const classnames_1 = __importDefault(require('classnames'))
 exports.BackgroundStyleSetter = (0, react_1.observer)((props) => {
-    const field = (0, react_1.useField)();
-    const prefix = (0, designable_react_1.usePrefix)('background-style-setter');
-    return ((0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, { className: (0, classnames_1.default)(prefix, props.className), label: field.title, children: [(0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, { children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "backgroundColor", basePath: field.address.parent(), component: [ColorInput_1.ColorInput] }) }), (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, { children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, { children: [(0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "Image", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "backgroundImage", basePath: field.address.parent(), component: [ImageInput_1.BackgroundImageInput] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "ImageSize", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "backgroundSize", basePath: field.address.parent(), component: [SizeInput_1.BackgroundSizeInput] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "Repeat", width: "50%", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "backgroundRepeat", basePath: field.address.parent(), component: [
-                                    formily_antd_v6_1.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',
-                                    },
-                                ] }) }), (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, { icon: "Position", children: (0, jsx_runtime_1.jsx)(react_1.Field, { name: "backgroundPosition", basePath: field.address.parent(), component: [formily_antd_v6_1.Input, { placeholder: 'center center' }] }) })] }) })] }));
-});
+  const field = (0, react_1.useField)()
+  const prefix = (0, designable_react_1.usePrefix)('background-style-setter')
+  return (0, jsx_runtime_1.jsxs)(FoldItem_1.FoldItem, {
+    className: (0, classnames_1.default)(prefix, props.className),
+    label: field.title,
+    children: [
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Base, {
+        children: (0, jsx_runtime_1.jsx)(react_1.Field, {
+          name: 'backgroundColor',
+          basePath: field.address.parent(),
+          component: [ColorInput_1.ColorInput],
+        }),
+      }),
+      (0, jsx_runtime_1.jsx)(FoldItem_1.FoldItem.Extra, {
+        children: (0, jsx_runtime_1.jsxs)(InputItems_1.InputItems, {
+          children: [
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'Image',
+              children: (0, jsx_runtime_1.jsx)(react_1.Field, {
+                name: 'backgroundImage',
+                basePath: field.address.parent(),
+                component: [ImageInput_1.BackgroundImageInput],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'ImageSize',
+              width: '50%',
+              children: (0, jsx_runtime_1.jsx)(react_1.Field, {
+                name: 'backgroundSize',
+                basePath: field.address.parent(),
+                component: [SizeInput_1.BackgroundSizeInput],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'Repeat',
+              width: '50%',
+              children: (0, jsx_runtime_1.jsx)(react_1.Field, {
+                name: 'backgroundRepeat',
+                basePath: field.address.parent(),
+                component: [
+                  formily_antd_v6_1.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',
+                  },
+                ],
+              }),
+            }),
+            (0, jsx_runtime_1.jsx)(InputItems_1.InputItems.Item, {
+              icon: 'Position',
+              children: (0, jsx_runtime_1.jsx)(react_1.Field, {
+                name: 'backgroundPosition',
+                basePath: field.address.parent(),
+                component: [
+                  formily_antd_v6_1.Input,
+                  { placeholder: 'center center' },
+                ],
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from 'react'
 export interface IBorderRadiusStyleSetterProps {
-    value?: string;
-    onChange?: (value: string) => void;
+  value?: string
+  onChange?: (value: string) => void
 }
-export declare const BorderRadiusStyleSetter: React.FC<IBorderRadiusStyleSetterProps>;
+export declare const BorderRadiusStyleSetter: React.FC<IBorderRadiusStyleSetterProps>

package/lib/components/BorderRadiusStyleSetter/index.js

@@ -1,15 +1,34 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderRadiusStyleSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const designable_react_1 = require("@thienvu18/designable-react");
-const BoxStyleSetter_1 = require("../BoxStyleSetter");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.BorderRadiusStyleSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const designable_react_1 = require('@thienvu18/designable-react')
+const BoxStyleSetter_1 = require('../BoxStyleSetter')
 const BorderRadiusStyleSetter = (props) => {
-    return ((0, jsx_runtime_1.jsx)(BoxStyleSetter_1.BoxStyleSetter, { ...props, labels: [
-            (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TopLeft", size: 16 }, "1"),
-            (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "TopRight", size: 16 }, "2"),
-            (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "BottomRight", size: 16 }, "3"),
-            (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "BottomLeft", size: 16 }, "4"),
-        ] }));
-};
-exports.BorderRadiusStyleSetter = BorderRadiusStyleSetter;
+  return (0, jsx_runtime_1.jsx)(BoxStyleSetter_1.BoxStyleSetter, {
+    ...props,
+    labels: [
+      (0, jsx_runtime_1.jsx)(
+        designable_react_1.IconWidget,
+        { infer: 'TopLeft', size: 16 },
+        '1'
+      ),
+      (0, jsx_runtime_1.jsx)(
+        designable_react_1.IconWidget,
+        { infer: 'TopRight', size: 16 },
+        '2'
+      ),
+      (0, jsx_runtime_1.jsx)(
+        designable_react_1.IconWidget,
+        { infer: 'BottomRight', size: 16 },
+        '3'
+      ),
+      (0, jsx_runtime_1.jsx)(
+        designable_react_1.IconWidget,
+        { infer: 'BottomLeft', size: 16 },
+        '4'
+      ),
+    ],
+  })
+}
+exports.BorderRadiusStyleSetter = BorderRadiusStyleSetter

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface IBorderStyleSetterProps {
-    className?: string;
-    style?: React.CSSProperties;
+  className?: string
+  style?: React.CSSProperties
 }
-export declare const BorderStyleSetter: React.FC<IBorderStyleSetterProps>;
+export declare const BorderStyleSetter: React.FC<IBorderStyleSetterProps>