@fairys/valtio-form-basic 0.0.8

package/src/form/form.item.tsx

@@ -0,0 +1,382 @@
+/**表单项*/
+
+import { MObject } from 'interface';
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { useFairysValtioFormInstanceContextState, FairysValtioFormInstance } from './instance';
+import { useFairysValtioFormLayoutContext, FairysValtioFormLayoutContextOptions } from './layout';
+
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
+  /**表单项名称*/
+  name: string;
+  /**表单项标签*/
+  label?: string;
+  /**传递组件字段*/
+  valuePropName?: string;
+  /**自定义获取值*/
+  getValueFromEvent?: (event: any, form: FairysValtioFormInstance<T>) => any;
+  /**值格式化*/
+  formatValue?: (value: any, form: FairysValtioFormInstance<T>, event: any) => any;
+  /**触发数据更新之后触发（用于数据联动之类的）*/
+  onAfterUpdate?: (value: any, form: FairysValtioFormInstance<T>, event: any) => void;
+  /**事件名称*/
+  trigger?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  labelClassName?: string;
+  labelStyle?: React.CSSProperties;
+  bodyClassName?: string;
+  bodyStyle?: React.CSSProperties;
+  children?: React.ReactNode;
+  /**规则校验失败错误提示位置*/
+  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  /**label显示模式*/
+  labelMode?: 'left' | 'top' | 'between';
+  /**额外内容*/
+  extra?: React.ReactNode;
+  /**底部提示内容*/
+  helpText?: React.ReactNode;
+  /**
+   * 表单项占据列数
+   * @default 1
+   */
+  colSpan?: number;
+  /**
+   * 表单项占据行数
+   * @default 1
+   */
+  rowSpan?: number;
+  /**是否必填*/
+  isRequired?: boolean;
+  /**是否显示冒号*/
+  showColon?: boolean;
+  /**底部显示边框*/
+  borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+  /**输入框属性*/
+  attrs?: any;
+}
+
+/**
+ * 处理表单表单项属性
+ * 
+ * @example
+ * 
+ * ```tsx
+import { Fragment } from 'react'
+import { useFairysValtioFormItemAttrs } from "@fairys/valtio-form"
+import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
+export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
+
+export const FormItem = (props: FormItemProps) => {
+  const { label, extra, helpText } = props
+  const {
+    itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle,
+    itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName,
+    isInvalid, borderedType, children, error
+  } = useFairysValtioFormItemAttrs(props)
+
+  return (
+    <View className={itemClassName} style={itemStyle}>
+      <View className={containerClassName}>
+        <View className={itemLabelClassName} style={itemLabelStyle}>
+          {label}
+        </View>
+        <View className={itemBodyClassName} style={itemBodyStyle}>
+          <View className={itemInputClassName}>
+            {children}
+          </View>
+          {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
+          {borderedType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
+        </View>
+      </View>
+      {helpText ? <View className={helpClassName}>{helpText}</View> : <Fragment />}
+      {isInvalid && borderedType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
+    </View>
+  );
+}
+ * ```
+ * 
+*/
+export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(props: FairysValtioFormItemAttrsProps<T>) {
+  const [layoutAttrs] = useFairysValtioFormLayoutContext();
+  const colCount = layoutAttrs.colCount || 1;
+  const parent_borderedType = layoutAttrs.borderedType || 'bottom';
+  const parent_errorLayout = layoutAttrs.errorLayout || 'right-bottom';
+  const parent_formItemClassName = layoutAttrs.formItemClassName;
+  const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
+  const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+  const parent_formItemStyle = layoutAttrs.formItemStyle;
+  const parent_formItemBodyClassName = layoutAttrs.formItemBodyClassName;
+  const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
+  const parent_labelMode = layoutAttrs.labelMode || 'between';
+  const {
+    name,
+    valuePropName = 'value',
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    trigger = 'onChange',
+    className,
+    style,
+    labelClassName,
+    labelStyle,
+    bodyClassName,
+    bodyStyle,
+    children,
+    labelMode = parent_labelMode,
+    errorLayout = parent_errorLayout,
+    colSpan = 1,
+    rowSpan = 1,
+    isRequired: _isRequired,
+    borderedType = parent_borderedType,
+    attrs = {},
+    showColon = false,
+  } = props;
+  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
+  const rules = formInstance.rules?.[name];
+  const value = state[name];
+  const error = errorState[name];
+
+  const onValueChange = (event: any) => {
+    let value = event;
+    const target = event?.detail || event?.target;
+    if (typeof getValueFromEvent === 'function') {
+      value = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && valuePropName in target) {
+      value = target.valuePropName;
+    }
+    if (typeof formatValue === 'function') {
+      value = formatValue(value, formInstance, event);
+    }
+    formInstance.updated({ [name]: value });
+    if (typeof onAfterUpdate === 'function') {
+      onAfterUpdate(value, formInstance, event);
+    }
+  };
+
+  /**基础组件参数*/
+  const baseControl = {
+    ...attrs,
+    name,
+    [valuePropName]: value,
+    [trigger]: onValueChange,
+  };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
+
+  /**表单项类名*/
+  const item_cls = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-item fairystaroform__p-[4px] fairystaroform__text-[12px] fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all',
+      {
+        'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200':
+          borderedType === 'bottom',
+        [labelMode]: labelMode,
+      },
+      className,
+      parent_formItemClassName,
+    );
+  }, [className, parent_formItemClassName, labelMode, borderedType]);
+
+  /**表单项容器类名*/
+  const itemContainer_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-valtio-form-item-container fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border',
+      {
+        'fairystaroform__flex-row fairystaroform__items-center fairystaroform__justify-between fairystaroform__gap-[8px]':
+          labelMode === 'between',
+        'fairystaroform__flex-col fairystaroform__gap-[4px]': labelMode === 'top',
+        'fairystaroform__flex-row fairystaroform__gap-[8px]': labelMode === 'left',
+      },
+      labelClassName,
+    );
+  }, [labelClassName, labelMode]);
+
+  /**表单项标签类名*/
+  const itemLabel_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-valtio-form-item-label fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border',
+      {
+        'fairystaroform__justify-start': labelMode !== 'left',
+        'fairystaroform__justify-end': labelMode === 'left',
+        required: isRequired,
+        'show-colon': showColon,
+      },
+      labelClassName,
+      parent_formItemLabelClassName,
+    );
+  }, [labelClassName, parent_formItemLabelClassName, labelMode, isRequired, showColon]);
+
+  /**表单项主体类名*/
+  const itemBody_cls = useMemo(() => {
+    // 默认两端显示
+    return clsx(
+      'fairys-valtio-form-item-body fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border',
+      {
+        'fairystaroform__flex-row fairystaroform__justify-start': labelMode === 'left',
+        'fairystaroform__flex-row fairystaroform__justify-end': labelMode === 'between' || labelMode === 'top',
+        'fairystaroform__flex-row': labelMode === 'top',
+        'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 ':
+          borderedType === 'body',
+      },
+      bodyClassName,
+      parent_formItemBodyClassName,
+    );
+  }, [bodyClassName, labelMode, borderedType, parent_formItemBodyClassName]);
+
+  // 表单项输入类名
+  const itemInput_cls = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-item-body fairystaroform__flex fairystaroform__flex-row fairystaroform__flex-1 fairystaroform__box-border',
+      {
+        'fairystaroform__justify-end fairystaroform__text-right': labelMode === 'between',
+        'fairystaroform__justify-start fairystaroform__text-left fairystaroform__items-center': labelMode !== 'between',
+      },
+    );
+  }, [labelMode]);
+
+  /**表单项额外内容类名*/
+  const itemExtra_cls = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center',
+    );
+  }, []);
+
+  /**表单项底部提示内容类名*/
+  const itemHelp_cls = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-item-body-help fairystaroform__text-[10px] fairystaroform__w-full fairystaroform__box-border',
+    );
+  }, []);
+
+  /**表单项错误提示类名*/
+  const itemError_cls = useMemo(() => {
+    return clsx(
+      'fairys-valtio-form-item-body-error fairystaroform__px-[4px] fairystaroform__w-full fairystaroform__flex fairystaroform__flex-row fairystaroform__box-border fairystaroform__text-red fairystaroform__absolute fairystaroform__text-[10px] fairystaroform__z-10',
+      {
+        'fairystaroform__bottom-[-14px] fairystaroform__left-0 fairystaroform__justify-start':
+          errorLayout === 'left-bottom',
+        'fairystaroform__bottom-[-14px] fairystaroform__right-0 fairystaroform__justify-end':
+          errorLayout === 'right-bottom',
+        'fairystaroform__top-[-14px]  fairystaroform__right-0 fairystaroform__justify-end': errorLayout === 'top-right',
+        'fairystaroform__top-[-14px]  fairystaroform__left-0 fairystaroform__justify-start': errorLayout === 'top-left',
+      },
+    );
+  }, [errorLayout]);
+
+  const styleBase = useMemo(() => {
+    const css: React.CSSProperties = {};
+    if (colSpan) {
+      const end = colCount > colSpan ? colSpan : colCount;
+      css.gridColumnEnd = `span ${end}`;
+    }
+    if (rowSpan) {
+      css.gridRowEnd = `span ${rowSpan}`;
+    }
+    return css;
+  }, [colSpan, rowSpan, colCount]);
+
+  return {
+    value,
+    isInvalid,
+    borderedType,
+    onValueChange,
+    colSpan,
+    rowSpan,
+    colCount,
+    labelMode,
+    errorLayout,
+    isRequired,
+    state,
+    errorState,
+    formInstance,
+    error,
+    // ================================================================================
+    itemClassName: item_cls,
+    itemStyle: { ...(parent_formItemStyle || {}), ...styleBase, ...(style || {}) },
+    containerClassName: itemContainer_cls,
+    itemLabelClassName: itemLabel_cls,
+    itemLabelStyle: { ...(parent_formItemLabelStyle || {}), ...(labelStyle || {}) },
+    itemBodyClassName: itemBody_cls,
+    itemBodyStyle: { ...(parent_formItemBodyStyle || {}), ...(bodyStyle || {}) },
+    itemInputClassName: itemInput_cls,
+    itemExtraClassName: itemExtra_cls,
+    errorClassName: itemError_cls,
+    helpClassName: itemHelp_cls,
+    children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
+  } as FairysValtioFormItemAttrsReturn<T>;
+}
+
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+  /**表单项值*/
+  value?: any;
+  /**是否校验错误*/
+  isInvalid?: boolean;
+  /**边框类型*/
+  borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+  /**值改变事件*/
+  onValueChange?: (event: any) => void;
+  /**当前表单项占据列数*/
+  colSpan?: number;
+  /**当前表单项占据行数*/
+  rowSpan?: number;
+  /**列数*/
+  colCount?: number;
+  /**标签显示模式*/
+  labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
+  /**错误提示位置*/
+  errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
+  /**是否必填*/
+  isRequired?: boolean;
+  /**表单状态*/
+  state?: T;
+  /**错误状态*/
+  errorState?: Record<PropertyKey, string[]>;
+  /**表单实例*/
+  formInstance?: FairysValtioFormInstance<T>;
+  /**错误信息*/
+  error?: string[];
+  // =========================================
+  /**表单项类名*/
+  itemClassName: string;
+  /**表单项样式*/
+  itemStyle: React.CSSProperties;
+  /**容器类名*/
+  containerClassName: string;
+  /**标签类名*/
+  itemLabelClassName: string;
+  /**标签样式*/
+  itemLabelStyle: React.CSSProperties;
+  /**体类名*/
+  itemBodyClassName: string;
+  /**体样式*/
+  itemBodyStyle: React.CSSProperties;
+  /**输入框类名*/
+  itemInputClassName: string;
+  /**额外内容类名*/
+  itemExtraClassName: string;
+  /**错误提示类名*/
+  errorClassName: string;
+  /**帮助提示类名*/
+  helpClassName: string;
+  /**子元素*/
+  children?: React.ReactNode;
+}

package/src/form/form.tsx

@@ -0,0 +1,68 @@
+import { MObject } from 'interface';
+import { FairysValtioFormInstance, useFairysValtioFormInstance } from './instance';
+import { useMemo, type ReactNode } from 'react';
+import { FairysValtioFormLayoutAttrsProps } from './layout';
+
+export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
+  /**表单实例*/
+  form?: FairysValtioFormInstance<T>;
+  /**子元素*/
+  children: ReactNode;
+  /**表单项规则*/
+  rules?: FairysValtioFormInstance<T>['rules'];
+  /**表单初始值*/
+  formData?: FairysValtioFormInstance<T>['state'];
+  /**表单隐藏状态*/
+  hideState?: FairysValtioFormInstance<T>['hideState'];
+  /**formData 是否进行深度拷贝，如果不是则直接把 formData 赋值到 state ，否则使用 copy 方法深度拷贝后赋值 */
+  isDeepCopy?: boolean;
+}
+
+/**
+ * 表单属性处理
+ * 
+ * @example
+ * 
+ * ```tsx
+import { useFairysValtioForm } from "@fairys/valtio-form"
+import type { FairysValtioFormAttrProps } from "@fairys/valtio-form"
+export interface FormProps extends FairysValtioFormAttrProps{}
+
+export const Form = (props: FormProps) => {
+  const { formInstance,children, ...rest } = useFairysValtioForm(props)
+  return  (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <布局组件 {...rest}>{children}</布局组件>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+ * ```
+*/
+export function useFairysValtioForm<T extends MObject<T> = object>(props: FairysValtioFormAttrsProps<T>) {
+  const { form, rules, formData, hideState, isDeepCopy = true, ...rest } = props;
+  const formInstance = useFairysValtioFormInstance(form);
+  /**表单规则*/
+  formInstance.rules = rules;
+  /**初始化表单值*/
+  useMemo(() => formInstance.ctor({ formData, hideState, isDeepCopy }), []);
+  return {
+    ...rest,
+    formInstance,
+  };
+  // return (
+  //   <FairysValtioFormInstanceContext.Provider value={formInstance}>
+  //     <FairysValtioFormLayout {...rest}>{children}</FairysValtioFormLayout>
+  //   </FairysValtioFormInstanceContext.Provider>
+  // );
+}
+
+// /**初始化实例*/
+// FairysValtioForm.useForm = useFairysValtioFormInstance;
+// /**获取状态*/
+// FairysValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+// /**获取隐藏状态*/
+// FairysValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+// /**获取上下文实例*/
+// FairysValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+// /**表单项*/
+// FairysValtioForm.useFormItemAttrs = useFairysValtioFormItemAttrs;

package/src/form/instance/index.ts

@@ -0,0 +1,219 @@
+import { MObject } from 'interface';
+import { createContext, useContext, useRef } from 'react';
+import { proxy, ref, snapshot, useSnapshot } from 'valtio';
+import AsyncValidator, { RuleItem, ValidateFieldsError, Values } from 'async-validator';
+import { copy } from 'fast-copy';
+
+/**表单实例*/
+export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
+  /**状态*/
+  state = proxy<T>({} as T);
+  /**
+   * 错误信息
+   */
+  errorState = proxy<Record<PropertyKey, string[]>>({});
+  /**隐藏状态*/
+  hideState = proxy<Record<PropertyKey, boolean>>({});
+  /**初始化表单值*/
+  ctor = (options?: { formData?: Partial<T>; hideState?: Record<PropertyKey, boolean>; isDeepCopy?: boolean }) => {
+    const { formData, hideState, isDeepCopy = true } = options || {};
+    // 如果是 isProxy,则直接赋值
+    this.errorState = proxy<Record<PropertyKey, string[]>>({});
+    this.hideState = proxy<Record<PropertyKey, boolean>>(hideState ? copy(hideState) : {});
+    if (isDeepCopy) {
+      this.state = proxy((formData ? copy(formData) : {}) as T);
+    } else if (formData) {
+      this.state = proxy(formData as T);
+    }
+  };
+  /**
+   * 更新数据
+   * @param state 更新数据对象
+   * @param isValidate 是否验证(可选)
+   */
+  updated = <M = T>(state: Partial<M>, isValidate: boolean = true) => {
+    const keys = Object.keys(state);
+    for (let index = 0; index < keys.length; index++) {
+      const key = keys[index];
+      this.state[key] = state[key];
+    }
+    if (isValidate) {
+      this.validate(keys, false);
+    }
+  };
+
+  // ===================================================隐藏状态================================================================
+  /**
+   * 更新行数据的隐藏信息
+   * @param objectHideInfo 行数据隐藏信息对象
+   */
+  updatedHideInfo = (objectHideInfo: Record<PropertyKey, boolean>) => {
+    const keys = Object.keys(objectHideInfo);
+    for (let index = 0; index < keys.length; index++) {
+      const field = keys[index];
+      this.hideState[field] = objectHideInfo[field];
+    }
+    return this;
+  };
+  /**
+   * 清理隐藏信息
+   */
+  clearHideInfo = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.hideState) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.hideState[field];
+    }
+    return this;
+  };
+  // ===================================================隐藏状态===================================================================
+
+  // ===================================================错误信息处理================================================================
+  /**
+   * 更新行数据的错误信息
+   * @param objectErrorInfo 行数据错误信息对象
+   */
+  updatedErrorInfo = (objectErrorInfo: Record<PropertyKey, string[]>) => {
+    const keys = Object.keys(objectErrorInfo);
+    for (let index = 0; index < keys.length; index++) {
+      const field = keys[index];
+      this.errorState[field] = objectErrorInfo[field];
+    }
+    return this;
+  };
+  /**
+   * 清理错误信息
+   */
+  clearErrorInfo = (fields?: PropertyKey[]) => {
+    let _fields = fields;
+    if (!Array.isArray(fields)) {
+      _fields = Object.keys(this.errorState) as PropertyKey[];
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      const field = _fields[index];
+      delete this.errorState[field];
+    }
+    return this;
+  };
+  // ===================================================错误信息处理================================================================
+
+  /**
+   * 清理所有数据
+   */
+  clear = () => {
+    this.state = proxy<T>({} as T);
+    this.errorState = proxy<Record<PropertyKey, string[]>>({});
+    this.hideState = proxy<Record<PropertyKey, boolean>>({});
+  };
+
+  // ===================================================规则处理================================================================
+  /**列规则 */
+  rules: Record<
+    PropertyKey,
+    ((formData: T, instance: FairysValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]
+  > = {};
+  /**规则验证
+   * @param fields 列字段数组(可选)
+   * @param isReturn 是否返回验证结果(可选)
+   */
+  validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+    let _fields = fields;
+    const _formData = snapshot(this.state) as T;
+    // 没有规则，直接返回数据
+    if (!this.rules) {
+      return Promise.resolve({ ..._formData });
+    }
+    const rules: Record<PropertyKey, RuleItem[]> = {};
+    let isNeedValidate = false;
+    // 没有 fields 值，验证所有
+    if (!fields || (Array.isArray(fields) && fields.length === 0)) {
+      _fields = Object.keys(this.rules);
+    }
+    for (let index = 0; index < _fields.length; index++) {
+      isNeedValidate = true;
+      const element = _fields[index];
+      const rule = this.rules[element];
+      if (typeof rule === 'function') {
+        const _rules = await rule(_formData, this);
+        rules[element] = _rules;
+      } else if (Array.isArray(rule)) {
+        rules[element] = rule;
+      }
+    }
+    if (!isNeedValidate) {
+      console.warn('no rules to validate');
+      return Promise.resolve({ ..._formData });
+    }
+    return new Promise((resolve, reject) => {
+      new AsyncValidator({ ...rules }).validate({ ..._formData }, (errors, fields) => {
+        for (let index = 0; index < _fields.length; index++) {
+          const field = _fields[index];
+          const fidError = Array.isArray(errors) ? errors.filter((item) => item.field === field) : undefined;
+          if (fidError) {
+            this.errorState[field] = ref(fidError.map((item) => item.message || ''));
+          } else {
+            delete this.errorState[field];
+          }
+        }
+        if (isReturn) {
+          if (errors) {
+            reject({ errors, fields });
+          } else {
+            resolve(fields);
+          }
+        }
+      });
+    });
+  };
+}
+
+/**声明实例*/
+export function useFairysValtioFormInstance<T extends MObject<T> = object>(instance?: FairysValtioFormInstance<T>) {
+  const ref = useRef<FairysValtioFormInstance<T>>();
+  if (!ref.current) {
+    if (instance) {
+      ref.current = instance;
+    } else {
+      ref.current = new FairysValtioFormInstance<T>();
+    }
+  }
+  return ref.current;
+}
+
+/**表单实例上下文*/
+export const FairysValtioFormInstanceContext = createContext<FairysValtioFormInstance<any>>(
+  new FairysValtioFormInstance<any>(),
+);
+
+/**表单实例上下文*/
+export function useFairysValtioFormInstanceContext<T extends MObject<T> = object>() {
+  return useContext(FairysValtioFormInstanceContext) as FairysValtioFormInstance<T>;
+}
+
+/**状态取值*/
+export function useFairysValtioFormInstanceContextState<T extends MObject<T> = object>() {
+  const instance = useFairysValtioFormInstanceContext<T>();
+  const state = useSnapshot(instance.state) as T;
+  const errorState = useSnapshot(instance.errorState) as Record<PropertyKey, string[]>;
+  return [state, errorState, instance, (state as any).__defaultValue, errorState.__defaultValue] as [
+    T,
+    Record<PropertyKey, string[]>,
+    FairysValtioFormInstance<T>,
+    any,
+    any,
+  ];
+}
+
+/**隐藏组件状态取值*/
+export function useFairysValtioFormInstanceContextHideState<T extends MObject<T> = object>() {
+  const instance = useFairysValtioFormInstanceContext<T>();
+  const hideState = useSnapshot(instance.hideState) as Record<PropertyKey, boolean>;
+  return [hideState, instance, (hideState as any).__defaultValue] as [
+    Record<PropertyKey, boolean>,
+    FairysValtioFormInstance<T>,
+    any,
+  ];
+}