@fairys/valtio-form-basic 0.0.13 → 1.0.0

package/lib/form/form.js

@@ -29,9 +29,10 @@ __webpack_require__.d(__webpack_exports__, {
 const index_js_namespaceObject = require("../common/instance/index.js");
 const external_react_namespaceObject = require("react");
 function useFairysValtioForm(props, ref) {
-    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+    const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
     const formInstance = (0, index_js_namespaceObject.useFairysValtioFormInstance)(form);
     formInstance.rules = rules;
+    formInstance.onValuesChange = onValuesChange;
     (0, external_react_namespaceObject.useMemo)(()=>formInstance.ctor({
             formData,
             hideState,

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "使用 valtio 实现的表单基础库, 使其更加便捷，同时支持`PC`、`H5`、`Taro`，同时也更加灵活。",
   "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
-  "version": "0.0.13",
+  "version": "1.0.0",
   "main": "lib/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",

package/src/common/instance/index.ts

@@ -3,11 +3,17 @@ import { createContext, useContext, useRef } from 'react';
 import { proxy, ref, snapshot, useSnapshot, unstable_getInternalStates } from 'valtio';
 import AsyncValidator, { RuleItem, ValidateFieldsError, Values } from 'async-validator';
 import { copy } from 'fast-copy';
-import { formatePath, get, set, isObject } from 'common/utils';
+import { formatePath, get, set, isObject, removeValueByPaths } from 'common/utils';
 import { FairysValtioFormAttrsProps } from 'form/form';
 
 /**表单实例*/
 export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
   /***
    * 判断值是否为代理对象
    * @param value 值
@@ -46,25 +52,26 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
     initFormDataType?: FairysValtioFormAttrsProps['initFormDataType'];
   }) => {
     const { formData, hideState, initFormDataType = 'deepCopy' } = options || {};
-    this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
-    this.nameToPaths = {}; //表单项名称到路径映射
-    // 如果是 isProxy,则直接赋值
-    this.errorState = proxy<Record<PropertyKey, string[]>>({});
-    this.hideState = proxy<Record<PropertyKey, boolean>>(hideState ? copy(hideState) : {});
+    this.clear();
+    this.updatedHideInfo(hideState ? copy(hideState) : {});
     // 判断是否是代理对象
     const isValtioProxy = this.isValtioProxy(formData);
     if (isValtioProxy) {
       if (initFormDataType === 'deepCopy') {
-        this.state = proxy(copy(snapshot(formData)) as T);
+        // this.state = proxy(copy(snapshot(formData)) as T);
+        this.updated(copy(snapshot(formData)) as T, false);
       } else {
-        this.state = formData as T;
+        // this.state = formData as T;
+        this.updated(formData as T, false);
       }
     } else {
       if (initFormDataType === 'deepCopy') {
-        this.state = proxy(copy(formData || {}) as T);
+        // this.state = proxy(copy(formData || {}) as T);
+        this.updated(copy(formData || {}) as T, false);
       }
       {
-        this.state = proxy((formData || {}) as T);
+        // this.state = proxy((formData || {}) as T);
+        this.updated((formData || {}) as T, false);
       }
     }
   };
@@ -91,7 +98,28 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   updatedValueByPaths = (path: PropertyKey, value: any) => {
     set(this.state, formatePath(path), value);
     this.validate([path], false);
+    this.onValuesChange?.(path, value);
+  };
+
+  /**表单项卸载移除保存值*/
+  removeValueByPaths = (path: PropertyKey) => {
+    removeValueByPaths(this.state, formatePath(path));
   };
+  /**
+   * 清理值
+   */
+  clearValue = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.state) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.state[field];
+    }
+    return this;
+  };
+
   // ===================================================隐藏状态================================================================
   /**
    * 更新行数据的隐藏信息
@@ -154,9 +182,9 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * 清理所有数据
    */
   clear = () => {
-    this.state = proxy<T>({} as T); //表单值
-    this.errorState = proxy<Record<PropertyKey, string[]>>({}); //错误信息
-    this.hideState = proxy<Record<PropertyKey, boolean>>({}); //隐藏状态
+    this.clearValue();
+    this.clearHideInfo();
+    this.clearErrorInfo();
     this.mountRules = {}; //由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)
     this.rules = {}; //表单项规则
     this.nameToPaths = {}; //表单项名称到路径映射
@@ -177,7 +205,10 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
    * @param fields 要验证的字段(可选)
    * @param isReturn 是否返回验证结果(可选)
    */
-  validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+  validate = async (
+    fields?: PropertyKey[],
+    isReturn: boolean = true,
+  ): Promise<ValidateFieldsError | Values | Partial<T>> => {
     const rules = {
       ...this.rules,
       ...this.mountRules,
@@ -251,7 +282,9 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
 }
 
 /**声明实例*/
-export function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>) {
+export function useFairysValtioFormInstance<T extends MObject<T> = Record<string, any>>(
+  instance?: FairysValtioFormInstance<T>,
+) {
   const ref = useRef<FairysValtioFormInstance<T>>();
   if (!ref.current) {
     if (instance) {
@@ -269,12 +302,12 @@ export const FairysValtioFormInstanceContext = createContext<FairysValtioFormIns
 );
 
 /**表单实例上下文*/
-export function useFairysValtioFormInstanceContext<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContext<T extends MObject<T> = Record<string, any>>() {
   return useContext(FairysValtioFormInstanceContext) as FairysValtioFormInstance<T>;
 }
 
 /**状态取值*/
-export function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const state = useSnapshot(instance.state) as T;
   const errorState = useSnapshot(instance.errorState) as Record<PropertyKey, string[]>;
@@ -288,7 +321,7 @@ export function useFairysValtioFormInstanceContextState<T extends MObject<T> = o
 }
 
 /**隐藏组件状态取值*/
-export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>() {
+export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = Record<string, any>>() {
   const instance = useFairysValtioFormInstanceContext<T>();
   const hideState = useSnapshot(instance.hideState) as Record<PropertyKey, boolean>;
   return [hideState, instance, (hideState as any).__defaultValue] as [
@@ -297,3 +330,21 @@ export function useFairysValtioFormInstanceContextHideState<T extends MObject<T>
     any,
   ];
 }
+/**
+ * 传递表单实例获取状态
+ */
+export function useFairysValtioFormInstanceToState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const state = useSnapshot(formInstance.state) as T;
+  return state as T;
+}
+/**
+ * 传递表单实例获取隐藏状态
+ */
+export function useFairysValtioFormInstanceToHideState<T extends MObject<T> = Record<string, any>>(
+  formInstance: FairysValtioFormInstance<T>,
+) {
+  const hideState = useSnapshot(formInstance.hideState) as Record<PropertyKey, boolean>;
+  return hideState as Record<PropertyKey, boolean>;
+}

package/src/common/utils/index.ts

@@ -50,6 +50,25 @@ export function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TD
   return current;
 }
 
+/***
+ * 移除值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export function removeValueByPaths(value: any, segments: PropertyKey[]) {
+  // 移除字段
+  let current: any = 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];
+    }
+  }
+}
+
 /***
  * 格式化路径，将路径中的数组索引转换为数字
  * @param path 路径

package/src/form/form.item.tsx

@@ -9,7 +9,7 @@ import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName, useId } from
 import { formatePath, get } from 'common/utils';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> {
   /**平台*/
   platform?: 'pc' | 'rn' | 'taro';
   /**
@@ -81,6 +81,11 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   isJoinParentField?: boolean;
   /**校验规则*/
   rules?: RuleItem[];
+
+  /**卸载移除数据值
+   * @default true
+   */
+  isRemoveValueOnUnmount?: boolean;
 }
 
 /**
@@ -126,7 +131,9 @@ export const FormItem = (props: FormItemProps) => {
  * ```
  * 
 */
-export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>) {
+export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
   const [layoutAttrs] = useFairysValtioFormLayoutContext();
   const colCount = layoutAttrs.colCount || 1;
   const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
@@ -173,6 +180,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     isJoinParentField = true,
     rules,
     platform = parent_platform,
+    isRemoveValueOnUnmount = true,
   } = props;
 
   const {
@@ -217,6 +225,14 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+
   /**基础组件参数*/
   const baseControl = {
     ...attrs,
@@ -420,7 +436,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   } as FairysValtioFormItemAttrsReturn<T>;
 }
 
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
   /**表单项值*/
   value?: any;
   /**是否校验错误*/
@@ -507,7 +523,7 @@ export const FormItem = (props: FormItemProps) => {
 }
  * ```
 */
-export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormItemAttrsProps<T>,
 ) {
   const {
@@ -522,6 +538,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     attrs = {},
     isJoinParentField = true,
     rules,
+    isRemoveValueOnUnmount = true,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -563,6 +580,13 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
       onAfterUpdate(_value, formInstance, event);
     }
   };
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
   /**基础组件参数*/
   const baseControl = {
     ...attrs,

package/src/form/form.tsx

@@ -4,7 +4,8 @@ import { useImperativeHandle, useMemo, type ReactNode, useEffect } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
 
-export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string, any>>
+  extends FairysValtioFormLayoutAttrsProps {
   /**表单实例*/
   form?: FairysValtioFormInstance<T>;
   /**子元素*/
@@ -21,6 +22,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
    * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
    */
   initFormDataType?: 'deepCopy' | 'immutable';
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 
 /**
@@ -43,14 +50,16 @@ export const Form = (props: FormProps) => {
 }
  * ```
 */
-export function useFairysValtioForm<T extends MObject<T> = object>(
+export function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormAttrsProps<T>,
   ref: React.Ref<FairysValtioFormInstance<T>>,
 ) {
-  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
+  const { form, rules, formData, hideState, initFormDataType = 'deepCopy', onValuesChange, ...rest } = props;
   const formInstance = useFairysValtioFormInstance(form);
   /**表单规则*/
   formInstance.rules = rules;
+  /**表单值改变时回调*/
+  formInstance.onValuesChange = onValuesChange;
   /**初始化表单值*/
   useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
   useImperativeHandle(ref, () => formInstance);