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

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface ICornerInputProps {
-    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 CornerInput: React.FC<ICornerInputProps>;
+export declare const CornerInput: React.FC<ICornerInputProps>

package/esm/components/CornerInput/index.js

@@ -1,22 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { usePrefix } from '@thienvu18/designable-react';
-import cls from 'classnames';
-import './styles.less';
+import { usePrefix } from '@thienvu18/designable-react'
+import cls from 'classnames'
+import { useEffect, useState } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
 export const CornerInput = (props) => {
-    const prefix = usePrefix('corner-input');
-    const [current, setCurrent] = useState(props.value);
-    useEffect(() => {
-        if (!props.value) {
-            setCurrent('all');
-        }
-    }, [props.value]);
-    const createCellProps = (type) => ({
-        className: cls(prefix + '-cell', { active: current === type }),
-        onClick() {
-            setCurrent(type);
-            props.onChange?.(type);
-        },
-    });
-    return (_jsxs("div", { className: cls(prefix, props.className), style: props.style, children: [_jsxs("div", { className: prefix + '-column', children: [_jsx("div", { ...createCellProps('topLeft'), children: "\u250F" }), _jsx("div", { ...createCellProps('bottomLeft'), children: "\u2517" })] }), _jsx("div", { className: prefix + '-column', children: _jsx("div", { ...createCellProps('all'), children: "\u254B" }) }), _jsxs("div", { className: prefix + '-column', children: [_jsx("div", { ...createCellProps('topRight'), children: "\u2513" }), _jsx("div", { ...createCellProps('bottomRight'), children: "\u251B" })] })] }));
-};
+  const prefix = usePrefix('corner-input')
+  const [current, setCurrent] = useState(props.value)
+  useEffect(() => {
+    if (!props.value) {
+      setCurrent('all')
+    }
+  }, [props.value])
+  const createCellProps = (type) => ({
+    className: cls(prefix + '-cell', { active: current === type }),
+    onClick() {
+      setCurrent(type)
+      props.onChange?.(type)
+    },
+  })
+  return _jsxs('div', {
+    className: cls(prefix, props.className),
+    style: props.style,
+    children: [
+      _jsxs('div', {
+        className: prefix + '-column',
+        children: [
+          _jsx('div', { ...createCellProps('topLeft'), children: '\u250F' }),
+          _jsx('div', { ...createCellProps('bottomLeft'), children: '\u2517' }),
+        ],
+      }),
+      _jsx('div', {
+        className: prefix + '-column',
+        children: _jsx('div', {
+          ...createCellProps('all'),
+          children: '\u254B',
+        }),
+      }),
+      _jsxs('div', {
+        className: prefix + '-column',
+        children: [
+          _jsx('div', { ...createCellProps('topRight'), children: '\u2513' }),
+          _jsx('div', {
+            ...createCellProps('bottomRight'),
+            children: '\u251B',
+          }),
+        ],
+      }),
+    ],
+  })
+}

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface IDisplayStyleSetterProps {
-    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 DisplayStyleSetter: React.FC<IDisplayStyleSetterProps>;
+export declare const DisplayStyleSetter: React.FC<IDisplayStyleSetterProps>

package/esm/components/DisplayStyleSetter/index.js

@@ -1,34 +1,63 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, Field, observer } from '@formily/react';
-import { FormItem } from '@thienvu18/formily-antd-v6';
-import { Radio } from 'antd';
-import { usePrefix, IconWidget } from '@thienvu18/designable-react';
-import { FlexStyleSetter } from '../FlexStyleSetter';
-import cls from 'classnames';
-import './styles.less';
+import { Field, observer, useField } from '@formily/react'
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { FormItem } from '@thienvu18/formily-antd-v6'
+import { Radio } from 'antd'
+import cls from 'classnames'
+import {
+  Fragment as _Fragment,
+  jsx as _jsx,
+  jsxs as _jsxs,
+} from 'react/jsx-runtime'
+import { FlexStyleSetter } from '../FlexStyleSetter'
+import './styles.less'
 export const DisplayStyleSetter = observer((props) => {
-    const field = useField();
-    const prefix = usePrefix('display-style-setter');
-    return (_jsxs(_Fragment, { children: [_jsx(FormItem.BaseItem, { label: field.title, className: cls(prefix, props.className), style: props.style, children: _jsx(Radio.Group, { className: prefix + '-radio', options: [
-                        {
-                            label: _jsx(IconWidget, { infer: "DisplayBlock", size: 16 }),
-                            value: 'block',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "DisplayInlineBlock", size: 16 }),
-                            value: 'inline-block',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "DisplayInline", size: 16 }),
-                            value: 'inline',
-                        },
-                        {
-                            label: _jsx(IconWidget, { infer: "DisplayFlex", size: 16 }),
-                            value: 'flex',
-                        },
-                    ], value: props.value, onChange: (e) => {
-                        props.onChange?.(e.target.value);
-                    }, optionType: "button" }) }), _jsx(Field, { name: "flex", basePath: field.address.parent(), visible: false, reactions: (flexField) => {
-                    flexField.visible = field.value === 'flex';
-                }, component: [FlexStyleSetter] })] }));
-});
+  const field = useField()
+  const prefix = usePrefix('display-style-setter')
+  return _jsxs(_Fragment, {
+    children: [
+      _jsx(FormItem.BaseItem, {
+        label: field.title,
+        className: cls(prefix, props.className),
+        style: props.style,
+        children: _jsx(Radio.Group, {
+          className: prefix + '-radio',
+          options: [
+            {
+              label: _jsx(IconWidget, { infer: 'DisplayBlock', size: 16 }),
+              value: 'block',
+            },
+            {
+              label: _jsx(IconWidget, {
+                infer: 'DisplayInlineBlock',
+                size: 16,
+              }),
+              value: 'inline-block',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'DisplayInline', size: 16 }),
+              value: 'inline',
+            },
+            {
+              label: _jsx(IconWidget, { infer: 'DisplayFlex', size: 16 }),
+              value: 'flex',
+            },
+          ],
+          value: props.value,
+          onChange: (e) => {
+            props.onChange?.(e.target.value)
+          },
+          optionType: 'button',
+        }),
+      }),
+      _jsx(Field, {
+        name: 'flex',
+        basePath: field.address.parent(),
+        visible: false,
+        reactions: (flexField) => {
+          flexField.visible = field.value === 'flex'
+        },
+        component: [FlexStyleSetter],
+      }),
+    ],
+  })
+})

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { ButtonProps } from 'antd';
-import './styles.less';
+import { ButtonProps } from 'antd'
+import React from 'react'
+import './styles.less'
 export interface IDrawerSetterProps {
-    text: React.ReactNode;
-    triggerProps: ButtonProps;
+  text: React.ReactNode
+  triggerProps: ButtonProps
 }
-export declare const DrawerSetter: React.FC<IDrawerSetterProps>;
+export declare const DrawerSetter: React.FC<IDrawerSetterProps>

package/esm/components/DrawerSetter/index.js

@@ -1,43 +1,83 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { observer, useField } from '@formily/react';
-import { FormLayout } from '@thienvu18/formily-antd-v6';
-import { IconWidget, usePrefix, useTreeNode } from '@thienvu18/designable-react';
-import { Button } from 'antd';
-import cls from 'classnames';
-import './styles.less';
+import { observer, useField } from '@formily/react'
+import { IconWidget, usePrefix, useTreeNode } from '@thienvu18/designable-react'
+import { FormLayout } from '@thienvu18/formily-antd-v6'
+import { Button } from 'antd'
+import cls from 'classnames'
+import { Fragment, useLayoutEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
 export const DrawerSetter = observer((props) => {
-    const node = useTreeNode();
-    const field = useField();
-    const [visible, setVisible] = useState(false);
-    const [remove, setRemove] = useState(false);
-    const [root, setRoot] = useState();
-    const prefix = usePrefix('drawer-setter');
-    const formWrapperCls = usePrefix('settings-form-wrapper');
-    useLayoutEffect(() => {
-        const wrapper = document.querySelector('.' + formWrapperCls);
-        if (wrapper) {
-            setRoot(wrapper);
-        }
-    }, [node]);
-    const renderDrawer = () => {
-        if (root && visible) {
-            return createPortal(_jsxs("div", { className: cls(prefix, 'animate__animated animate__slideInRight', {
-                    animate__slideOutRight: remove,
-                }), children: [_jsxs("div", { className: prefix + '-header', onClick: handleClose, children: [_jsx(IconWidget, { infer: "Return", size: 18 }), _jsx("span", { className: prefix + '-header-text', children: props.text || field.title })] }), _jsx("div", { className: prefix + '-body', children: _jsx(FormLayout, { colon: false, labelWidth: 120, labelAlign: "left", wrapperAlign: "right", feedbackLayout: "none", tooltipLayout: "text", children: props.children }) })] }), root);
-        }
-        return null;
-    };
-    const handleOpen = () => {
-        setVisible(true);
-    };
-    const handleClose = () => {
-        setRemove(true);
-        setTimeout(() => {
-            setVisible(false);
-            setRemove(false);
-        }, 150);
-    };
-    return (_jsxs(Fragment, { children: [_jsx(Button, { block: true, onClick: handleOpen, ...props.triggerProps, children: props.text || field.title }), renderDrawer()] }));
-});
+  const node = useTreeNode()
+  const field = useField()
+  const [visible, setVisible] = useState(false)
+  const [remove, setRemove] = useState(false)
+  const [root, setRoot] = useState()
+  const prefix = usePrefix('drawer-setter')
+  const formWrapperCls = usePrefix('settings-form-wrapper')
+  useLayoutEffect(() => {
+    const wrapper = document.querySelector('.' + formWrapperCls)
+    if (wrapper) {
+      setRoot(wrapper)
+    }
+  }, [node])
+  const renderDrawer = () => {
+    if (root && visible) {
+      return createPortal(
+        _jsxs('div', {
+          className: cls(prefix, 'animate__animated animate__slideInRight', {
+            animate__slideOutRight: remove,
+          }),
+          children: [
+            _jsxs('div', {
+              className: prefix + '-header',
+              onClick: handleClose,
+              children: [
+                _jsx(IconWidget, { infer: 'Return', size: 18 }),
+                _jsx('span', {
+                  className: prefix + '-header-text',
+                  children: props.text || field.title,
+                }),
+              ],
+            }),
+            _jsx('div', {
+              className: prefix + '-body',
+              children: _jsx(FormLayout, {
+                colon: false,
+                labelWidth: 120,
+                labelAlign: 'left',
+                wrapperAlign: 'right',
+                feedbackLayout: 'none',
+                tooltipLayout: 'text',
+                children: props.children,
+              }),
+            }),
+          ],
+        }),
+        root
+      )
+    }
+    return null
+  }
+  const handleOpen = () => {
+    setVisible(true)
+  }
+  const handleClose = () => {
+    setRemove(true)
+    setTimeout(() => {
+      setVisible(false)
+      setRemove(false)
+    }, 150)
+  }
+  return _jsxs(Fragment, {
+    children: [
+      _jsx(Button, {
+        block: true,
+        onClick: handleOpen,
+        ...props.triggerProps,
+        children: props.text || field.title,
+      }),
+      renderDrawer(),
+    ],
+  })
+})

package/esm/components/DrawerSetter/styles.less

@@ -1,4 +1,3 @@
-
 .dn-drawer-setter {
   position: absolute;
   top: 0;
@@ -17,7 +16,8 @@
     flex-grow: 0;
     padding: 5px 10px;
     color: var(--dn-color-text, rgba(0, 0, 0, 0.88));
-    border-bottom: 1px solid var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
+    border-bottom: 1px solid
+      var(--dn-color-border-secondary, rgba(5, 5, 5, 0.06));
     cursor: pointer;
   }
 

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

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