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

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

@@ -4,23 +4,20 @@ import { ViewProps } from 'react-native';
 import type { MObject, FairysValtioFormItemAttrsProps as _FairysValtioFormItemAttrsProps } from '@fairys/valtio-form-basic';
 import { FairysValtioFormInstance, FairysValtioFormParentAttrs } from '@fairys/valtio-form-basic/esm/common';
 import { FairysValtioFormLayoutContextOptions } from './layout';
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> extends Omit<_FairysValtioFormItemAttrsProps<T>, 'style' | 'labelStyle' | 'bodyStyle' | 'rowSpan' | 'className' | 'labelClassName' | 'bodyClassName'> {
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = Record<string, any>> extends Omit<_FairysValtioFormItemAttrsProps<T>, 'style' | 'labelStyle' | 'bodyStyle' | 'rowSpan' | 'className' | 'labelClassName' | 'bodyClassName'> {
+    /**表单项样式*/
     style?: ViewProps['style'];
+    /**表单项标签样式*/
     labelStyle?: ViewProps['style'];
+    /**表单项主体样式*/
     bodyStyle?: ViewProps['style'];
 }
 /**
  * 处理表单表单项属性
  *
- * @example
- *
- * ```tsx
-
- * ```
- *
-*/
-export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
-export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+ */
+export declare function useFairysValtioFormItemAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemAttrsReturn<T>;
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = Record<string, any>> {
     /**表单项值*/
     value?: any;
     /**是否校验错误*/
@@ -61,30 +58,34 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
     formAttrsNameInstance: FairysValtioFormParentAttrs;
     /**是否显示冒号*/
     showColon: boolean;
+    /**表单项样式*/
     itemStyle: ViewProps['style'];
+    /**表单项容器样式*/
     itemContainerStyle: ViewProps['style'];
+    /**表单项标签样式*/
     itemLabelStyle: ViewProps['style'];
+    /**表单项标签文本样式*/
     itemLabelTextStyle: ViewProps['style'];
+    /**表单项标签显示冒号样式*/
     itemLabelShowColonStyle: ViewProps['style'];
+    /**表单项主体样式*/
     itemBodyStyle: ViewProps['style'];
+    /**表单项输入样式*/
     itemInputStyle: ViewProps['style'];
+    /**表单项额外样式*/
     itemExtraStyle: ViewProps['style'];
+    /**错误样式*/
     errorStyle: ViewProps['style'];
+    /**帮助样式*/
     helpStyle: ViewProps['style'];
     /**子元素*/
     children?: React.ReactNode;
 }
 /**
  * 没有样式的表单项属性，仅返回基础输入组件参数
- *
- * @example
- *
- *```tsx
-
- * ```
-*/
-export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
-export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = object> {
+ */
+export declare function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(props: FairysValtioFormItemAttrsProps<T>): FairysValtioFormItemNoStyleAttrsReturn<T>;
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
     /**表单项值*/
     value?: any;
     /**是否校验错误*/

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 } = 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 = true } = props;
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
         isJoinParentField
@@ -50,6 +50,9 @@ function useFairysValtioFormItemAttrs(props) {
         _name,
         rules
     ]);
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const onValueChange = (event)=>{
         let newValue = event;
         const target = event?.nativeEvent;
@@ -213,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 } = props;
+    const { name, valuePropName = 'value', getValuePath = 'text', getValueFromEvent, formatValue, onAfterUpdate, trigger = 'onChange', children, attrs = {}, isJoinParentField = true, rules, isRequired: _isRequired, isRemoveValueOnUnmount = true } = props;
     const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState();
     const { name: _name, paths, parentName, formAttrsNameInstance } = useFairysValtioFormAttrsName({
         name,
@@ -236,6 +239,9 @@ function useFairysValtioFormItemNoStyleAttrs(props) {
         _name,
         rules
     ]);
+    useEffect(()=>()=>{
+            if (isRemoveValueOnUnmount) formInstance.removeValueByPaths(_name);
+        }, []);
     const onValueChange = (event)=>{
         let newValue = event;
         const target = event?.nativeEvent;

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,