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

package/esm/SchemaField.js

@@ -1,42 +1,77 @@
-import { createSchemaField } from '@formily/react';
-import { FormItem, Input, NumberPicker, DatePicker, TimePicker, Select, Radio, Switch, Space, ArrayItems, ArrayTable, FormCollapse, FormGrid, FormLayout, FormTab, } from '@thienvu18/formily-antd-v6';
-import { Slider } from 'antd';
-import { SizeInput, ColorInput, ImageInput, BackgroundImageInput, PositionInput, CornerInput, MonacoInput, ValueInput, BoxStyleSetter, BorderStyleSetter, BorderRadiusStyleSetter, BackgroundStyleSetter, BoxShadowStyleSetter, FontStyleSetter, DisplayStyleSetter, FlexStyleSetter, DrawerSetter, CollapseItem, } from './components';
+import { createSchemaField } from '@formily/react'
+import {
+  ArrayItems,
+  ArrayTable,
+  DatePicker,
+  FormCollapse,
+  FormGrid,
+  FormItem,
+  FormLayout,
+  FormTab,
+  Input,
+  NumberPicker,
+  Radio,
+  Select,
+  Space,
+  Switch,
+  TimePicker,
+} from '@thienvu18/formily-antd-v6'
+import { Slider } from 'antd'
+import {
+  BackgroundImageInput,
+  BackgroundStyleSetter,
+  BorderRadiusStyleSetter,
+  BorderStyleSetter,
+  BoxShadowStyleSetter,
+  BoxStyleSetter,
+  CollapseItem,
+  ColorInput,
+  CornerInput,
+  DisplayStyleSetter,
+  DrawerSetter,
+  FlexStyleSetter,
+  FontStyleSetter,
+  ImageInput,
+  MonacoInput,
+  PositionInput,
+  SizeInput,
+  ValueInput,
+} from './components'
 export const SchemaField = createSchemaField({
-    components: {
-        FormItem,
-        CollapseItem,
-        Input,
-        ValueInput,
-        SizeInput,
-        ColorInput,
-        ImageInput,
-        MonacoInput,
-        PositionInput,
-        CornerInput,
-        BackgroundImageInput,
-        BackgroundStyleSetter,
-        BoxStyleSetter,
-        BorderStyleSetter,
-        BorderRadiusStyleSetter,
-        DisplayStyleSetter,
-        BoxShadowStyleSetter,
-        FlexStyleSetter,
-        FontStyleSetter,
-        DrawerSetter,
-        NumberPicker,
-        DatePicker,
-        TimePicker,
-        Select,
-        Radio,
-        Slider,
-        Switch,
-        Space,
-        ArrayItems,
-        ArrayTable,
-        FormCollapse,
-        FormGrid,
-        FormLayout,
-        FormTab,
-    },
-});
+  components: {
+    FormItem,
+    CollapseItem,
+    Input,
+    ValueInput,
+    SizeInput,
+    ColorInput,
+    ImageInput,
+    MonacoInput,
+    PositionInput,
+    CornerInput,
+    BackgroundImageInput,
+    BackgroundStyleSetter,
+    BoxStyleSetter,
+    BorderStyleSetter,
+    BorderRadiusStyleSetter,
+    DisplayStyleSetter,
+    BoxShadowStyleSetter,
+    FlexStyleSetter,
+    FontStyleSetter,
+    DrawerSetter,
+    NumberPicker,
+    DatePicker,
+    TimePicker,
+    Select,
+    Radio,
+    Slider,
+    Switch,
+    Space,
+    ArrayItems,
+    ArrayTable,
+    FormCollapse,
+    FormGrid,
+    FormLayout,
+    FormTab,
+  },
+})

package/esm/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/esm/SettingsForm.js

@@ -1,54 +1,104 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { createForm } from '@formily/core';
-import { Form } from '@thienvu18/formily-antd-v6';
-import { observer } from '@formily/react';
-import { requestIdle, cancelIdle } from '@thienvu18/designable-shared';
-import { usePrefix, useSelected, useOperation, useSelectedNode, useWorkbench, IconWidget, NodePathWidget, } from '@thienvu18/designable-react';
-import { SchemaField } from './SchemaField';
-import { SettingsFormContext } from './shared/context';
-import { useLocales, useSnapshot } from './effects';
-import { Empty } from 'antd';
-import cls from 'classnames';
-import './styles.less';
+import { createForm } from '@formily/core'
+import { observer } from '@formily/react'
+import {
+  IconWidget,
+  NodePathWidget,
+  useOperation,
+  usePrefix,
+  useSelected,
+  useSelectedNode,
+  useWorkbench,
+} from '@thienvu18/designable-react'
+import { cancelIdle, requestIdle } from '@thienvu18/designable-shared'
+import { Form } from '@thienvu18/formily-antd-v6'
+import { Empty } from 'antd'
+import cls from 'classnames'
+import { useMemo } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { SchemaField } from './SchemaField'
+import { useLocales, useSnapshot } from './effects'
+import { SettingsFormContext } from './shared/context'
+import './styles.less'
 const GlobalState = {
-    idleRequest: null,
-};
-export const SettingsForm = observer((props) => {
-    const workbench = useWorkbench();
-    const currentWorkspace = workbench?.activeWorkspace || workbench?.currentWorkspace;
-    const currentWorkspaceId = currentWorkspace?.id;
-    const operation = useOperation(currentWorkspaceId);
-    const node = useSelectedNode(currentWorkspaceId);
-    const selected = useSelected(currentWorkspaceId);
-    const prefix = usePrefix('settings-form');
-    const schema = node?.designerProps?.propsSchema;
-    const isEmpty = !(node &&
-        node.designerProps?.propsSchema &&
-        selected.length === 1);
+  idleRequest: null,
+}
+export const SettingsForm = observer(
+  (props) => {
+    const workbench = useWorkbench()
+    const currentWorkspace =
+      workbench?.activeWorkspace || workbench?.currentWorkspace
+    const currentWorkspaceId = currentWorkspace?.id
+    const operation = useOperation(currentWorkspaceId)
+    const node = useSelectedNode(currentWorkspaceId)
+    const selected = useSelected(currentWorkspaceId)
+    const prefix = usePrefix('settings-form')
+    const schema = node?.designerProps?.propsSchema
+    const isEmpty = !(
+      node &&
+      node.designerProps?.propsSchema &&
+      selected.length === 1
+    )
     const form = useMemo(() => {
-        return createForm({
-            initialValues: node?.designerProps?.defaultProps,
-            values: node?.props,
-            effects(form) {
-                useLocales(node);
-                useSnapshot(operation);
-                props.effects?.(form);
-            },
-        });
-    }, [node, node?.props, schema, operation, isEmpty]);
+      return createForm({
+        initialValues: node?.designerProps?.defaultProps,
+        values: node?.props,
+        effects(form) {
+          useLocales(node)
+          useSnapshot(operation)
+          props.effects?.(form)
+        },
+      })
+    }, [node, node?.props, schema, operation, isEmpty])
     const render = () => {
-        if (!isEmpty) {
-            return (_jsx("div", { className: cls(prefix, props.className), style: props.style, children: _jsx(SettingsFormContext.Provider, { value: props, children: _jsx(Form, { form: form, colon: false, labelWidth: 120, labelAlign: "left", wrapperAlign: "right", feedbackLayout: "none", tooltipLayout: "text", children: _jsx(SchemaField, { schema: schema, components: props.components, scope: { $node: node, ...props.scope } }) }) }) }, node.id));
-        }
-        return (_jsx("div", { className: prefix + '-empty', children: _jsx(Empty, {}) }));
-    };
-    return (_jsx(IconWidget.Provider, { tooltip: true, children: _jsxs("div", { className: prefix + '-wrapper', children: [!isEmpty && _jsx(NodePathWidget, { workspaceId: currentWorkspaceId }), _jsx("div", { className: prefix + '-content', children: render() })] }) }));
-}, {
+      if (!isEmpty) {
+        return _jsx(
+          'div',
+          {
+            className: cls(prefix, props.className),
+            style: props.style,
+            children: _jsx(SettingsFormContext.Provider, {
+              value: props,
+              children: _jsx(Form, {
+                form: form,
+                colon: false,
+                labelWidth: 120,
+                labelAlign: 'left',
+                wrapperAlign: 'right',
+                feedbackLayout: 'none',
+                tooltipLayout: 'text',
+                children: _jsx(SchemaField, {
+                  schema: schema,
+                  components: props.components,
+                  scope: { $node: node, ...props.scope },
+                }),
+              }),
+            }),
+          },
+          node.id
+        )
+      }
+      return _jsx('div', {
+        className: prefix + '-empty',
+        children: _jsx(Empty, {}),
+      })
+    }
+    return _jsx(IconWidget.Provider, {
+      tooltip: true,
+      children: _jsxs('div', {
+        className: prefix + '-wrapper',
+        children: [
+          !isEmpty && _jsx(NodePathWidget, { workspaceId: currentWorkspaceId }),
+          _jsx('div', { className: prefix + '-content', children: render() }),
+        ],
+      }),
+    })
+  },
+  {
     scheduler: (update) => {
-        cancelIdle(GlobalState.idleRequest);
-        GlobalState.idleRequest = requestIdle(update, {
-            timeout: 500,
-        });
+      cancelIdle(GlobalState.idleRequest)
+      GlobalState.idleRequest = requestIdle(update, {
+        timeout: 500,
+      })
     },
-});
+  }
+)

package/esm/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/esm/components/BackgroundStyleSetter/index.js

@@ -1,43 +1,96 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, Field, observer } from '@formily/react';
-import { usePrefix } from '@thienvu18/designable-react';
-import { Select, Input } from '@thienvu18/formily-antd-v6';
-import { FoldItem } from '../FoldItem';
-import { ColorInput } from '../ColorInput';
-import { BackgroundSizeInput } from '../SizeInput';
-import { BackgroundImageInput } from '../ImageInput';
-import { InputItems } from '../InputItems';
-import cls from 'classnames';
+import { Field, observer, useField } from '@formily/react'
+import { usePrefix } from '@thienvu18/designable-react'
+import { Input, Select } from '@thienvu18/formily-antd-v6'
+import cls from 'classnames'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import { ColorInput } from '../ColorInput'
+import { FoldItem } from '../FoldItem'
+import { BackgroundImageInput } from '../ImageInput'
+import { InputItems } from '../InputItems'
+import { BackgroundSizeInput } from '../SizeInput'
 export const BackgroundStyleSetter = observer((props) => {
-    const field = useField();
-    const prefix = usePrefix('background-style-setter');
-    return (_jsxs(FoldItem, { className: cls(prefix, props.className), label: field.title, children: [_jsx(FoldItem.Base, { children: _jsx(Field, { name: "backgroundColor", basePath: field.address.parent(), component: [ColorInput] }) }), _jsx(FoldItem.Extra, { children: _jsxs(InputItems, { children: [_jsx(InputItems.Item, { icon: "Image", children: _jsx(Field, { name: "backgroundImage", basePath: field.address.parent(), component: [BackgroundImageInput] }) }), _jsx(InputItems.Item, { icon: "ImageSize", width: "50%", children: _jsx(Field, { name: "backgroundSize", basePath: field.address.parent(), component: [BackgroundSizeInput] }) }), _jsx(InputItems.Item, { icon: "Repeat", width: "50%", children: _jsx(Field, { name: "backgroundRepeat", basePath: field.address.parent(), component: [
-                                    Select,
-                                    { style: { width: '100%' }, placeholder: 'Repeat' },
-                                ], dataSource: [
-                                    {
-                                        label: 'No Repeat',
-                                        value: 'no-repeat',
-                                    },
-                                    {
-                                        label: 'Repeat',
-                                        value: 'repeat',
-                                    },
-                                    {
-                                        label: 'Repeat X',
-                                        value: 'repeat-x',
-                                    },
-                                    {
-                                        label: 'Repeat Y',
-                                        value: 'repeat-y',
-                                    },
-                                    {
-                                        label: 'Space',
-                                        value: 'space',
-                                    },
-                                    {
-                                        label: 'Round',
-                                        value: 'round',
-                                    },
-                                ] }) }), _jsx(InputItems.Item, { icon: "Position", children: _jsx(Field, { name: "backgroundPosition", basePath: field.address.parent(), component: [Input, { placeholder: 'center center' }] }) })] }) })] }));
-});
+  const field = useField()
+  const prefix = usePrefix('background-style-setter')
+  return _jsxs(FoldItem, {
+    className: cls(prefix, props.className),
+    label: field.title,
+    children: [
+      _jsx(FoldItem.Base, {
+        children: _jsx(Field, {
+          name: 'backgroundColor',
+          basePath: field.address.parent(),
+          component: [ColorInput],
+        }),
+      }),
+      _jsx(FoldItem.Extra, {
+        children: _jsxs(InputItems, {
+          children: [
+            _jsx(InputItems.Item, {
+              icon: 'Image',
+              children: _jsx(Field, {
+                name: 'backgroundImage',
+                basePath: field.address.parent(),
+                component: [BackgroundImageInput],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'ImageSize',
+              width: '50%',
+              children: _jsx(Field, {
+                name: 'backgroundSize',
+                basePath: field.address.parent(),
+                component: [BackgroundSizeInput],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'Repeat',
+              width: '50%',
+              children: _jsx(Field, {
+                name: 'backgroundRepeat',
+                basePath: field.address.parent(),
+                component: [
+                  Select,
+                  { style: { width: '100%' }, placeholder: 'Repeat' },
+                ],
+                dataSource: [
+                  {
+                    label: 'No Repeat',
+                    value: 'no-repeat',
+                  },
+                  {
+                    label: 'Repeat',
+                    value: 'repeat',
+                  },
+                  {
+                    label: 'Repeat X',
+                    value: 'repeat-x',
+                  },
+                  {
+                    label: 'Repeat Y',
+                    value: 'repeat-y',
+                  },
+                  {
+                    label: 'Space',
+                    value: 'space',
+                  },
+                  {
+                    label: 'Round',
+                    value: 'round',
+                  },
+                ],
+              }),
+            }),
+            _jsx(InputItems.Item, {
+              icon: 'Position',
+              children: _jsx(Field, {
+                name: 'backgroundPosition',
+                basePath: field.address.parent(),
+                component: [Input, { placeholder: 'center center' }],
+              }),
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+})

package/esm/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/esm/components/BorderRadiusStyleSetter/index.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { IconWidget } from '@thienvu18/designable-react';
-import { BoxStyleSetter } from '../BoxStyleSetter';
+import { IconWidget } from '@thienvu18/designable-react'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { BoxStyleSetter } from '../BoxStyleSetter'
 export const BorderRadiusStyleSetter = (props) => {
-    return (_jsx(BoxStyleSetter, { ...props, labels: [
-            _jsx(IconWidget, { infer: "TopLeft", size: 16 }, "1"),
-            _jsx(IconWidget, { infer: "TopRight", size: 16 }, "2"),
-            _jsx(IconWidget, { infer: "BottomRight", size: 16 }, "3"),
-            _jsx(IconWidget, { infer: "BottomLeft", size: 16 }, "4"),
-        ] }));
-};
+  return _jsx(BoxStyleSetter, {
+    ...props,
+    labels: [
+      _jsx(IconWidget, { infer: 'TopLeft', size: 16 }, '1'),
+      _jsx(IconWidget, { infer: 'TopRight', size: 16 }, '2'),
+      _jsx(IconWidget, { infer: 'BottomRight', size: 16 }, '3'),
+      _jsx(IconWidget, { infer: 'BottomLeft', size: 16 }, '4'),
+    ],
+  })
+}

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