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

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface IColorInputProps {
-    value?: string;
-    onChange?: (color: string) => void;
+  value?: string
+  onChange?: (color: string) => void
 }
-export declare const ColorInput: React.FC<IColorInputProps>;
+export declare const ColorInput: React.FC<IColorInputProps>

package/lib/components/ColorInput/index.js

@@ -1,22 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const antd_1 = require("antd");
-const designable_react_1 = require("@thienvu18/designable-react");
-const react_color_1 = require("react-color");
-require("./styles.less");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.ColorInput = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const antd_1 = require('antd')
+const designable_react_1 = require('@thienvu18/designable-react')
+require('./styles.less')
 const ColorInput = (props) => {
-    const container = (0, react_1.useRef)(null);
-    const prefix = (0, designable_react_1.usePrefix)('color-input');
-    const color = props.value;
-    return ((0, jsx_runtime_1.jsx)("div", { ref: container, className: prefix, children: (0, jsx_runtime_1.jsx)(antd_1.Input, { value: props.value, onChange: (e) => {
-                props.onChange?.(e.target.value);
-            }, placeholder: "Color", prefix: (0, jsx_runtime_1.jsx)(antd_1.Popover, { autoAdjustOverflow: true, trigger: "click", styles: { content: { padding: 0 } }, getPopupContainer: () => container.current || document.body, content: (0, jsx_runtime_1.jsx)(react_color_1.SketchPicker, { color: color, onChange: ({ rgb }) => {
-                        props.onChange?.(`rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`);
-                    } }), children: (0, jsx_runtime_1.jsx)("div", { className: prefix + '-color-tips', style: {
-                        backgroundColor: color,
-                    } }) }) }) }));
-};
-exports.ColorInput = ColorInput;
+  const container = (0, react_1.useRef)(null)
+  const prefix = (0, designable_react_1.usePrefix)('color-input')
+  const color = props.value
+  return (0, jsx_runtime_1.jsx)('div', {
+    ref: container,
+    className: prefix,
+    children: (0, jsx_runtime_1.jsx)(antd_1.Input, {
+      value: props.value,
+      onChange: (e) => {
+        props.onChange?.(e.target.value)
+      },
+      placeholder: 'Color',
+      prefix: (0, jsx_runtime_1.jsx)(antd_1.ColorPicker, {
+        value: color,
+        autoAdjustOverflow: true,
+        getPopupContainer: () => container.current || document.body,
+        onChange: (nextColor) => {
+          const { r, g, b, a } = nextColor.toRgb()
+          props.onChange?.(`rgba(${r},${g},${b},${a})`)
+        },
+        children: (0, jsx_runtime_1.jsx)('div', {
+          className: prefix + '-color-tips',
+          style: {
+            backgroundColor: color,
+          },
+        }),
+      }),
+    }),
+  })
+}
+exports.ColorInput = ColorInput

package/lib/components/ColorInput/styles.less

@@ -2,11 +2,6 @@
 .dn-color-input {
   width: 100%;
 
-  .@{ant-prefix}-popover-inner-content {
-    padding: 0 !important;
-    user-select: none;
-  }
-
   &-color-tips {
     width: 20px;
     height: 20px;

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

@@ -1,29 +1,71 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CornerInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const designable_react_1 = require("@thienvu18/designable-react");
-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.CornerInput = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const designable_react_1 = require('@thienvu18/designable-react')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 const CornerInput = (props) => {
-    const prefix = (0, designable_react_1.usePrefix)('corner-input');
-    const [current, setCurrent] = (0, react_1.useState)(props.value);
-    (0, react_1.useEffect)(() => {
-        if (!props.value) {
-            setCurrent('all');
-        }
-    }, [props.value]);
-    const createCellProps = (type) => ({
-        className: (0, classnames_1.default)(prefix + '-cell', { active: current === type }),
-        onClick() {
-            setCurrent(type);
-            props.onChange?.(type);
-        },
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: [(0, jsx_runtime_1.jsxs)("div", { className: prefix + '-column', children: [(0, jsx_runtime_1.jsx)("div", { ...createCellProps('topLeft'), children: "\u250F" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('bottomLeft'), children: "\u2517" })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-column', children: (0, jsx_runtime_1.jsx)("div", { ...createCellProps('all'), children: "\u254B" }) }), (0, jsx_runtime_1.jsxs)("div", { className: prefix + '-column', children: [(0, jsx_runtime_1.jsx)("div", { ...createCellProps('topRight'), children: "\u2513" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('bottomRight'), children: "\u251B" })] })] }));
-};
-exports.CornerInput = CornerInput;
+  const prefix = (0, designable_react_1.usePrefix)('corner-input')
+  const [current, setCurrent] = (0, react_1.useState)(props.value)
+  ;(0, react_1.useEffect)(() => {
+    if (!props.value) {
+      setCurrent('all')
+    }
+  }, [props.value])
+  const createCellProps = (type) => ({
+    className: (0, classnames_1.default)(prefix + '-cell', {
+      active: current === type,
+    }),
+    onClick() {
+      setCurrent(type)
+      props.onChange?.(type)
+    },
+  })
+  return (0, jsx_runtime_1.jsxs)('div', {
+    className: (0, classnames_1.default)(prefix, props.className),
+    style: props.style,
+    children: [
+      (0, jsx_runtime_1.jsxs)('div', {
+        className: prefix + '-column',
+        children: [
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('topLeft'),
+            children: '\u250F',
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('bottomLeft'),
+            children: '\u2517',
+          }),
+        ],
+      }),
+      (0, jsx_runtime_1.jsx)('div', {
+        className: prefix + '-column',
+        children: (0, jsx_runtime_1.jsx)('div', {
+          ...createCellProps('all'),
+          children: '\u254B',
+        }),
+      }),
+      (0, jsx_runtime_1.jsxs)('div', {
+        className: prefix + '-column',
+        children: [
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('topRight'),
+            children: '\u2513',
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('bottomRight'),
+            children: '\u251B',
+          }),
+        ],
+      }),
+    ],
+  })
+}
+exports.CornerInput = CornerInput

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

@@ -1,40 +1,76 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisplayStyleSetter = 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 antd_1 = require("antd");
-const designable_react_1 = require("@thienvu18/designable-react");
-const FlexStyleSetter_1 = require("../FlexStyleSetter");
-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.DisplayStyleSetter = 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 antd_1 = require('antd')
+const designable_react_1 = require('@thienvu18/designable-react')
+const FlexStyleSetter_1 = require('../FlexStyleSetter')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 exports.DisplayStyleSetter = (0, react_1.observer)((props) => {
-    const field = (0, react_1.useField)();
-    const prefix = (0, designable_react_1.usePrefix)('display-style-setter');
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormItem.BaseItem, { label: field.title, className: (0, classnames_1.default)(prefix, props.className), style: props.style, children: (0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { className: prefix + '-radio', options: [
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayBlock", size: 16 }),
-                            value: 'block',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayInlineBlock", size: 16 }),
-                            value: 'inline-block',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayInline", size: 16 }),
-                            value: 'inline',
-                        },
-                        {
-                            label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "DisplayFlex", size: 16 }),
-                            value: 'flex',
-                        },
-                    ], value: props.value, onChange: (e) => {
-                        props.onChange?.(e.target.value);
-                    }, optionType: "button" }) }), (0, jsx_runtime_1.jsx)(react_1.Field, { name: "flex", basePath: field.address.parent(), visible: false, reactions: (flexField) => {
-                    flexField.visible = field.value === 'flex';
-                }, component: [FlexStyleSetter_1.FlexStyleSetter] })] }));
-});
+  const field = (0, react_1.useField)()
+  const prefix = (0, designable_react_1.usePrefix)('display-style-setter')
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [
+      (0, jsx_runtime_1.jsx)(formily_antd_v6_1.FormItem.BaseItem, {
+        label: field.title,
+        className: (0, classnames_1.default)(prefix, props.className),
+        style: props.style,
+        children: (0, jsx_runtime_1.jsx)(antd_1.Radio.Group, {
+          className: prefix + '-radio',
+          options: [
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'DisplayBlock',
+                size: 16,
+              }),
+              value: 'block',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'DisplayInlineBlock',
+                size: 16,
+              }),
+              value: 'inline-block',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'DisplayInline',
+                size: 16,
+              }),
+              value: 'inline',
+            },
+            {
+              label: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: 'DisplayFlex',
+                size: 16,
+              }),
+              value: 'flex',
+            },
+          ],
+          value: props.value,
+          onChange: (e) => {
+            props.onChange?.(e.target.value)
+          },
+          optionType: 'button',
+        }),
+      }),
+      (0, jsx_runtime_1.jsx)(react_1.Field, {
+        name: 'flex',
+        basePath: field.address.parent(),
+        visible: false,
+        reactions: (flexField) => {
+          flexField.visible = field.value === 'flex'
+        },
+        component: [FlexStyleSetter_1.FlexStyleSetter],
+      }),
+    ],
+  })
+})

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

@@ -1,49 +1,100 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawerSetter = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const react_2 = require("@formily/react");
-const formily_antd_v6_1 = require("@thienvu18/formily-antd-v6");
-const designable_react_1 = require("@thienvu18/designable-react");
-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.DrawerSetter = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const react_dom_1 = require('react-dom')
+const react_2 = require('@formily/react')
+const formily_antd_v6_1 = require('@thienvu18/formily-antd-v6')
+const designable_react_1 = require('@thienvu18/designable-react')
+const antd_1 = require('antd')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
 exports.DrawerSetter = (0, react_2.observer)((props) => {
-    const node = (0, designable_react_1.useTreeNode)();
-    const field = (0, react_2.useField)();
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const [remove, setRemove] = (0, react_1.useState)(false);
-    const [root, setRoot] = (0, react_1.useState)();
-    const prefix = (0, designable_react_1.usePrefix)('drawer-setter');
-    const formWrapperCls = (0, designable_react_1.usePrefix)('settings-form-wrapper');
-    (0, react_1.useLayoutEffect)(() => {
-        const wrapper = document.querySelector('.' + formWrapperCls);
-        if (wrapper) {
-            setRoot(wrapper);
-        }
-    }, [node]);
-    const renderDrawer = () => {
-        if (root && visible) {
-            return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, 'animate__animated animate__slideInRight', {
-                    animate__slideOutRight: remove,
-                }), children: [(0, jsx_runtime_1.jsxs)("div", { className: prefix + '-header', onClick: handleClose, children: [(0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Return", size: 18 }), (0, jsx_runtime_1.jsx)("span", { className: prefix + '-header-text', children: props.text || field.title })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-body', children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { block: true, onClick: handleOpen, ...props.triggerProps, children: props.text || field.title }), renderDrawer()] }));
-});
+  const node = (0, designable_react_1.useTreeNode)()
+  const field = (0, react_2.useField)()
+  const [visible, setVisible] = (0, react_1.useState)(false)
+  const [remove, setRemove] = (0, react_1.useState)(false)
+  const [root, setRoot] = (0, react_1.useState)()
+  const prefix = (0, designable_react_1.usePrefix)('drawer-setter')
+  const formWrapperCls = (0, designable_react_1.usePrefix)(
+    'settings-form-wrapper'
+  )
+  ;(0, react_1.useLayoutEffect)(() => {
+    const wrapper = document.querySelector('.' + formWrapperCls)
+    if (wrapper) {
+      setRoot(wrapper)
+    }
+  }, [node])
+  const renderDrawer = () => {
+    if (root && visible) {
+      return (0, react_dom_1.createPortal)(
+        (0, jsx_runtime_1.jsxs)('div', {
+          className: (0, classnames_1.default)(
+            prefix,
+            'animate__animated animate__slideInRight',
+            {
+              animate__slideOutRight: remove,
+            }
+          ),
+          children: [
+            (0, jsx_runtime_1.jsxs)('div', {
+              className: prefix + '-header',
+              onClick: handleClose,
+              children: [
+                (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                  infer: 'Return',
+                  size: 18,
+                }),
+                (0, jsx_runtime_1.jsx)('span', {
+                  className: prefix + '-header-text',
+                  children: props.text || field.title,
+                }),
+              ],
+            }),
+            (0, jsx_runtime_1.jsx)('div', {
+              className: prefix + '-body',
+              children: (0, jsx_runtime_1.jsx)(formily_antd_v6_1.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 (0, jsx_runtime_1.jsxs)(react_1.Fragment, {
+    children: [
+      (0, jsx_runtime_1.jsx)(antd_1.Button, {
+        block: true,
+        onClick: handleOpen,
+        ...props.triggerProps,
+        children: props.text || field.title,
+      }),
+      renderDrawer(),
+    ],
+  })
+})

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