@fairys/rn-valtio-form-basic 1.0.1 → 1.0.3

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.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/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.1",
+  "version": "1.0.3",
   "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.1"
+    "@fairys/valtio-form-basic": "^1.0.3"
   },
   "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);
+      }
+    };
+  }, []);
+}