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

package/esm/components/PolyInput/index.js

@@ -1,70 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState, useRef } from 'react';
-import { Button } from 'antd';
-import { usePrefix, IconWidget } from '@thienvu18/designable-react';
-import cls from 'classnames';
-import './styles.less';
-const isValid = (val) => val !== undefined && val !== null;
+import { IconWidget, usePrefix } from '@thienvu18/designable-react'
+import { Button } from 'antd'
+import cls from 'classnames'
+import React, { useEffect, useRef, useState } from 'react'
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime'
+import './styles.less'
+const isValid = (val) => val !== undefined && val !== null
 const getEventValue = (event) => {
-    if (event?.target) {
-        if (isValid(event.target.value))
-            return event.target.value;
-        if (isValid(event.target.checked))
-            return event.target.checked;
-        return;
-    }
-    return event;
-};
+  if (event?.target) {
+    if (isValid(event.target.value)) return event.target.value
+    if (isValid(event.target.checked)) return event.target.checked
+    return
+  }
+  return event
+}
 const createTypes = (types, exclude, include) => {
-    return types.filter(({ type }) => {
-        if (Array.isArray(include) && include.length) {
-            return include.includes(type);
-        }
-        if (Array.isArray(exclude) && exclude.length) {
-            return !exclude.includes(type);
-        }
-        return true;
-    });
-};
+  return types.filter(({ type }) => {
+    if (Array.isArray(include) && include.length) {
+      return include.includes(type)
+    }
+    if (Array.isArray(exclude) && exclude.length) {
+      return !exclude.includes(type)
+    }
+    return true
+  })
+}
 export function createPolyInput(polyTypes = []) {
-    return ({ className, style, value, onChange, exclude, include, ...props }) => {
-        const prefix = usePrefix('poly-input');
-        const types = createTypes(polyTypes, exclude, include);
-        const [current, setCurrent] = useState(types[0]?.type);
-        const type = types?.find(({ type }) => type === current);
-        const component = type?.component;
-        const typesValue = useRef({});
-        useEffect(() => {
-            types?.forEach(({ checker, type }) => {
-                if (checker(value)) {
-                    setCurrent(type);
-                }
-            });
-        }, [value]);
-        const getNextType = () => {
-            const currentIndex = types?.findIndex(({ type }) => type === current);
-            const nextIndex = currentIndex + 1 > types?.length - 1 ? 0 : currentIndex + 1;
-            return types[nextIndex];
-        };
-        const transformOnChangeValue = (value, type) => {
-            return type?.toChangeValue ? type?.toChangeValue(value) : value;
-        };
-        return (_jsxs("div", { className: cls(prefix, className), style: style, children: [component && (_jsx("div", { className: prefix + '-content', children: React.createElement(component, {
-                        ...props,
-                        value: type?.toInputValue ? type?.toInputValue(value) : value,
-                        onChange: (event) => {
-                            const value = getEventValue(event);
-                            typesValue.current[type?.type] = value;
-                            onChange?.(transformOnChangeValue(value, type));
-                        },
-                    }) })), _jsx(Button, { className: prefix + '-controller', style: {
-                        width: !component ? '100%' : 'auto',
-                    }, block: true, onClick: () => {
-                        const nextType = getNextType();
-                        if (nextType === type)
-                            return;
-                        setCurrent(nextType?.type);
-                        onChange?.(transformOnChangeValue(typesValue.current[nextType?.type], nextType));
-                    }, children: type?.icon ? (_jsx(IconWidget, { infer: type.icon })) : (type?.title || type?.type) })] }));
-    };
+  return ({
+    className,
+    style,
+    value,
+    onChange,
+    exclude,
+    include,
+    ...props
+  }) => {
+    const prefix = usePrefix('poly-input')
+    const types = createTypes(polyTypes, exclude, include)
+    const [current, setCurrent] = useState(types[0]?.type)
+    const type = types?.find(({ type }) => type === current)
+    const component = type?.component
+    const typesValue = useRef({})
+    useEffect(() => {
+      types?.forEach(({ checker, type }) => {
+        if (checker(value)) {
+          setCurrent(type)
+        }
+      })
+    }, [value])
+    const getNextType = () => {
+      const currentIndex = types?.findIndex(({ type }) => type === current)
+      const nextIndex =
+        currentIndex + 1 > types?.length - 1 ? 0 : currentIndex + 1
+      return types[nextIndex]
+    }
+    const transformOnChangeValue = (value, type) => {
+      return type?.toChangeValue ? type?.toChangeValue(value) : value
+    }
+    return _jsxs('div', {
+      className: cls(prefix, className),
+      style: style,
+      children: [
+        component &&
+          _jsx('div', {
+            className: prefix + '-content',
+            children: React.createElement(component, {
+              ...props,
+              value: type?.toInputValue ? type?.toInputValue(value) : value,
+              onChange: (event) => {
+                const value = getEventValue(event)
+                typesValue.current[type?.type] = value
+                onChange?.(transformOnChangeValue(value, type))
+              },
+            }),
+          }),
+        _jsx(Button, {
+          className: prefix + '-controller',
+          style: {
+            width: !component ? '100%' : 'auto',
+          },
+          block: true,
+          onClick: () => {
+            const nextType = getNextType()
+            if (nextType === type) return
+            setCurrent(nextType?.type)
+            onChange?.(
+              transformOnChangeValue(
+                typesValue.current[nextType?.type],
+                nextType
+              )
+            )
+          },
+          children: type?.icon
+            ? _jsx(IconWidget, { infer: type.icon })
+            : type?.title || type?.type,
+        }),
+      ],
+    })
+  }
 }

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

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

package/esm/components/PositionInput/index.js

@@ -1,22 +1,49 @@
-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 PositionInput = (props) => {
-    const prefix = usePrefix('position-input');
-    const [current, setCurrent] = useState(props.value);
-    useEffect(() => {
-        if (!props.value) {
-            setCurrent('center');
-        }
-    }, [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: [_jsx("div", { className: prefix + '-row', children: _jsx("div", { ...createCellProps('top'), children: "\u2533" }) }), _jsxs("div", { className: prefix + '-row', children: [_jsx("div", { ...createCellProps('left'), children: "\u2523" }), _jsx("div", { ...createCellProps('center'), children: "\u254B" }), _jsx("div", { ...createCellProps('right'), children: "\u252B" })] }), _jsx("div", { className: prefix + '-row', children: _jsx("div", { ...createCellProps('bottom'), children: "\u253B" }) })] }));
-};
+  const prefix = usePrefix('position-input')
+  const [current, setCurrent] = useState(props.value)
+  useEffect(() => {
+    if (!props.value) {
+      setCurrent('center')
+    }
+  }, [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: [
+      _jsx('div', {
+        className: prefix + '-row',
+        children: _jsx('div', {
+          ...createCellProps('top'),
+          children: '\u2533',
+        }),
+      }),
+      _jsxs('div', {
+        className: prefix + '-row',
+        children: [
+          _jsx('div', { ...createCellProps('left'), children: '\u2523' }),
+          _jsx('div', { ...createCellProps('center'), children: '\u254B' }),
+          _jsx('div', { ...createCellProps('right'), children: '\u252B' }),
+        ],
+      }),
+      _jsx('div', {
+        className: prefix + '-row',
+        children: _jsx('div', {
+          ...createCellProps('bottom'),
+          children: '\u253B',
+        }),
+      }),
+    ],
+  })
+}

package/esm/components/PositionInput/styles.less

@@ -1,4 +1,3 @@
-
 .dn-position-input {
   display: flex;
   flex-direction: column;

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-export declare const SizeInput: import("react").FC<import("../PolyInput").IInput>;
-export declare const BackgroundSizeInput: import("react").FC<import("../PolyInput").IInput>;
+export declare const SizeInput: import('react').FC<
+  import('../PolyInput').IInput
+>
+export declare const BackgroundSizeInput: import('react').FC<
+  import('../PolyInput').IInput
+>

package/esm/components/SizeInput/index.js

@@ -1,53 +1,51 @@
-import { InputNumber } from 'antd';
-import { createPolyInput } from '../PolyInput';
+import { InputNumber } from 'antd'
+import { createPolyInput } from '../PolyInput'
 const takeNumber = (value) => {
-    const num = String(value)
-        .trim()
-        .replace(/[^\d\.]+/, '');
-    if (num === '')
-        return;
-    return Number(num);
-};
+  const num = String(value)
+    .trim()
+    .replace(/[^\d\.]+/, '')
+  if (num === '') return
+  return Number(num)
+}
 const createUnitType = (type) => {
-    return {
-        type,
-        component: InputNumber,
-        checker(value) {
-            return String(value).includes(type);
-        },
-        toInputValue(value) {
-            return takeNumber(value);
-        },
-        toChangeValue(value) {
-            return `${value || 0}${type}`;
-        },
-    };
-};
-const createSpecialSizeOption = (type) => ({
-    type: type,
+  return {
+    type,
+    component: InputNumber,
     checker(value) {
-        if (value === type)
-            return true;
-        return false;
+      return String(value).includes(type)
+    },
+    toInputValue(value) {
+      return takeNumber(value)
     },
-    toChangeValue() {
-        return type;
+    toChangeValue(value) {
+      return `${value || 0}${type}`
     },
-});
+  }
+}
+const createSpecialSizeOption = (type) => ({
+  type: type,
+  checker(value) {
+    if (value === type) return true
+    return false
+  },
+  toChangeValue() {
+    return type
+  },
+})
 const NormalSizeOptions = [
-    createSpecialSizeOption('inherit'),
-    createSpecialSizeOption('auto'),
-    createUnitType('px'),
-    createUnitType('%'),
-    createUnitType('vh'),
-    createUnitType('em'),
-];
-export const SizeInput = createPolyInput(NormalSizeOptions);
+  createSpecialSizeOption('inherit'),
+  createSpecialSizeOption('auto'),
+  createUnitType('px'),
+  createUnitType('%'),
+  createUnitType('vh'),
+  createUnitType('em'),
+]
+export const SizeInput = createPolyInput(NormalSizeOptions)
 export const BackgroundSizeInput = createPolyInput([
-    createSpecialSizeOption('cover'),
-    createSpecialSizeOption('contain'),
-    createUnitType('px'),
-    createUnitType('%'),
-    createUnitType('vh'),
-    createUnitType('em'),
-]);
+  createSpecialSizeOption('cover'),
+  createSpecialSizeOption('contain'),
+  createUnitType('px'),
+  createUnitType('%'),
+  createUnitType('vh'),
+  createUnitType('em'),
+])

package/esm/components/SizeInput/styles.less

@@ -1,4 +1,3 @@
-
 .dn-size-input {
   display: flex;
   width: 100%;

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

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const ValueInput: React.FC<import("../PolyInput").IInput>;
+import React from 'react'
+export declare const ValueInput: React.FC<import('../PolyInput').IInput>

package/esm/components/ValueInput/index.js

@@ -1,81 +1,98 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createPolyInput } from '../PolyInput';
-import { Input, Button, Popover, InputNumber, Select } from 'antd';
-import { MonacoInput } from '../MonacoInput';
-import { TextWidget } from '@thienvu18/designable-react';
-const STARTTAG_REX = /<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
-const EXPRESSION_REX = /^\{\{([\s\S]*)\}\}$/;
-const isNumber = (value) => typeof value === 'number';
-const isBoolean = (value) => typeof value === 'boolean';
+import { TextWidget } from '@thienvu18/designable-react'
+import { Button, Input, InputNumber, Popover, Select } from 'antd'
+import { jsx as _jsx } from 'react/jsx-runtime'
+import { MonacoInput } from '../MonacoInput'
+import { createPolyInput } from '../PolyInput'
+const STARTTAG_REX =
+  /<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/
+const EXPRESSION_REX = /^\{\{([\s\S]*)\}\}$/
+const isNumber = (value) => typeof value === 'number'
+const isBoolean = (value) => typeof value === 'boolean'
 const isExpression = (value) => {
-    return typeof value === 'string' && EXPRESSION_REX.test(value);
-};
+  return typeof value === 'string' && EXPRESSION_REX.test(value)
+}
 const isRichText = (value) => {
-    return typeof value === 'string' && STARTTAG_REX.test(value);
-};
+  return typeof value === 'string' && STARTTAG_REX.test(value)
+}
 const isNormalText = (value) => {
-    return typeof value === 'string' && !isExpression(value) && !isRichText(value);
-};
+  return typeof value === 'string' && !isExpression(value) && !isRichText(value)
+}
 const takeNumber = (value) => {
-    const num = String(value).replace(/[^\d\.]+/, '');
-    if (num === '')
-        return;
-    return Number(num);
-};
+  const num = String(value).replace(/[^\d\.]+/, '')
+  if (num === '') return
+  return Number(num)
+}
 export const ValueInput = createPolyInput([
-    {
-        type: 'TEXT',
-        icon: 'Text',
-        component: Input,
-        checker: isNormalText,
+  {
+    type: 'TEXT',
+    icon: 'Text',
+    component: Input,
+    checker: isNormalText,
+  },
+  {
+    type: 'EXPRESSION',
+    icon: 'Expression',
+    component: (props) => {
+      return _jsx(Popover, {
+        content: _jsx('div', {
+          style: {
+            width: 400,
+            height: 200,
+            marginLeft: -16,
+            marginRight: -16,
+            marginBottom: -12,
+          },
+          children: _jsx(MonacoInput, {
+            ...props,
+            language: 'javascript.expression',
+          }),
+        }),
+        trigger: 'click',
+        children: _jsx(Button, {
+          block: true,
+          children: _jsx(TextWidget, {
+            token: 'SettingComponents.ValueInput.expression',
+          }),
+        }),
+      })
     },
-    {
-        type: 'EXPRESSION',
-        icon: 'Expression',
-        component: (props) => {
-            return (_jsx(Popover, { content: _jsx("div", { style: {
-                        width: 400,
-                        height: 200,
-                        marginLeft: -16,
-                        marginRight: -16,
-                        marginBottom: -12,
-                    }, children: _jsx(MonacoInput, { ...props, language: "javascript.expression" }) }), trigger: "click", children: _jsx(Button, { block: true, children: _jsx(TextWidget, { token: "SettingComponents.ValueInput.expression" }) }) }));
-        },
-        checker: isExpression,
-        toInputValue: (value) => {
-            if (!value || value === '{{}}')
-                return;
-            const matched = String(value).match(EXPRESSION_REX);
-            return matched?.[1] || value || '';
-        },
-        toChangeValue: (value) => {
-            if (!value || value === '{{}}')
-                return;
-            const matched = String(value).match(EXPRESSION_REX);
-            return `{{${matched?.[1] || value || ''}}}`;
-        },
+    checker: isExpression,
+    toInputValue: (value) => {
+      if (!value || value === '{{}}') return
+      const matched = String(value).match(EXPRESSION_REX)
+      return matched?.[1] || value || ''
     },
-    {
-        type: 'BOOLEAN',
-        icon: 'Boolean',
-        component: (props) => (_jsx(Select, { ...props, options: [
-                { label: 'True', value: true },
-                { label: 'False', value: false },
-            ] })),
-        checker: isBoolean,
-        toInputValue: (value) => {
-            return !!value;
-        },
-        toChangeValue: (value) => {
-            return !!value;
-        },
+    toChangeValue: (value) => {
+      if (!value || value === '{{}}') return
+      const matched = String(value).match(EXPRESSION_REX)
+      return `{{${matched?.[1] || value || ''}}}`
     },
-    {
-        type: 'NUMBER',
-        icon: 'Number',
-        component: InputNumber,
-        checker: isNumber,
-        toInputValue: takeNumber,
-        toChangeValue: takeNumber,
+  },
+  {
+    type: 'BOOLEAN',
+    icon: 'Boolean',
+    component: (props) =>
+      _jsx(Select, {
+        ...props,
+        options: [
+          { label: 'True', value: true },
+          { label: 'False', value: false },
+        ],
+      }),
+    checker: isBoolean,
+    toInputValue: (value) => {
+      return !!value
     },
-]);
+    toChangeValue: (value) => {
+      return !!value
+    },
+  },
+  {
+    type: 'NUMBER',
+    icon: 'Number',
+    component: InputNumber,
+    checker: isNumber,
+    toInputValue: takeNumber,
+    toChangeValue: takeNumber,
+  },
+])

package/esm/components/index.d.ts

@@ -1,20 +1,20 @@
-export * from './ColorInput';
-export * from './CornerInput';
-export * from './ImageInput';
-export * from './PositionInput';
-export * from './SizeInput';
-export * from './PolyInput';
-export * from './ValueInput';
-export * from './MonacoInput';
-export * from './DrawerSetter';
-export * from './BoxStyleSetter';
-export * from './BorderStyleSetter';
-export * from './BorderRadiusStyleSetter';
-export * from './BackgroundStyleSetter';
-export * from './BoxShadowStyleSetter';
-export * from './FontStyleSetter';
-export * from './DisplayStyleSetter';
-export * from './FlexStyleSetter';
-export * from './FoldItem';
-export * from './CollapseItem';
-export * from './InputItems';
+export * from './BackgroundStyleSetter'
+export * from './BorderRadiusStyleSetter'
+export * from './BorderStyleSetter'
+export * from './BoxShadowStyleSetter'
+export * from './BoxStyleSetter'
+export * from './CollapseItem'
+export * from './ColorInput'
+export * from './CornerInput'
+export * from './DisplayStyleSetter'
+export * from './DrawerSetter'
+export * from './FlexStyleSetter'
+export * from './FoldItem'
+export * from './FontStyleSetter'
+export * from './ImageInput'
+export * from './InputItems'
+export * from './MonacoInput'
+export * from './PolyInput'
+export * from './PositionInput'
+export * from './SizeInput'
+export * from './ValueInput'

package/esm/components/index.js

@@ -1,20 +1,20 @@
-export * from './ColorInput';
-export * from './CornerInput';
-export * from './ImageInput';
-export * from './PositionInput';
-export * from './SizeInput';
-export * from './PolyInput';
-export * from './ValueInput';
-export * from './MonacoInput';
-export * from './DrawerSetter';
-export * from './BoxStyleSetter';
-export * from './BorderStyleSetter';
-export * from './BorderRadiusStyleSetter';
-export * from './BackgroundStyleSetter';
-export * from './BoxShadowStyleSetter';
-export * from './FontStyleSetter';
-export * from './DisplayStyleSetter';
-export * from './FlexStyleSetter';
-export * from './FoldItem';
-export * from './CollapseItem';
-export * from './InputItems';
+export * from './BackgroundStyleSetter'
+export * from './BorderRadiusStyleSetter'
+export * from './BorderStyleSetter'
+export * from './BoxShadowStyleSetter'
+export * from './BoxStyleSetter'
+export * from './CollapseItem'
+export * from './ColorInput'
+export * from './CornerInput'
+export * from './DisplayStyleSetter'
+export * from './DrawerSetter'
+export * from './FlexStyleSetter'
+export * from './FoldItem'
+export * from './FontStyleSetter'
+export * from './ImageInput'
+export * from './InputItems'
+export * from './MonacoInput'
+export * from './PolyInput'
+export * from './PositionInput'
+export * from './SizeInput'
+export * from './ValueInput'

package/esm/effects/index.d.ts

@@ -1,2 +1,2 @@
-export * from './useLocales';
-export * from './useSnapshot';
+export * from './useLocales'
+export * from './useSnapshot'

package/esm/effects/index.js

@@ -1,2 +1,2 @@
-export * from './useLocales';
-export * from './useSnapshot';
+export * from './useLocales'
+export * from './useSnapshot'