@fairys/rn-valtio-form-basic 1.0.0 → 1.0.2

package/README.md

@@ -236,11 +236,18 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string
      * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
     initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
+
 }
 /**
  * 表单属性处理
 */
-export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState"> & {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState"|"onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
 };
 

package/esm/form.item.js

@@ -3,7 +3,7 @@ import { Text, View } from "react-native";
 import { Fragment } from "react";
 import { FairysValtioFormParentAttrsContext, useFairysValtioFormInstanceContextHideState } from "@fairys/valtio-form-basic/esm/common";
 import { formItemStyles } from "./styles/form.item.js";
-import { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from "./hooks/form.item.js";
+import { useFairysValtioFormItemAttrs, useFairysValtioFormItemHideAttrs, useFairysValtioFormItemNoStyleAttrs } from "./hooks/form.item.js";
 function FairysRNValtioFormItemBase(props) {
     const { label, extra, helpText } = props;
     const { itemStyle, itemContainerStyle, itemLabelStyle, itemLabelTextStyle, itemLabelShowColonStyle, itemExtraStyle, itemInputStyle, itemBodyStyle, isInvalid, isRequired, showColon, formAttrsNameInstance, itemBorderType, errorStyle, helpStyle, error, children } = useFairysValtioFormItemAttrs(props);
@@ -74,10 +74,16 @@ function FairysRNValtioFormItemBase(props) {
         ]
     });
 }
+function FairysRNValtioFormHideItemEmpty(props) {
+    useFairysValtioFormItemHideAttrs(props);
+    return /*#__PURE__*/ jsx(Fragment, {});
+}
 function FairysRNValtioFormHideItem(props) {
     const [state] = useFairysValtioFormInstanceContextHideState();
     const isHide = state[props.name];
-    if (isHide) return /*#__PURE__*/ jsx(Fragment, {});
+    if (isHide) return /*#__PURE__*/ jsx(FairysRNValtioFormHideItemEmpty, {
+        ...props
+    });
     return /*#__PURE__*/ jsx(FairysRNValtioFormItemBase, {
         ...props
     });

package/esm/hooks/form.d.ts

@@ -20,11 +20,17 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string
      * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
      */
     initFormDataType?: 'deepCopy' | 'immutable';
+    /**
+     * 表单值改变时回调
+     * @param path 表单项路径
+     * @param value 表单项值
+     */
+    onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 /**
  * 表单属性处理
  *
  */
-export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState"> & {
+export declare function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): Omit<FairysValtioFormAttrsProps<T>, "initFormDataType" | "form" | "rules" | "formData" | "hideState" | "onValuesChange"> & {
     formInstance: FairysValtioFormInstance<T>;
 };

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

@@ -117,3 +117,7 @@ export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = R
     /**子元素*/
     children?: React.ReactNode;
 }
+/**
+ * 处理表单表单项属性，隐藏表单项时移除数据值
+ */
+export declare function useFairysValtioFormItemHideAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): void;

package/esm/hooks/form.item.js

@@ -16,7 +16,7 @@ function useFairysValtioFormItemAttrs(props) {
     const parent_isInvalidBorderRed = layoutAttrs.isInvalidBorderRed;
     const parent_isInvalidTextRed = layoutAttrs.isInvalidTextRed;
     const parent_showColon = layoutAttrs.showColon;
-    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', style, labelStyle, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, isRemoveValueOnUnmount = true } = props;
+    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', style, labelStyle, bodyStyle, children, labelMode = parent_labelMode, errorLayout = parent_errorLayout, colSpan = 1, isRequired: _isRequired, itemBorderType = parent_borderedType, attrs = {}, showColon = parent_showColon, itemBorderColor = parent_itemBorderColor, isInvalidBorderRed = parent_isInvalidBorderRed, isInvalidTextRed = parent_isInvalidTextRed, isJoinParentField = true, rules, isRemoveValueOnUnmount = false } = props;
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
@@ -216,7 +216,7 @@ function useFairysValtioFormItemAttrs(props) {
     };
 }
 function useFairysValtioFormItemNoStyleAttrs(props) {
-    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRequired: _isRequired, isRemoveValueOnUnmount = true } = props;
+    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRequired: _isRequired, isRemoveValueOnUnmount = false } = props;
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
@@ -295,4 +295,15 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         }) : children
     };
 }
-export { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs };
+function useFairysValtioFormItemHideAttrs(props) {
+    const { name, isJoinParentField = true, isHideRemoveValue = true } = props;
+    const [, , formInstance] = useFairysValtioFormInstanceContextState();
+    const { name: _name } = useFairysValtioFormAttrsName({
+        name,
+        isJoinParentField
+    });
+    useEffect(()=>()=>{
+            if (isHideRemoveValue) formInstance.removeValueByPaths(_name);
+        }, []);
+}
+export { useFairysValtioFormItemAttrs, useFairysValtioFormItemHideAttrs, useFairysValtioFormItemNoStyleAttrs };

package/esm/hooks/form.js

@@ -1,9 +1,10 @@
 import { useFairysValtioFormInstance } from "@fairys/valtio-form-basic/esm/common";
 import { useEffect, useImperativeHandle, useMemo } from "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 = useFairysValtioFormInstance(form);
     formInstance.rules = rules;
+    formInstance.onValuesChange = onValuesChange;
     useMemo(()=>formInstance.ctor({
             formData,
             hideState,

package/package.json

@@ -3,7 +3,7 @@
   "author": "SunLxy <1011771396@qq.com>",
   "description": "rn表单框架组件",
   "homepage": "https://github.com/autumn-fairy-tales/valtio-form-basic",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "main": "esm/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",
@@ -25,7 +25,7 @@
     "esm"
   ],
   "dependencies": {
-    "@fairys/valtio-form-basic": "^1.0.0"
+    "@fairys/valtio-form-basic": "^1.0.2"
   },
   "devDependencies": {
     "@types/react": "~18.2.21",

package/src/form.item.tsx

@@ -10,7 +10,11 @@ import {
 } from '@fairys/valtio-form-basic/esm/common';
 import { formItemStyles } from './styles/form.item';
 import type { FairysValtioFormItemAttrsProps } from './hooks/form.item';
-import { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from 'hooks/form.item';
+import {
+  useFairysValtioFormItemAttrs,
+  useFairysValtioFormItemNoStyleAttrs,
+  useFairysValtioFormItemHideAttrs,
+} from 'hooks/form.item';
 
 export interface FairysRNValtioFormItemProps<T extends MObject<T> = Record<string, any>>
   extends Omit<ViewProps, 'style'>,
@@ -98,6 +102,15 @@ export function FairysRNValtioFormItemBase<T extends MObject<T> = Record<string,
     </View>
   );
 }
+
+/**隐藏表单项的空组件*/
+function FairysRNValtioFormHideItemEmpty<T extends MObject<T> = Record<string, any>>(
+  props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  useFairysValtioFormItemHideAttrs(props);
+  return <Fragment />;
+}
+
 /**控制隐藏的表单项*/
 export function FairysRNValtioFormHideItem<T extends MObject<T> = Record<string, any>>(
   props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
@@ -105,7 +118,7 @@ export function FairysRNValtioFormHideItem<T extends MObject<T> = Record<string,
   const [state] = useFairysValtioFormInstanceContextHideState();
   const isHide = state[props.name];
   if (isHide) {
-    return <Fragment />;
+    return <FairysRNValtioFormHideItemEmpty<T> {...props} />;
   }
   return <FairysRNValtioFormItemBase<T> {...props} />;
 }

package/src/hooks/form.item.ts

@@ -75,7 +75,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<strin
     isInvalidTextRed = parent_isInvalidTextRed,
     isJoinParentField = true,
     rules,
-    isRemoveValueOnUnmount = true,
+    isRemoveValueOnUnmount = false,
   } = props;
   const {
     name: _name,
@@ -382,7 +382,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Recor
     isJoinParentField = true,
     rules,
     isRequired: _isRequired,
-    isRemoveValueOnUnmount = true,
+    isRemoveValueOnUnmount = false,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -511,3 +511,21 @@ export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = R
   /**子元素*/
   children?: React.ReactNode;
 }
+
+/**
+ * 处理表单表单项属性，隐藏表单项时移除数据值
+ */
+export function useFairysValtioFormItemHideAttrs<T extends MObject<T> = Record<string, any>>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
+  const { name, isJoinParentField = true, isHideRemoveValue = true } = props;
+  const [, , formInstance] = useFairysValtioFormInstanceContextState<T>();
+  const { name: _name } = useFairysValtioFormAttrsName({ name, isJoinParentField });
+  useEffect(() => {
+    return () => {
+      if (isHideRemoveValue) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+}

package/src/hooks/form.ts

@@ -22,6 +22,12 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = Record<string
    * - immutable：直接使用对象(注意：当传递的不是`valtio`的`proxy`对象时，会使用`valtio`中的`proxy`声明)
    */
   initFormDataType?: 'deepCopy' | 'immutable';
+  /**
+   * 表单值改变时回调
+   * @param path 表单项路径
+   * @param value 表单项值
+   */
+  onValuesChange?: (path: PropertyKey, value: any) => void;
 }
 
 /**
@@ -32,10 +38,12 @@ 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);
@@ -44,7 +52,10 @@ export function useFairysValtioForm<T extends MObject<T> = Record<string, any>>(
   return {
     ...rest,
     formInstance,
-  } as Omit<FairysValtioFormAttrsProps<T>, 'initFormDataType' | 'form' | 'rules' | 'formData' | 'hideState'> & {
+  } as Omit<
+    FairysValtioFormAttrsProps<T>,
+    'initFormDataType' | 'form' | 'rules' | 'formData' | 'hideState' | 'onValuesChange'
+  > & {
     formInstance: FairysValtioFormInstance<T>;
   };
 }