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

package/esm/form.d.ts

@@ -1,16 +1,25 @@
 import { FairysRNValtioFormItem, FairysRNValtioFormHideItem, FairysRNValtioFormItemBase } from './form.item';
 import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic/esm/common';
-import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import type { FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic/esm/common';
 import type { FairysValtioFormAttrsProps } from './hooks/form';
+import React from 'react';
 export interface FairysRNValtioFormProps<T extends MObject<T> = object> extends FairysValtioFormAttrsProps<T> {
 }
-export declare function FairysRNValtioForm<T extends MObject<T> = object>(props: FairysRNValtioFormProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace FairysRNValtioForm {
-    var useForm: typeof useFairysValtioFormInstance;
-    var useFormState: typeof useFairysValtioFormInstanceContextState;
-    var useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
-    var useFormInstance: typeof useFairysValtioFormInstanceContext;
-    var FormItemBase: typeof FairysRNValtioFormItemBase;
-    var FormItem: typeof FairysRNValtioFormItem;
-    var FormHideItem: typeof FairysRNValtioFormHideItem;
-}
+declare function FairysRNValtioFormBase<T extends MObject<T> = object>(props: FairysRNValtioFormProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): import("react/jsx-runtime").JSX.Element;
+export declare const FairysRNValtioForm: typeof FairysRNValtioFormBase & {
+    /**初始化实例*/
+    useForm: typeof useFairysValtioFormInstance;
+    /**获取状态*/
+    useFormState: typeof useFairysValtioFormInstanceContextState;
+    /**获取隐藏状态*/
+    useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+    /**获取上下文实例*/
+    useFormInstance: typeof useFairysValtioFormInstanceContext;
+    /**表单项基础组件*/
+    FormItemBase: typeof FairysRNValtioFormItemBase;
+    /**表单项组件*/
+    FormItem: typeof FairysRNValtioFormItem;
+    /**隐藏表单项组件*/
+    FormHideItem: typeof FairysRNValtioFormHideItem;
+};
+export {};

package/esm/form.js

@@ -3,8 +3,9 @@ import { FairysRNValtioFormLayout } from "./layout.js";
 import { FairysRNValtioFormHideItem, FairysRNValtioFormItem, FairysRNValtioFormItemBase } from "./form.item.js";
 import { FairysValtioFormInstanceContext, useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextHideState, useFairysValtioFormInstanceContextState } from "@fairys/valtio-form-basic/esm/common";
 import { useFairysValtioForm } from "./hooks/form.js";
-function FairysRNValtioForm(props) {
-    const { formInstance, children, ...rest } = useFairysValtioForm(props);
+import react from "react";
+function FairysRNValtioFormBase(props, ref) {
+    const { formInstance, children, ...rest } = useFairysValtioForm(props, ref);
     return /*#__PURE__*/ jsx(FairysValtioFormInstanceContext.Provider, {
         value: formInstance,
         children: /*#__PURE__*/ jsx(FairysRNValtioFormLayout, {
@@ -13,6 +14,7 @@ function FairysRNValtioForm(props) {
         })
     });
 }
+const FairysRNValtioForm = /*#__PURE__*/ react.forwardRef(FairysRNValtioFormBase);
 FairysRNValtioForm.useForm = useFairysValtioFormInstance;
 FairysRNValtioForm.useFormState = useFairysValtioFormInstanceContextState;
 FairysRNValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;

package/esm/hooks/form.d.ts

@@ -30,7 +30,7 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
 
  * ```
 */
-export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>): {
+export declare function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>, ref: React.Ref<FairysValtioFormInstance<T>>): {
     formInstance: FairysValtioFormInstance<T>;
     /**子元素*/
     children: ReactNode;

package/esm/hooks/form.js

@@ -1,6 +1,6 @@
 import { useFairysValtioFormInstance } from "@fairys/valtio-form-basic/esm/common";
-import { useMemo } from "react";
-function useFairysValtioForm(props) {
+import { useEffect, useImperativeHandle, useMemo } from "react";
+function useFairysValtioForm(props, ref) {
     const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
     const formInstance = useFairysValtioFormInstance(form);
     formInstance.rules = rules;
@@ -9,6 +9,8 @@ function useFairysValtioForm(props) {
             hideState,
             initFormDataType
         }), []);
+    useImperativeHandle(ref, ()=>formInstance);
+    useEffect(()=>()=>formInstance.clear(), []);
     return {
         ...rest,
         formInstance

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

package/src/form.tsx

@@ -8,20 +8,43 @@ import {
   useFairysValtioFormInstanceContextHideState,
 } from '@fairys/valtio-form-basic/esm/common';
 
-import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import type { FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic/esm/common';
 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 function FairysRNValtioForm<T extends MObject<T> = object>(props: FairysRNValtioFormProps<T>) {
-  const { formInstance, children, ...rest } = useFairysValtioForm(props);
+function FairysRNValtioFormBase<T extends MObject<T> = object>(
+  props: FairysRNValtioFormProps<T>,
+  ref: React.Ref<FairysValtioFormInstance<T>>,
+) {
+  const { formInstance, children, ...rest } = useFairysValtioForm(props, ref);
   return (
     <FairysValtioFormInstanceContext.Provider value={formInstance}>
       <FairysRNValtioFormLayout {...rest}>{children}</FairysRNValtioFormLayout>
     </FairysValtioFormInstanceContext.Provider>
   );
 }
+
+export const FairysRNValtioForm = React.forwardRef(
+  FairysRNValtioFormBase,
+) as unknown as typeof FairysRNValtioFormBase & {
+  /**初始化实例*/
+  useForm: typeof useFairysValtioFormInstance;
+  /**获取状态*/
+  useFormState: typeof useFairysValtioFormInstanceContextState;
+  /**获取隐藏状态*/
+  useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
+  /**获取上下文实例*/
+  useFormInstance: typeof useFairysValtioFormInstanceContext;
+  /**表单项基础组件*/
+  FormItemBase: typeof FairysRNValtioFormItemBase;
+  /**表单项组件*/
+  FormItem: typeof FairysRNValtioFormItem;
+  /**隐藏表单项组件*/
+  FormHideItem: typeof FairysRNValtioFormHideItem;
+};
 /**初始化实例*/
 FairysRNValtioForm.useForm = useFairysValtioFormInstance;
 /**获取状态*/

package/src/hooks/form.ts

@@ -1,6 +1,6 @@
 import type { MObject } from '@fairys/valtio-form-basic/esm/common';
 import { FairysValtioFormInstance, useFairysValtioFormInstance } from '@fairys/valtio-form-basic/esm/common';
-import { useMemo, type ReactNode } from 'react';
+import { useMemo, type ReactNode, useImperativeHandle, useEffect } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
 import { RuleItem } from 'async-validator';
 
@@ -32,13 +32,19 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
 
  * ```
 */
-export function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>) {
+export function useFairysValtioForm<T extends MObject<T> = object>(
+  props: FairysValtioFormAttrsProps<T>,
+  ref: React.Ref<FairysValtioFormInstance<T>>,
+) {
   const { form, rules, formData, hideState, initFormDataType = 'deepCopy', ...rest } = props;
   const formInstance = useFairysValtioFormInstance(form);
   /**表单规则*/
   formInstance.rules = rules;
   /**初始化表单值*/
   useMemo(() => formInstance.ctor({ formData, hideState, initFormDataType }), []);
+  useImperativeHandle(ref, () => formInstance);
+  /**卸载清空所有数据*/
+  useEffect(() => () => formInstance.clear(), []);
   return {
     ...rest,
     formInstance,