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

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": "0.0.13",
+  "version": "1.0.0",
   "main": "esm/index.js",
   "types": "esm/index.d.ts",
   "module": "esm/index.js",
@@ -25,7 +25,7 @@
     "esm"
   ],
   "dependencies": {
-    "@fairys/valtio-form-basic": "^0.0.13"
+    "@fairys/valtio-form-basic": "^1.0.0"
   },
   "devDependencies": {
     "@types/react": "~18.2.21",

package/src/form.item.tsx

@@ -12,9 +12,9 @@ import { formItemStyles } from './styles/form.item';
 import type { FairysValtioFormItemAttrsProps } from './hooks/form.item';
 import { useFairysValtioFormItemAttrs, useFairysValtioFormItemNoStyleAttrs } from 'hooks/form.item';
 
-export interface FairysRNValtioFormItemProps<T extends MObject<T> = object>
+export interface FairysRNValtioFormItemProps<T extends MObject<T> = Record<string, any>>
   extends Omit<ViewProps, 'style'>,
-    FairysValtioFormItemAttrsProps {
+    FairysValtioFormItemAttrsProps<T> {
   /**是否使用控制隐藏的表单项*/
   isHide?: boolean;
   /**是否使用无样式表单项*/
@@ -22,7 +22,7 @@ export interface FairysRNValtioFormItemProps<T extends MObject<T> = object>
 }
 
 /**普通表单项*/
-export function FairysRNValtioFormItemBase<T extends MObject<T> = object>(
+export function FairysRNValtioFormItemBase<T extends MObject<T> = Record<string, any>>(
   props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
 ) {
   const { label, extra, helpText } = props;
@@ -99,7 +99,7 @@ export function FairysRNValtioFormItemBase<T extends MObject<T> = object>(
   );
 }
 /**控制隐藏的表单项*/
-export function FairysRNValtioFormHideItem<T extends MObject<T> = object>(
+export function FairysRNValtioFormHideItem<T extends MObject<T> = Record<string, any>>(
   props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
 ) {
   const [state] = useFairysValtioFormInstanceContextHideState();
@@ -111,7 +111,7 @@ export function FairysRNValtioFormHideItem<T extends MObject<T> = object>(
 }
 
 /**无样式表单项*/
-export function FairysRNValtioFormItemNoStyle<T extends MObject<T> = object>(
+export function FairysRNValtioFormItemNoStyle<T extends MObject<T> = Record<string, any>>(
   props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
 ) {
   const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
@@ -123,7 +123,9 @@ export function FairysRNValtioFormItemNoStyle<T extends MObject<T> = object>(
 }
 
 /**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
-export function FairysRNValtioFormItem<T extends MObject<T> = object>(props: FairysRNValtioFormItemProps<T>) {
+export function FairysRNValtioFormItem<T extends MObject<T> = Record<string, any>>(
+  props: FairysRNValtioFormItemProps<T>,
+) {
   const { isHide, noStyle, ...rest } = props;
   if (isHide) {
     return <FairysRNValtioFormHideItem<T> {...rest} />;

package/src/form.tsx

@@ -6,6 +6,8 @@ import {
   useFairysValtioFormInstanceContext,
   useFairysValtioFormInstanceContextState,
   useFairysValtioFormInstanceContextHideState,
+  useFairysValtioFormInstanceToState,
+  useFairysValtioFormInstanceToHideState,
 } from '@fairys/valtio-form-basic/esm/common';
 
 import type { FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic/esm/common';
@@ -13,9 +15,10 @@ import type { FairysValtioFormAttrsProps } from 'hooks/form';
 import { useFairysValtioForm } from 'hooks/form';
 import React from 'react';
 
-export interface FairysRNValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {}
+export interface FairysRNValtioFormProps<T extends MObject<T> = Record<string, any>>
+  extends FairysValtioFormAttrsProps<T> {}
 
-function FairysRNValtioFormBase<T extends MObject<T> = object>(
+function FairysRNValtioFormBase<T extends MObject<T> = Record<string, any>>(
   props: FairysRNValtioFormProps<T>,
   ref: React.Ref<FairysValtioFormInstance<T>>,
 ) {
@@ -44,6 +47,10 @@ export const FairysRNValtioForm = React.forwardRef(
   FormItem: typeof FairysRNValtioFormItem;
   /**隐藏表单项组件*/
   FormHideItem: typeof FairysRNValtioFormHideItem;
+  /**传递表单实例获取状态*/
+  useFormInstanceToState: typeof useFairysValtioFormInstanceToState;
+  /**传递表单实例获取隐藏状态*/
+  useFormInstanceToHideState: typeof useFairysValtioFormInstanceToHideState;
 };
 /**初始化实例*/
 FairysRNValtioForm.useForm = useFairysValtioFormInstance;
@@ -59,3 +66,7 @@ FairysRNValtioForm.FormItemBase = FairysRNValtioFormItemBase;
 FairysRNValtioForm.FormItem = FairysRNValtioFormItem;
 /**隐藏表单想*/
 FairysRNValtioForm.FormHideItem = FairysRNValtioFormHideItem;
+/**传递表单实例获取状态*/
+FairysRNValtioForm.useFormInstanceToState = useFairysValtioFormInstanceToState;
+/**传递表单实例获取隐藏状态*/
+FairysRNValtioForm.useFormInstanceToHideState = useFairysValtioFormInstanceToHideState;

package/src/hooks/form.item.ts

@@ -17,27 +17,27 @@ import {
 import { formItemStyles } from 'styles/form.item';
 import { FairysValtioFormLayoutContextOptions, useFairysValtioFormLayoutContext } from './layout';
 
-export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object>
+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 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';
@@ -75,6 +75,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     isInvalidTextRed = parent_isInvalidTextRed,
     isJoinParentField = true,
     rules,
+    isRemoveValueOnUnmount = true,
   } = props;
   const {
     name: _name,
@@ -110,6 +111,14 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     };
   }, [_name, rules]);
 
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
+
   const onValueChange = (event: any) => {
     let newValue = event;
     const target = event?.nativeEvent;
@@ -287,7 +296,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;
   /**是否校验错误*/
@@ -329,15 +338,26 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
   /**是否显示冒号*/
   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;
@@ -345,14 +365,8 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
 
 /**
  * 没有样式的表单项属性，仅返回基础输入组件参数
- * 
- * @example
- * 
- *```tsx 
-
- * ```
-*/
-export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+ */
+export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = Record<string, any>>(
   props: FairysValtioFormItemAttrsProps<T>,
 ) {
   const {
@@ -368,6 +382,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
     isJoinParentField = true,
     rules,
     isRequired: _isRequired,
+    isRemoveValueOnUnmount = true,
   } = props;
   const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
   const {
@@ -392,7 +407,13 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
       formInstance.removeRules(_name);
     };
   }, [_name, rules]);
-
+  useEffect(() => {
+    return () => {
+      if (isRemoveValueOnUnmount) {
+        formInstance.removeValueByPaths(_name);
+      }
+    };
+  }, []);
   const onValueChange = (event: any) => {
     let newValue = event;
     const target = event?.nativeEvent;
@@ -458,7 +479,7 @@ export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = objec
   } as FairysValtioFormItemNoStyleAttrsReturn<T>;
 }
 
-export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = object> {
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = Record<string, any>> {
   /**表单项值*/
   value?: any;
   /**是否校验错误*/

package/src/hooks/form.ts

@@ -4,7 +4,8 @@ import { useMemo, type ReactNode, useImperativeHandle, 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>;
   /**子元素*/
@@ -25,14 +26,9 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
 
 /**
  * 表单属性处理
- * 
- * @example
- * 
- * ```tsx
-
- * ```
-*/
-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>>,
 ) {
@@ -48,5 +44,7 @@ export function useFairysValtioForm<T extends MObject<T> = object>(
   return {
     ...rest,
     formInstance,
+  } as Omit<FairysValtioFormAttrsProps<T>, 'initFormDataType' | 'form' | 'rules' | 'formData' | 'hideState'> & {
+    formInstance: FairysValtioFormInstance<T>;
   };
 }

package/src/hooks/layout.ts

@@ -82,19 +82,13 @@ export const FairysValtioFormLayoutContext = createContext<FairysValtioFormLayou
 export const useFairysValtioFormLayoutContext = () => {
   const instance = useContext(FairysValtioFormLayoutContext);
   const state = useSnapshot(instance.state);
-  return [state, instance] as const;
+  return [state, instance] as [FairysValtioFormLayoutContextOptions, FairysValtioFormLayoutInstance];
 };
 
 /**
  * 布局属性处理
- * 
- * @example
- * 
- * ```tsx
-
-  ```
- * 
-*/
+ *
+ */
 export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttrsProps) {
   const formLayoutInstance = useFairysValtioFormLayoutInstance();
   const [state] = useFairysValtioFormLayoutContext();