@fairys/valtio-form-basic 0.0.12 → 1.0.0

package/lib/common/instance/index.js

@@ -0,0 +1,269 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    useFairysValtioFormInstanceContextState: ()=>useFairysValtioFormInstanceContextState,
+    useFairysValtioFormInstanceContext: ()=>useFairysValtioFormInstanceContext,
+    useFairysValtioFormInstanceContextHideState: ()=>useFairysValtioFormInstanceContextHideState,
+    useFairysValtioFormInstanceToHideState: ()=>useFairysValtioFormInstanceToHideState,
+    useFairysValtioFormInstanceToState: ()=>useFairysValtioFormInstanceToState,
+    FairysValtioFormInstance: ()=>FairysValtioFormInstance,
+    useFairysValtioFormInstance: ()=>useFairysValtioFormInstance,
+    FairysValtioFormInstanceContext: ()=>FairysValtioFormInstanceContext
+});
+const external_react_namespaceObject = require("react");
+const external_valtio_namespaceObject = require("valtio");
+const external_async_validator_namespaceObject = require("async-validator");
+var external_async_validator_default = /*#__PURE__*/ __webpack_require__.n(external_async_validator_namespaceObject);
+const external_fast_copy_namespaceObject = require("fast-copy");
+const index_js_namespaceObject = require("../utils/index.js");
+class FairysValtioFormInstance {
+    onValuesChange;
+    isValtioProxy = (value)=>{
+        const { refSet } = (0, external_valtio_namespaceObject.unstable_getInternalStates)();
+        const canProxyDefault = (x)=>(0, index_js_namespaceObject.isObject)(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer) && !(x instanceof Promise);
+        return canProxyDefault(value);
+    };
+    state = (0, external_valtio_namespaceObject.proxy)({});
+    errorState = (0, external_valtio_namespaceObject.proxy)({});
+    hideState = (0, external_valtio_namespaceObject.proxy)({});
+    ctor = (options)=>{
+        const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
+        this.clear();
+        this.updatedHideInfo(hideState ? (0, external_fast_copy_namespaceObject.copy)(hideState) : {});
+        const isValtioProxy = this.isValtioProxy(formData);
+        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.updated((0, external_fast_copy_namespaceObject.copy)((0, external_valtio_namespaceObject.snapshot)(formData)), false);
+        else this.updated(formData, false);
+        else {
+            if ('deepCopy' === initFormDataType) this.updated((0, external_fast_copy_namespaceObject.copy)(formData || {}), false);
+            this.updated(formData || {}, false);
+        }
+    };
+    updated = (state, isValidate = true)=>{
+        const keys = Object.keys(state);
+        for(let index = 0; index < keys.length; index++){
+            const key = keys[index];
+            this.state[key] = state[key];
+        }
+        if (isValidate) this.validate(keys, false);
+    };
+    updatedValueByPaths = (path, value)=>{
+        (0, index_js_namespaceObject.set)(this.state, (0, index_js_namespaceObject.formatePath)(path), value);
+        this.validate([
+            path
+        ], false);
+        this.onValuesChange?.(path, value);
+    };
+    removeValueByPaths = (path)=>{
+        (0, index_js_namespaceObject.removeValueByPaths)(this.state, (0, index_js_namespaceObject.formatePath)(path));
+    };
+    clearValue = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.state);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.state[field];
+        }
+        return this;
+    };
+    updatedHideInfo = (objectHideInfo)=>{
+        const keys = Object.keys(objectHideInfo);
+        for(let index = 0; index < keys.length; index++){
+            const field = keys[index];
+            this.hideState[field] = objectHideInfo[field];
+        }
+        return this;
+    };
+    clearHideInfo = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.hideState);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.hideState[field];
+        }
+        return this;
+    };
+    updatedErrorInfo = (objectErrorInfo)=>{
+        const keys = Object.keys(objectErrorInfo);
+        for(let index = 0; index < keys.length; index++){
+            const field = keys[index];
+            this.errorState[field] = objectErrorInfo[field];
+        }
+        return this;
+    };
+    clearErrorInfo = (fields)=>{
+        let _fields = fields;
+        if (!Array.isArray(fields)) _fields = Object.keys(this.errorState);
+        for(let index = 0; index < _fields.length; index++){
+            const field = _fields[index];
+            delete this.errorState[field];
+        }
+        return this;
+    };
+    clear = ()=>{
+        this.clearValue();
+        this.clearHideInfo();
+        this.clearErrorInfo();
+        this.mountRules = {};
+        this.rules = {};
+        this.nameToPaths = {};
+    };
+    mountRules = {};
+    removeRules = (name)=>{
+        delete this.mountRules[name];
+    };
+    rules = {};
+    nameToPaths = {};
+    validate = async (fields, isReturn = true)=>{
+        const rules = {
+            ...this.rules,
+            ...this.mountRules
+        };
+        const _formData = (0, external_valtio_namespaceObject.snapshot)(this.state);
+        const _values = {};
+        let _fields = Object.keys(rules);
+        let _lastRules = {};
+        let isPropsFields = false;
+        if (Array.isArray(fields) && fields.length) {
+            _fields = [
+                ...fields
+            ];
+            isPropsFields = true;
+            for(let index = 0; index < fields.length; index++){
+                const field = fields[index];
+                const paths = this.nameToPaths[field];
+                _lastRules[field] = rules[field];
+                _values[field] = (0, index_js_namespaceObject.get)(_formData, paths ? paths : (0, index_js_namespaceObject.formatePath)(field));
+            }
+        } else {
+            isPropsFields = false;
+            _lastRules = {
+                ...rules
+            };
+            for(let index = 0; index < _fields.length; index++){
+                const field = _fields[index];
+                const paths = this.nameToPaths[field];
+                _values[field] = (0, index_js_namespaceObject.get)(_formData, paths);
+            }
+        }
+        return new Promise((resolve, reject)=>{
+            new (external_async_validator_default())({
+                ...rules
+            }).validate({
+                ..._values
+            }, (errors, fields)=>{
+                for(let index = 0; index < _fields.length; index++){
+                    const field = _fields[index];
+                    const fidError = Array.isArray(errors) ? errors.filter((item)=>item.field === field) : void 0;
+                    if (fidError) this.errorState[field] = (0, external_valtio_namespaceObject.ref)(fidError.map((item)=>item.message || ''));
+                    else delete this.errorState[field];
+                }
+                if (isReturn) if (errors) reject({
+                    errors,
+                    fields
+                });
+                else isPropsFields ? resolve({
+                    ...fields
+                }) : resolve({
+                    ..._formData
+                });
+            });
+        });
+    };
+    validatePrefixFields = async (prefix, isReturn = true)=>{
+        const fields = Object.keys(this.rules);
+        const _fields = fields.filter((item)=>prefix.some((p)=>item.toString().startsWith(p)));
+        return this.validate(_fields, isReturn);
+    };
+}
+function useFairysValtioFormInstance(instance) {
+    const ref = (0, external_react_namespaceObject.useRef)();
+    if (!ref.current) if (instance) ref.current = instance;
+    else ref.current = new FairysValtioFormInstance();
+    return ref.current;
+}
+const FairysValtioFormInstanceContext = (0, external_react_namespaceObject.createContext)(new FairysValtioFormInstance());
+function useFairysValtioFormInstanceContext() {
+    return (0, external_react_namespaceObject.useContext)(FairysValtioFormInstanceContext);
+}
+function useFairysValtioFormInstanceContextState() {
+    const instance = useFairysValtioFormInstanceContext();
+    const state = (0, external_valtio_namespaceObject.useSnapshot)(instance.state);
+    const errorState = (0, external_valtio_namespaceObject.useSnapshot)(instance.errorState);
+    return [
+        state,
+        errorState,
+        instance,
+        state.__defaultValue,
+        errorState.__defaultValue
+    ];
+}
+function useFairysValtioFormInstanceContextHideState() {
+    const instance = useFairysValtioFormInstanceContext();
+    const hideState = (0, external_valtio_namespaceObject.useSnapshot)(instance.hideState);
+    return [
+        hideState,
+        instance,
+        hideState.__defaultValue
+    ];
+}
+function useFairysValtioFormInstanceToState(formInstance) {
+    const state = (0, external_valtio_namespaceObject.useSnapshot)(formInstance.state);
+    return state;
+}
+function useFairysValtioFormInstanceToHideState(formInstance) {
+    const hideState = (0, external_valtio_namespaceObject.useSnapshot)(formInstance.hideState);
+    return hideState;
+}
+exports.FairysValtioFormInstance = __webpack_exports__.FairysValtioFormInstance;
+exports.FairysValtioFormInstanceContext = __webpack_exports__.FairysValtioFormInstanceContext;
+exports.useFairysValtioFormInstance = __webpack_exports__.useFairysValtioFormInstance;
+exports.useFairysValtioFormInstanceContext = __webpack_exports__.useFairysValtioFormInstanceContext;
+exports.useFairysValtioFormInstanceContextHideState = __webpack_exports__.useFairysValtioFormInstanceContextHideState;
+exports.useFairysValtioFormInstanceContextState = __webpack_exports__.useFairysValtioFormInstanceContextState;
+exports.useFairysValtioFormInstanceToHideState = __webpack_exports__.useFairysValtioFormInstanceToHideState;
+exports.useFairysValtioFormInstanceToState = __webpack_exports__.useFairysValtioFormInstanceToState;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "FairysValtioFormInstance",
+    "FairysValtioFormInstanceContext",
+    "useFairysValtioFormInstance",
+    "useFairysValtioFormInstanceContext",
+    "useFairysValtioFormInstanceContextHideState",
+    "useFairysValtioFormInstanceContextState",
+    "useFairysValtioFormInstanceToHideState",
+    "useFairysValtioFormInstanceToState"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/common/interface.d.ts

@@ -0,0 +1,4 @@
+export type MObject<T> = {
+    [K in keyof T]: T[K];
+};
+export type MakeFieldRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

package/lib/common/interface.js

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/common/utils/index.d.ts

@@ -0,0 +1,31 @@
+/***
+ * 设置值
+ * @param object 任意对象
+ * @param paths 值路径
+ * @param nextValue 新值
+ *
+ * @description
+ * 值不存在时，当 paths 路径中的值为 number 类型时，会创建一个空数组。当 paths 路径中的值为 string 类型时，会创建一个空对象。
+ */
+export declare function set<T>(state: any, paths: PropertyKey[], nextValue: T): any;
+/***
+ * 获取值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export declare function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TDefault;
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export declare function removeValueByPaths(value: any, segments: PropertyKey[]): void;
+/***
+ * 格式化路径，将路径中的数组索引转换为数字
+ * @param path 路径
+ * @returns 格式化后的路径
+ */
+export declare function formatePath(path: PropertyKey): (number | symbol)[] | (string | number)[];
+/**格式化属性名*/
+export declare function formateName(name?: string, parentName?: string): string;
+export declare const isObject: (x: unknown) => x is object;

package/lib/common/utils/index.js

@@ -0,0 +1,119 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    formateName: ()=>formateName,
+    formatePath: ()=>formatePath,
+    get: ()=>get,
+    isObject: ()=>isObject,
+    removeValueByPaths: ()=>removeValueByPaths,
+    set: ()=>set
+});
+function set(state, paths, nextValue) {
+    const _keys = [
+        ...paths
+    ];
+    let current = state;
+    const length = _keys.length - 1;
+    for(let i = 0; i <= length; i++){
+        const key = _keys[i];
+        const _current = current[key];
+        const nextKey = _keys[i + 1];
+        if (void 0 === _current && 'number' == typeof nextKey) current[key] = [];
+        else if (void 0 === _current && 'string' == typeof nextKey) current[key] = {};
+        if (i === length) current[key] = nextValue;
+        else current = current[key];
+    }
+    return state;
+}
+function get(value, segments) {
+    let current = value;
+    for (const key of segments)current = current?.[key];
+    return current;
+}
+function removeValueByPaths(value, segments) {
+    let current = value;
+    const lg = segments.length;
+    for(let index = 0; index < lg; index++){
+        const key = segments[index];
+        if (index === lg - 1) delete current[key];
+        else current = current?.[key];
+    }
+}
+function formatePath(path) {
+    if ('string' != typeof path) return [
+        path
+    ];
+    return path.split(/[\.]/g).reduce((pre, next)=>{
+        if (/\[[0-9]+\]$/.test(next)) {
+            const _next = next.split(/\[/);
+            let _nextValue = [];
+            for(let index = 0; index < _next.length; index++){
+                const element = _next[index];
+                if (/\]$/.test(element)) {
+                    const _v = element.replace(/\]$/, '');
+                    const v = Number.parseInt(_v);
+                    if (_v.length !== `${v}`.length || Number.isNaN(v)) _nextValue.push(_v);
+                    else _nextValue.push(v);
+                } else _nextValue.push(element);
+            }
+            return [
+                ...pre,
+                ..._nextValue
+            ];
+        }
+        return [
+            ...pre,
+            next
+        ];
+    }, []).map((item)=>{
+        if ('string' == typeof item) return item.trim();
+        return item;
+    }).filter((item)=>'' !== item);
+}
+function formateName(name, parentName) {
+    if (parentName && name) return parentName + '.' + name;
+    if (parentName) return parentName;
+    if (name) return name;
+    return '';
+}
+const isObject = (x)=>'object' == typeof x && null !== x;
+exports.formateName = __webpack_exports__.formateName;
+exports.formatePath = __webpack_exports__.formatePath;
+exports.get = __webpack_exports__.get;
+exports.isObject = __webpack_exports__.isObject;
+exports.removeValueByPaths = __webpack_exports__.removeValueByPaths;
+exports.set = __webpack_exports__.set;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "formateName",
+    "formatePath",
+    "get",
+    "isObject",
+    "removeValueByPaths",
+    "set"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/lib/form/form.d.ts

@@ -0,0 +1,82 @@
+import { MObject } from '../common/interface';
+import { FairysValtioFormInstance } from '../common/instance';
+import { type ReactNode } from 'react';
+import { FairysValtioFormLayoutAttrsProps } from './layout';
+import { RuleItem } from 'async-validator';
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>> extends FairysValtioFormLayoutAttrsProps {
+    /**表单实例*/
+    form?: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    /**表单项规则(如果表单项没有指定规则，则使用全局规则，如果表单项指定规则，则使用表单项规则)*/
+    rules?: Record<PropertyKey, RuleItem[]>;
+    /**表单初始值*/
+    formData?: FairysValtioFormInstance<T>['state'];
+    /**表单隐藏状态*/
+    hideState?: FairysValtioFormInstance<T>['hideState'];
+    /**
+     * 初始化表单数据类型，默认值为 deepCopy
+     * - deepCopy：使用深度拷贝初始化表单数据
+     * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
+     */
+    initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
+}
+/**
+ * 表单属性处理
+ *
+ * @example
+ *
+ * ```tsx
+import { useFairysValtioForm } from "@fairys/valtio-form"
+import type { FairysValtioFormAttrProps } from "@fairys/valtio-form"
+export interface FormProps extends FairysValtioFormAttrProps{}
+
+export const Form = (props: FormProps) => {
+  const { formInstance,children, ...rest } = useFairysValtioForm(props)
+  return  (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <布局组件 {...rest}>{children}</布局组件>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+ * ```
+*/
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
+    formInstance: FairysValtioFormInstance<T>;
+    /**子元素*/
+    children: ReactNode;
+    gap?: string | number;
+    title?: React.ReactNode;
+    extra?: React.ReactNode;
+    isAllColSpan?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    headerClassName?: string;
+    headerStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    bordered?: boolean;
+    boxShadow?: boolean;
+    lastItemBordered?: boolean;
+    platform?: "pc" | "rn" | "taro";
+    colCount?: number;
+    errorLayout?: "bottom-left" | "bottom-right" | "top-right" | "top-left" | "left-border-top" | "right-border-top";
+    labelMode?: "left" | "top" | "between";
+    formItemClassName?: string;
+    formItemStyle?: React.CSSProperties;
+    formItemLabelClassName?: string;
+    formItemLabelStyle?: React.CSSProperties;
+    formItemBodyClassName?: string;
+    formItemBodyStyle?: React.CSSProperties;
+    itemBorderType?: "bottom" | "body" | "none";
+    itemBorderColor?: React.CSSProperties["borderColor"];
+    isInvalidBorderRed?: boolean;
+    isInvalidTextRed?: boolean;
+    showColon?: boolean;
+};