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

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

@@ -1,21 +1,21 @@
-import React from 'react';
-import './styles.less';
+import React from 'react'
+import './styles.less'
 export interface IInput {
-    style?: React.CSSProperties;
-    className?: string;
-    value: any;
-    onChange: (value: any) => void;
-    exclude?: string[];
-    include?: string[];
+  style?: React.CSSProperties
+  className?: string
+  value: any
+  onChange: (value: any) => void
+  exclude?: string[]
+  include?: string[]
 }
 export interface IPolyType {
-    type: string;
-    title?: string;
-    icon?: string;
-    component?: any;
-    checker: (value: any) => boolean;
-    toInputValue?: (value: any) => any;
-    toChangeValue?: (value: any) => any;
+  type: string
+  title?: string
+  icon?: string
+  component?: any
+  checker: (value: any) => boolean
+  toInputValue?: (value: any) => any
+  toChangeValue?: (value: any) => any
 }
-export type PolyTypes = IPolyType[];
-export declare function createPolyInput(polyTypes?: PolyTypes): React.FC<IInput>;
+export type PolyTypes = IPolyType[]
+export declare function createPolyInput(polyTypes?: PolyTypes): React.FC<IInput>

package/lib/components/PolyInput/index.js

@@ -1,100 +1,155 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPolyInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const antd_1 = require("antd");
-const designable_react_1 = require("@thienvu18/designable-react");
-const classnames_1 = __importDefault(require("classnames"));
-require("./styles.less");
-const isValid = (val) => val !== undefined && val !== null;
+'use strict'
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        var desc = Object.getOwnPropertyDescriptor(m, k)
+        if (
+          !desc ||
+          ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k]
+            },
+          }
+        }
+        Object.defineProperty(o, k2, desc)
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        o[k2] = m[k]
+      })
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v })
+      }
+    : function (o, v) {
+        o['default'] = v
+      })
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod
+    var result = {}
+    if (mod != null)
+      for (var k in mod)
+        if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k)
+    __setModuleDefault(result, mod)
+    return result
+  }
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.createPolyInput = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = __importStar(require('react'))
+const antd_1 = require('antd')
+const designable_react_1 = require('@thienvu18/designable-react')
+const classnames_1 = __importDefault(require('classnames'))
+require('./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
+  })
+}
 function createPolyInput(polyTypes = []) {
-    return ({ className, style, value, onChange, exclude, include, ...props }) => {
-        const prefix = (0, designable_react_1.usePrefix)('poly-input');
-        const types = createTypes(polyTypes, exclude, include);
-        const [current, setCurrent] = (0, react_1.useState)(types[0]?.type);
-        const type = types?.find(({ type }) => type === current);
-        const component = type?.component;
-        const typesValue = (0, react_1.useRef)({});
-        (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className), style: style, children: [component && ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-content', children: react_1.default.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));
-                        },
-                    }) })), (0, jsx_runtime_1.jsx)(antd_1.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 ? ((0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: type.icon })) : (type?.title || type?.type) })] }));
-    };
+  return ({
+    className,
+    style,
+    value,
+    onChange,
+    exclude,
+    include,
+    ...props
+  }) => {
+    const prefix = (0, designable_react_1.usePrefix)('poly-input')
+    const types = createTypes(polyTypes, exclude, include)
+    const [current, setCurrent] = (0, react_1.useState)(types[0]?.type)
+    const type = types?.find(({ type }) => type === current)
+    const component = type?.component
+    const typesValue = (0, react_1.useRef)({})
+    ;(0, react_1.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 (0, jsx_runtime_1.jsxs)('div', {
+      className: (0, classnames_1.default)(prefix, className),
+      style: style,
+      children: [
+        component &&
+          (0, jsx_runtime_1.jsx)('div', {
+            className: prefix + '-content',
+            children: react_1.default.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))
+              },
+            }),
+          }),
+        (0, jsx_runtime_1.jsx)(antd_1.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
+            ? (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+                infer: type.icon,
+              })
+            : type?.title || type?.type,
+        }),
+      ],
+    })
+  }
 }
-exports.createPolyInput = createPolyInput;
+exports.createPolyInput = createPolyInput

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

@@ -1,29 +1,69 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PositionInput = 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.PositionInput = 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 PositionInput = (props) => {
-    const prefix = (0, designable_react_1.usePrefix)('position-input');
-    const [current, setCurrent] = (0, react_1.useState)(props.value);
-    (0, react_1.useEffect)(() => {
-        if (!props.value) {
-            setCurrent('center');
-        }
-    }, [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.jsx)("div", { className: prefix + '-row', children: (0, jsx_runtime_1.jsx)("div", { ...createCellProps('top'), children: "\u2533" }) }), (0, jsx_runtime_1.jsxs)("div", { className: prefix + '-row', children: [(0, jsx_runtime_1.jsx)("div", { ...createCellProps('left'), children: "\u2523" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('center'), children: "\u254B" }), (0, jsx_runtime_1.jsx)("div", { ...createCellProps('right'), children: "\u252B" })] }), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-row', children: (0, jsx_runtime_1.jsx)("div", { ...createCellProps('bottom'), children: "\u253B" }) })] }));
-};
-exports.PositionInput = PositionInput;
+  const prefix = (0, designable_react_1.usePrefix)('position-input')
+  const [current, setCurrent] = (0, react_1.useState)(props.value)
+  ;(0, react_1.useEffect)(() => {
+    if (!props.value) {
+      setCurrent('center')
+    }
+  }, [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.jsx)('div', {
+        className: prefix + '-row',
+        children: (0, jsx_runtime_1.jsx)('div', {
+          ...createCellProps('top'),
+          children: '\u2533',
+        }),
+      }),
+      (0, jsx_runtime_1.jsxs)('div', {
+        className: prefix + '-row',
+        children: [
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('left'),
+            children: '\u2523',
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('center'),
+            children: '\u254B',
+          }),
+          (0, jsx_runtime_1.jsx)('div', {
+            ...createCellProps('right'),
+            children: '\u252B',
+          }),
+        ],
+      }),
+      (0, jsx_runtime_1.jsx)('div', {
+        className: prefix + '-row',
+        children: (0, jsx_runtime_1.jsx)('div', {
+          ...createCellProps('bottom'),
+          children: '\u253B',
+        }),
+      }),
+    ],
+  })
+}
+exports.PositionInput = PositionInput

package/lib/components/PositionInput/styles.less

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

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

@@ -1,56 +1,54 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackgroundSizeInput = exports.SizeInput = void 0;
-const antd_1 = require("antd");
-const PolyInput_1 = require("../PolyInput");
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.BackgroundSizeInput = exports.SizeInput = void 0
+const antd_1 = require('antd')
+const PolyInput_1 = require('../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: antd_1.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: antd_1.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'),
-];
-exports.SizeInput = (0, PolyInput_1.createPolyInput)(NormalSizeOptions);
+  createSpecialSizeOption('inherit'),
+  createSpecialSizeOption('auto'),
+  createUnitType('px'),
+  createUnitType('%'),
+  createUnitType('vh'),
+  createUnitType('em'),
+]
+exports.SizeInput = (0, PolyInput_1.createPolyInput)(NormalSizeOptions)
 exports.BackgroundSizeInput = (0, PolyInput_1.createPolyInput)([
-    createSpecialSizeOption('cover'),
-    createSpecialSizeOption('contain'),
-    createUnitType('px'),
-    createUnitType('%'),
-    createUnitType('vh'),
-    createUnitType('em'),
-]);
+  createSpecialSizeOption('cover'),
+  createSpecialSizeOption('contain'),
+  createUnitType('px'),
+  createUnitType('%'),
+  createUnitType('vh'),
+  createUnitType('em'),
+])

package/lib/components/SizeInput/styles.less

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

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