@fairys/valtio-form-basic 0.0.11 → 0.0.13

package/esm/{form → common}/hooks/index.d.ts

@@ -32,3 +32,4 @@ export declare const useFairysValtioFormAttrsName: (options?: FairysValtioFormAt
     name: string;
     paths: (number | symbol)[] | (string | number)[];
 };
+export declare const useId: (suffix?: string) => string;

package/esm/{form → common}/hooks/index.js

@@ -54,4 +54,12 @@ const useFairysValtioFormAttrsName = (options = {})=>{
         paths: _paths
     };
 };
-export { FairysValtioFormParentAttrs, FairysValtioFormParentAttrsContext, useFairysValtioFormAttrsName, useFairysValtioFormParentAttrs, useFairysValtioFormParentAttrsContext, useFairysValtioFormParentAttrsState };
+let localId = 0;
+const useId = (suffix = 'form-item-input')=>{
+    const count = useRef(localId++);
+    return useMemo(()=>`fairys-valtio-form_${count.current.toString(32)}_${suffix}`, [
+        count.current,
+        suffix
+    ]);
+};
+export { FairysValtioFormParentAttrs, FairysValtioFormParentAttrsContext, useFairysValtioFormAttrsName, useFairysValtioFormParentAttrs, useFairysValtioFormParentAttrsContext, useFairysValtioFormParentAttrsState, useId };

package/esm/common/index.d.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './instance';
+export * from './utils';
+export * from './interface';

package/esm/common/index.js

@@ -0,0 +1,4 @@
+export * from "./hooks/index.js";
+export * from "./instance/index.js";
+export * from "./utils/index.js";
+export * from "./interface.js";

package/esm/{form → common}/instance/index.d.ts

@@ -1,7 +1,14 @@
-import { MObject } from '../../interface';
+import { MObject } from '../interface';
 import { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+import { FairysValtioFormAttrsProps } from '../../form/form';
 /**表单实例*/
 export declare class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+    /***
+     * 判断值是否为代理对象
+     * @param value 值
+     * @returns 是否为代理对象
+     */
+    isValtioProxy: (value: any) => boolean;
     /**状态*/
     state: T;
     /**
@@ -14,7 +21,7 @@ export declare class FairysValtioFormInstance<T extends MObject<T> = Record<stri
     ctor: (options?: {
         formData?: Partial<T>;
         hideState?: Record<PropertyKey, boolean>;
-        isDeepCopy?: boolean;
+        initFormDataType?: FairysValtioFormAttrsProps["initFormDataType"];
     }) => void;
     /**
      * 更新数据

package/esm/{form → common}/instance/index.js

@@ -1,18 +1,30 @@
 import { createContext, useContext, useRef } from "react";
-import { proxy, ref as external_valtio_ref, snapshot, useSnapshot } from "valtio";
+import { proxy, ref as external_valtio_ref, snapshot, unstable_getInternalStates, useSnapshot } from "valtio";
 import async_validator from "async-validator";
 import { copy } from "fast-copy";
-import { formatePath, get, set } from "../utils/index.js";
+import { formatePath, get, isObject, set } from "../utils/index.js";
 class FairysValtioFormInstance {
+    isValtioProxy = (value)=>{
+        const { refSet } = unstable_getInternalStates();
+        const canProxyDefault = (x)=>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 = proxy({});
     errorState = proxy({});
     hideState = proxy({});
     ctor = (options)=>{
-        const { formData, hideState, isDeepCopy = true } = options || {};
+        const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
+        this.mountRules = {};
+        this.nameToPaths = {};
         this.errorState = proxy({});
         this.hideState = proxy(hideState ? copy(hideState) : {});
-        if (isDeepCopy) this.state = proxy(formData ? copy(formData) : {});
-        else if (formData) this.state = proxy(formData);
+        const isValtioProxy = this.isValtioProxy(formData);
+        if (isValtioProxy) if ('deepCopy' === initFormDataType) this.state = proxy(copy(snapshot(formData)));
+        else this.state = formData;
+        else {
+            if ('deepCopy' === initFormDataType) this.state = proxy(copy(formData || {}));
+            this.state = proxy(formData || {});
+        }
     };
     updated = (state, isValidate = true)=>{
         const keys = Object.keys(state);
@@ -66,6 +78,9 @@ class FairysValtioFormInstance {
         this.state = proxy({});
         this.errorState = proxy({});
         this.hideState = proxy({});
+        this.mountRules = {};
+        this.rules = {};
+        this.nameToPaths = {};
     };
     mountRules = {};
     removeRules = (name)=>{

package/esm/{form → common}/utils/index.d.ts

@@ -22,3 +22,4 @@ export declare function get<TDefault = unknown>(value: any, segments: PropertyKe
 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/esm/{form → common}/utils/index.js

@@ -57,4 +57,5 @@ function formateName(name, parentName) {
     if (name) return name;
     return '';
 }
-export { formateName, formatePath, get, set };
+const isObject = (x)=>'object' == typeof x && null !== x;
+export { formateName, formatePath, get, isObject, set };

package/esm/form/form.d.ts

@@ -1,5 +1,5 @@
-import { MObject } from '../interface';
-import { FairysValtioFormInstance } from './instance';
+import { MObject } from '../common/interface';
+import { FairysValtioFormInstance } from '../common/instance';
 import { type ReactNode } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
@@ -14,8 +14,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
     formData?: FairysValtioFormInstance<T>['state'];
     /**表单隐藏状态*/
     hideState?: FairysValtioFormInstance<T>['hideState'];
-    /**formData 是否进行深度拷贝，如果不是则直接把 formData 赋值到 state ，否则使用 copy 方法深度拷贝后赋值 */
-    isDeepCopy?: boolean;
+    /**
+     * 初始化表单数据类型，默认值为 deepCopy
+     * - deepCopy：使用深度拷贝初始化表单数据
+     * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
+     */
+    initFormDataType?: 'deepCopy' | 'immutable';
 }
 /**
  * 表单属性处理
@@ -37,7 +41,7 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>): {
+export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
     formInstance: FairysValtioFormInstance<T>;
     /**子元素*/
     children: ReactNode;
@@ -54,6 +58,7 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     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";
@@ -63,7 +68,7 @@ export declare function useFairysValtioForm<T extends MObject<T> = object>(props
     formItemLabelStyle?: React.CSSProperties;
     formItemBodyClassName?: string;
     formItemBodyStyle?: React.CSSProperties;
-    itemBorderType?: "bottom" | "body";
+    itemBorderType?: "bottom" | "body" | "none";
     itemBorderColor?: React.CSSProperties["borderColor"];
     isInvalidBorderRed?: boolean;
     isInvalidTextRed?: boolean;

package/esm/form/form.item.d.ts

@@ -1,11 +1,13 @@
 /**表单项*/
-import { MObject } from '../interface';
+import { MObject } from '../common/interface';
 import React from 'react';
-import { FairysValtioFormInstance } from './instance';
+import { FairysValtioFormInstance } from '../common/instance';
 import { FairysValtioFormLayoutContextOptions } from './layout';
-import { FairysValtioFormParentAttrs } from './hooks';
+import { FairysValtioFormParentAttrs } from '../common/hooks';
 import { RuleItem } from 'async-validator';
 export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+    /**平台*/
+    platform?: 'pc' | 'rn' | 'taro';
     /**
      * 表单项名称 ，字段需要和存储的字段路径一致
      *
@@ -22,6 +24,8 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
     label?: string;
     /**传递组件字段*/
     valuePropName?: string;
+    /**取值字段(默认 valuePropName字段值)*/
+    getValuePath?: string;
     /**自定义获取值*/
     getValueFromEvent?: (event: any, form: FairysValtioFormInstance<T>) => any;
     /**值格式化*/
@@ -151,6 +155,8 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
     _name?: string;
     /**表单项名称*/
     name?: string;
+    /**表单项ID*/
+    id?: string;
     /**表单项路径*/
     paths?: (string | number)[];
     /**父级字段名*/
@@ -210,6 +216,7 @@ export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T>
     formInstance: FairysValtioFormInstance<T>;
     _name: string;
     name: string;
+    id: string;
     paths: (number | symbol)[] | (string | number)[];
     parentName: string;
     formAttrsNameInstance: FairysValtioFormParentAttrs;

package/esm/form/form.item.js

@@ -1,9 +1,9 @@
 import react, { useEffect, useMemo } from "react";
 import clsx from "clsx";
-import { useFairysValtioFormInstanceContextState } from "./instance/index.js";
+import { useFairysValtioFormInstanceContextState } from "../common/instance/index.js";
 import { useFairysValtioFormLayoutContext } from "./layout.js";
-import { useFairysValtioFormAttrsName } from "./hooks/index.js";
-import { get } from "./utils/index.js";
+import { useFairysValtioFormAttrsName, useId } from "../common/hooks/index.js";
+import { formatePath, get } from "../common/utils/index.js";
 function useFairysValtioFormItemAttrs(props) {
     const [layoutAttrs] = useFairysValtioFormLayoutContext();
     const colCount = layoutAttrs.colCount || 1;
@@ -20,7 +20,8 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
     const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
     const parent_showColon = layoutAttrs.showColon;
-    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules } = props;
+    const parent_platform = layoutAttrs.platform;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', className, style, labelClassName, labelStyle, bodyClassName, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, rowSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, platform = parent_platform } = props;
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
@@ -32,25 +33,31 @@ function useFairysValtioFormItemAttrs(props) {
     ]);
     const error = errorState[_name];
     const _formItemRules = formInstance.rules?.[_name];
+    const id = useId(_name);
     formInstance.nameToPaths[_name] = paths;
-    if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
-    useEffect(()=>()=>{
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
             formInstance.removeRules(_name);
-        }, [
-        _name
+        };
+    }, [
+        _name,
+        rules
     ]);
     const onValueChange = (event)=>{
-        let value = event;
+        let _value = event;
         const target = event?.detail || event?.target;
-        if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, formInstance);
-        else if (event && target && 'object' == typeof target && valuePropName in target) value = target.valuePropName;
-        if ('function' == typeof formatValue) value = formatValue(value, formInstance, event);
-        formInstance.updatedValueByPaths(_name, value);
-        if ('function' == typeof onAfterUpdate) onAfterUpdate(value, formInstance, event);
+        if ('function' == typeof getValueFromEvent) _value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) _value = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) _value = formatValue(_value, formInstance, event);
+        if (value === _value) return;
+        formInstance.updatedValueByPaths(_name, _value);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
     const baseControl = {
         ...attrs,
         name,
+        id,
         [valuePropName]: value,
         [trigger]: onValueChange
     };
@@ -104,10 +111,9 @@ function useFairysValtioFormItemAttrs(props) {
         isRequired,
         showColon
     ]);
-    const itemBody_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border', {
+    const itemBody_cls = useMemo(()=>clsx('fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border fairystaroform__items-start', {
             'fairystaroform__flex-row fairystaroform__justify-start': 'left' === labelMode,
             'fairystaroform__flex-row fairystaroform__justify-end': 'between' === labelMode || 'top' === labelMode,
-            'fairystaroform__flex-row': 'top' === labelMode,
             'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ': 'body' === itemBorderType,
             'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && 'body' === itemBorderType
         }, parent_formItemBodyClassName, bodyClassName), [
@@ -127,14 +133,18 @@ function useFairysValtioFormItemAttrs(props) {
     const itemExtra_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-extra fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center'), []);
     const itemHelp_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-help fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__w-full fairystaroform__box-border'), []);
     const itemError_cls = useMemo(()=>clsx('fairys-valtio-form-item-body-error fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-_zkh1_10px_zhk2_ fairystaroform__z-10', {
-            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout,
-            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout,
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout && 'pc' !== platform,
+            'fairystaroform__bottom-_zkh1_-10px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'bottom-left' === errorLayout && 'pc' === platform,
+            'fairystaroform__bottom-_zkh1_-14px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout && 'pc' !== platform,
+            'fairystaroform__bottom-_zkh1_-10px_zhk2_ fairystaroform__right-0 fairystaroform__justify-end': 'bottom-right' === errorLayout && 'pc' === platform,
             'fairystaroform__top-_zkh1_-4px_zhk2_  fairystaroform__right-0 fairystaroform__justify-end': 'top-right' === errorLayout,
             'fairystaroform__top-_zkh1_-4px_zhk2_ fairystaroform__left-0 fairystaroform__justify-start': 'top-left' === errorLayout,
-            'fairystaroform__left-0  fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-start': 'left-border-top' === errorLayout,
-            'fairystaroform__right-0  fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-end': 'right-border-top' === errorLayout
+            'fairystaroform__left-0 fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-start': 'left-border-top' === errorLayout,
+            'fairystaroform__right-0 fairystaroform__bottom-_zkh1_-2px_zhk2_ fairystaroform__justify-end': 'right-border-top' === errorLayout,
+            'fairystaroform__px-_zkh1_4px_zhk2_': 'pc' === platform
         }), [
-        errorLayout
+        errorLayout,
+        platform
     ]);
     const styleBase = useMemo(()=>{
         const css = {};
@@ -166,6 +176,7 @@ function useFairysValtioFormItemAttrs(props) {
         error,
         _name,
         name,
+        id,
         paths,
         parentName,
         formAttrsNameInstance,
@@ -202,36 +213,42 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
+    const { name, valuePropName = 'value', getValuePath = valuePropName, getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules } = props;
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
     });
+    const id = useId(_name);
     const value = useMemo(()=>get(state, paths), [
         state,
         paths
     ]);
     const error = errorState[_name];
     formInstance.nameToPaths[_name] = paths;
-    if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
-    useEffect(()=>()=>{
+    useEffect(()=>{
+        if (Array.isArray(rules) && rules.length) formInstance.mountRules[_name] = rules;
+        return ()=>{
             formInstance.removeRules(_name);
-        }, [
-        _name
+        };
+    }, [
+        _name,
+        rules
     ]);
     const onValueChange = (event)=>{
-        let value = event;
+        let _value = event;
         const target = event?.detail || event?.target;
-        if ('function' == typeof getValueFromEvent) value = getValueFromEvent(event, formInstance);
-        else if (event && target && 'object' == typeof target && valuePropName in target) value = target.valuePropName;
-        if ('function' == typeof formatValue) value = formatValue(value, formInstance, event);
-        formInstance.updatedValueByPaths(_name, value);
-        if ('function' == typeof onAfterUpdate) onAfterUpdate(value, formInstance, event);
+        if ('function' == typeof getValueFromEvent) _value = getValueFromEvent(event, formInstance);
+        else if (event && target && 'object' == typeof target && getValuePath in target) _value = get(target, formatePath(getValuePath));
+        if ('function' == typeof formatValue) _value = formatValue(_value, formInstance, event);
+        if (value === _value) return;
+        formInstance.updatedValueByPaths(_name, _value);
+        if ('function' == typeof onAfterUpdate) onAfterUpdate(_value, formInstance, event);
     };
     const baseControl = {
         ...attrs,
         name,
+        id,
         [valuePropName]: value,
         [trigger]: onValueChange
     };
@@ -244,6 +261,7 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         formInstance,
         _name,
         name,
+        id,
         paths,
         parentName,
         formAttrsNameInstance,

package/esm/form/form.js

@@ -1,14 +1,16 @@
-import { useFairysValtioFormInstance } from "./instance/index.js";
-import { useMemo } from "react";
-function useFairysValtioForm(props) {
-    const { form, rules, formData, hideState, isDeepCopy = true, ...rest } = props;
+import { useFairysValtioFormInstance } from "../common/instance/index.js";
+import { useEffect, useImperativeHandle, useMemo } from "react";
+function useFairysValtioForm(props, ref) {
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
     const formInstance = useFairysValtioFormInstance(form);
     formInstance.rules = rules;
     useMemo(()=>formInstance.ctor({
             formData,
             hideState,
-            isDeepCopy
+            initFormDataType
         }), []);
+    useImperativeHandle(ref, ()=>formInstance);
+    useEffect(()=>()=>formInstance.clear(), []);
     return {
         ...rest,
         formInstance