@fairys/rn-valtio-form-basic 0.0.12

package/src/form.item.tsx

@@ -0,0 +1,135 @@
+/**表单项*/
+
+import { View, Text } from 'react-native';
+import type { ViewProps } from 'react-native';
+import { Fragment } from 'react';
+import type { MObject } from '@fairys/valtio-form-basic';
+import {
+  useFairysValtioFormInstanceContextHideState,
+  FairysValtioFormParentAttrsContext,
+} 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';
+
+export interface FairysRNValtioFormItemProps<T extends MObject<T> = object>
+  extends Omit<ViewProps, 'style'>,
+    FairysValtioFormItemAttrsProps {
+  /**是否使用控制隐藏的表单项*/
+  isHide?: boolean;
+  /**是否使用无样式表单项*/
+  noStyle?: boolean;
+}
+
+/**普通表单项*/
+export function FairysRNValtioFormItemBase<T extends MObject<T> = object>(
+  props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  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);
+  return (
+    <View style={itemStyle}>
+      <View style={itemContainerStyle}>
+        {label ? (
+          <View style={itemLabelStyle}>
+            {isRequired ? (
+              <Text style={formItemStyles['fairys-valtio-form-item-label.required']}>*</Text>
+            ) : (
+              <Fragment />
+            )}
+            <Text style={itemLabelTextStyle}>{label}</Text>
+            {showColon ? <Text style={itemLabelShowColonStyle}>:</Text> : <Fragment />}
+          </View>
+        ) : (
+          <Fragment />
+        )}
+        <View style={itemBodyStyle}>
+          <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+            <View style={itemInputStyle}>{children}</View>
+          </FairysValtioFormParentAttrsContext.Provider>
+          {extra ? (
+            <View style={itemExtraStyle}>
+              <Text style={formItemStyles['fairys-valtio-form-item-body-extra-text']}>{extra}</Text>
+            </View>
+          ) : (
+            <Fragment />
+          )}
+          {itemBorderType === 'body' && isInvalid ? (
+            <View style={errorStyle}>
+              <Text style={formItemStyles['fairys-valtio-form-item-body-error-text']}>{error}</Text>
+            </View>
+          ) : (
+            <Fragment />
+          )}
+        </View>
+      </View>
+      {helpText ? (
+        <View style={helpStyle}>
+          <Text>{helpText}</Text>
+        </View>
+      ) : (
+        <Fragment />
+      )}
+      {isInvalid && itemBorderType !== 'body' ? (
+        <View style={errorStyle}>
+          <Text style={formItemStyles['fairys-valtio-form-item-body-error-text']}>{error}</Text>
+        </View>
+      ) : (
+        <Fragment />
+      )}
+    </View>
+  );
+}
+/**控制隐藏的表单项*/
+export function FairysRNValtioFormHideItem<T extends MObject<T> = object>(
+  props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const [state] = useFairysValtioFormInstanceContextHideState();
+  const isHide = state[props.name];
+  if (isHide) {
+    return <Fragment />;
+  }
+  return <FairysRNValtioFormItemBase<T> {...props} />;
+}
+
+/**无样式表单项*/
+export function FairysRNValtioFormItemNoStyle<T extends MObject<T> = object>(
+  props: Omit<FairysRNValtioFormItemProps<T>, 'isHide' | 'noStyle'>,
+) {
+  const { children, formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props);
+  return (
+    <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+      {children}
+    </FairysValtioFormParentAttrsContext.Provider>
+  );
+}
+
+/**表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)*/
+export function FairysRNValtioFormItem<T extends MObject<T> = object>(props: FairysRNValtioFormItemProps<T>) {
+  const { isHide, noStyle, ...rest } = props;
+  if (isHide) {
+    return <FairysRNValtioFormHideItem<T> {...rest} />;
+  }
+  if (noStyle) {
+    return <FairysRNValtioFormItemNoStyle<T> {...rest} />;
+  }
+  return <FairysRNValtioFormItemBase<T> {...rest} />;
+}

package/src/form.tsx

@@ -0,0 +1,38 @@
+import { FairysRNValtioFormLayout } from './layout';
+import { FairysRNValtioFormItem, FairysRNValtioFormHideItem, FairysRNValtioFormItemBase } from './form.item';
+import {
+  FairysValtioFormInstanceContext,
+  useFairysValtioFormInstance,
+  useFairysValtioFormInstanceContext,
+  useFairysValtioFormInstanceContextState,
+  useFairysValtioFormInstanceContextHideState,
+} from '@fairys/valtio-form-basic/esm/common';
+
+import type { MObject } from '@fairys/valtio-form-basic/esm/common';
+import type { FairysValtioFormAttrsProps } from 'hooks/form';
+import { useFairysValtioForm } from 'hooks/form';
+
+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);
+  return (
+    <FairysValtioFormInstanceContext.Provider value={formInstance}>
+      <FairysRNValtioFormLayout {...rest}>{children}</FairysRNValtioFormLayout>
+    </FairysValtioFormInstanceContext.Provider>
+  );
+}
+/**初始化实例*/
+FairysRNValtioForm.useForm = useFairysValtioFormInstance;
+/**获取状态*/
+FairysRNValtioForm.useFormState = useFairysValtioFormInstanceContextState;
+/**获取隐藏状态*/
+FairysRNValtioForm.useFormHideState = useFairysValtioFormInstanceContextHideState;
+/**获取上下文实例*/
+FairysRNValtioForm.useFormInstance = useFairysValtioFormInstanceContext;
+/**表单项基础组件*/
+FairysRNValtioForm.FormItemBase = FairysRNValtioFormItemBase;
+/**表单项*/
+FairysRNValtioForm.FormItem = FairysRNValtioFormItem;
+/**隐藏表单想*/
+FairysRNValtioForm.FormHideItem = FairysRNValtioFormHideItem;

package/src/hooks/form.item.ts

@@ -0,0 +1,492 @@
+/**表单项*/
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, ViewProps } from 'react-native';
+import type {
+  MObject,
+  FairysValtioFormItemAttrsProps as _FairysValtioFormItemAttrsProps,
+} from '@fairys/valtio-form-basic';
+import {
+  useFairysValtioFormInstanceContextState,
+  FairysValtioFormInstance,
+  get,
+  formatePath,
+  FairysValtioFormParentAttrs,
+  useFairysValtioFormAttrsName,
+  useId,
+} from '@fairys/valtio-form-basic/esm/common';
+import { formItemStyles } from 'styles/form.item';
+import { FairysValtioFormLayoutContextOptions, useFairysValtioFormLayoutContext } from './layout';
+
+export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object>
+  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>) {
+  const [layoutAttrs] = useFairysValtioFormLayoutContext();
+  const colCount = layoutAttrs.colCount || 1;
+  const parent_borderedType = layoutAttrs.itemBorderType || 'bottom';
+  const parent_errorLayout = layoutAttrs.errorLayout || 'bottom-right';
+  const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
+  const parent_formItemStyle = layoutAttrs.formItemStyle;
+  const parent_formItemBodyStyle = layoutAttrs.formItemBodyStyle;
+  const parent_labelMode = layoutAttrs.labelMode || 'between';
+  const parent_itemBorderColor = layoutAttrs.itemBorderColor;
+  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: _name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+  } = useFairysValtioFormAttrsName({ name, isJoinParentField });
+
+  const widthStyles: ViewProps['style'] = useMemo(() => {
+    if (colCount >= colSpan) {
+      return {
+        width: `${(100 / colCount) * colSpan}%`,
+      };
+    }
+    return { width: `100%` };
+  }, [colSpan, colCount]);
+
+  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
+  const value = useMemo(() => get(state, paths), [state, paths]);
+
+  const error = errorState[_name];
+  // 使用从 Form 中设置的规则
+  const _formItemRules = formInstance.rules?.[_name];
+  const id = useId(_name);
+  formInstance.nameToPaths[_name] = paths;
+
+  useEffect(() => {
+    if (Array.isArray(rules) && rules.length) {
+      formInstance.mountRules[_name] = rules;
+    }
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_name, rules]);
+
+  const onValueChange = (event: any) => {
+    let newValue = event;
+    const target = event?.nativeEvent;
+    if (typeof getValueFromEvent === 'function') {
+      newValue = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && getValuePath in target) {
+      newValue = get(target, formatePath(getValuePath));
+    }
+    if (typeof formatValue === 'function') {
+      newValue = formatValue(newValue, formInstance, event);
+    }
+    if (newValue === value) return;
+    formInstance.updatedValueByPaths(_name, newValue);
+    if (typeof onAfterUpdate === 'function') {
+      onAfterUpdate(newValue, formInstance, event);
+    }
+  };
+
+  /**基础组件参数*/
+  const baseControl = {
+    ...attrs,
+    style: StyleSheet.flatten([attrs?.style || {}, labelMode === 'between' ? formItemStyles['input.between'] : {}]),
+    name,
+    id,
+    [valuePropName]: value,
+    [trigger]: onValueChange,
+  };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
+      return _formItemRules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance, _formItemRules]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
+
+  const item_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item'],
+      itemBorderType === 'bottom' ? formItemStyles['fairys-valtio-form-item.border-bottom'] : {},
+      itemBorderColor && itemBorderType === 'bottom' ? { borderColor: itemBorderColor } : {},
+      isInvalid && isInvalidBorderRed && itemBorderType === 'bottom'
+        ? formItemStyles['fairys-valtio-form-item.border-bottom.red']
+        : {},
+      widthStyles,
+      parent_formItemStyle,
+      style,
+    ]);
+  }, [
+    style,
+    widthStyles,
+    parent_formItemStyle,
+    labelMode,
+    itemBorderType,
+    isInvalid,
+    isInvalidBorderRed,
+  ]) as ViewProps['style'];
+
+  const itemContainer_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-container'],
+      labelMode === 'between' ? formItemStyles['fairys-valtio-form-item-container.between'] : {},
+      labelMode === 'top' ? formItemStyles['fairys-valtio-form-item-container.top'] : {},
+      labelMode === 'left' ? formItemStyles['fairys-valtio-form-item-container.left'] : {},
+    ]);
+  }, [labelMode]) as ViewProps['style'];
+
+  const itemLabel_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-label'],
+      labelMode === 'left' ? formItemStyles['fairys-valtio-form-item-label.left'] : {},
+      parent_formItemLabelStyle,
+      labelStyle,
+    ]);
+  }, [labelMode, parent_formItemLabelStyle, labelStyle]) as ViewProps['style'];
+
+  const itemLabelShowColon_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-label.show-colon'],
+      isInvalid && isInvalidTextRed ? formItemStyles['fairys-valtio-form-item-label.show-colon.red'] : {},
+    ]);
+  }, [isInvalid, isInvalidTextRed]) as ViewProps['style'];
+
+  const itemLabelText_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-label-text'],
+      isInvalid && isInvalidTextRed ? formItemStyles['fairys-valtio-form-item-label-text.red'] : {},
+    ]);
+  }, [labelMode, isInvalid, isInvalidTextRed]) as ViewProps['style'];
+
+  const itemBody_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-body'],
+      labelMode === 'left' ? formItemStyles['fairys-valtio-form-item-body.left'] : {},
+      labelMode === 'top' ? formItemStyles['fairys-valtio-form-item-body.top'] : {},
+      labelMode === 'between' ? formItemStyles['fairys-valtio-form-item-body.between'] : {},
+      itemBorderType === 'body' ? formItemStyles['fairys-valtio-form-item-body.border-bottom'] : {},
+      itemBorderColor && itemBorderType === 'body' ? { borderColor: itemBorderColor } : {},
+      isInvalid && isInvalidBorderRed && itemBorderType === 'body'
+        ? formItemStyles['fairys-valtio-form-item-body.border-bottom.red']
+        : {},
+      parent_formItemBodyStyle,
+      bodyStyle,
+    ]);
+  }, [bodyStyle, parent_formItemBodyStyle, labelMode, isInvalid]) as ViewProps['style'];
+
+  const itemBodyInput_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-body-input'],
+      labelMode === 'between' ? formItemStyles['fairys-valtio-form-item-body-input.between'] : {},
+      labelMode !== 'between' ? formItemStyles['fairys-valtio-form-item-body-input.not.between'] : {},
+    ]);
+  }, [labelMode]) as ViewProps['style'];
+
+  const itemExtra_style = useMemo(() => {
+    return StyleSheet.flatten([formItemStyles['fairys-valtio-form-item-body-extra']]);
+  }, []) as ViewProps['style'];
+
+  const itemHelp_style = useMemo(() => {
+    return StyleSheet.flatten([formItemStyles['fairys-valtio-form-item-help']]);
+  }, []) as ViewProps['style'];
+
+  const itemError_style = useMemo(() => {
+    return StyleSheet.flatten([
+      formItemStyles['fairys-valtio-form-item-body-error'],
+      errorLayout ? formItemStyles['fairys-valtio-form-item-body-error.' + errorLayout] || {} : {},
+    ]);
+  }, [errorLayout]) as ViewProps['style'];
+
+  return {
+    value,
+    isInvalid,
+    itemBorderType,
+    onValueChange,
+    colSpan,
+    colCount,
+    labelMode,
+    errorLayout,
+    isRequired,
+    state,
+    errorState,
+    formInstance,
+    error,
+    _name,
+    name,
+    id,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+    showColon,
+    // ================================================================================
+    itemStyle: item_style,
+    itemContainerStyle: itemContainer_style,
+    itemLabelStyle: itemLabel_style,
+    itemLabelTextStyle: itemLabelText_style,
+    itemLabelShowColonStyle: itemLabelShowColon_style,
+    itemBodyStyle: itemBody_style,
+    itemInputStyle: itemBodyInput_style,
+    itemExtraStyle: itemExtra_style,
+    errorStyle: itemError_style,
+    helpStyle: itemHelp_style,
+    children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
+  } as FairysValtioFormItemAttrsReturn<T>;
+}
+
+export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object> {
+  /**表单项值*/
+  value?: any;
+  /**是否校验错误*/
+  isInvalid: boolean;
+  /**边框类型*/
+  itemBorderType: FairysValtioFormLayoutContextOptions['itemBorderType'];
+  /**值改变事件*/
+  onValueChange: (event: any) => void;
+  /**当前表单项占据列数*/
+  colSpan: number;
+  /**列数*/
+  colCount: number;
+  /**标签显示模式*/
+  labelMode: FairysValtioFormLayoutContextOptions['labelMode'];
+  /**错误提示位置*/
+  errorLayout: FairysValtioFormLayoutContextOptions['errorLayout'];
+  /**是否必填*/
+  isRequired: boolean;
+  /**表单状态*/
+  state: T;
+  /**错误状态*/
+  errorState: Record<PropertyKey, string[]>;
+  /**表单实例*/
+  formInstance: FairysValtioFormInstance<T>;
+  /**错误信息*/
+  error?: string[];
+  /**拼接父级字段名后得到的表单项名称*/
+  _name?: string;
+  /**表单项名称*/
+  name?: string;
+  /**表单项ID*/
+  id?: string;
+  /**表单项路径*/
+  paths?: (string | number)[];
+  /**父级字段名*/
+  parentName?: string;
+  /**表单属性名实例*/
+  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 function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
+  const {
+    name,
+    valuePropName = 'value',
+    getValuePath = 'text',
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    trigger = 'onChange',
+    children,
+    attrs = {},
+    isJoinParentField = true,
+    rules,
+    isRequired: _isRequired,
+  } = props;
+  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
+  const {
+    name: _name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+  } = useFairysValtioFormAttrsName({ name, isJoinParentField });
+  const id = useId(_name);
+  const value = useMemo(() => get(state, paths), [state, paths]);
+  const error = errorState[_name];
+  formInstance.nameToPaths[_name] = paths;
+
+  // 使用从 Form 中设置的规则
+  const _formItemRules = formInstance.rules?.[_name];
+
+  useEffect(() => {
+    if (Array.isArray(rules) && rules.length) {
+      formInstance.mountRules[_name] = rules;
+    }
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_name, rules]);
+
+  const onValueChange = (event: any) => {
+    let newValue = event;
+    const target = event?.nativeEvent;
+    if (typeof getValueFromEvent === 'function') {
+      newValue = getValueFromEvent(event, formInstance);
+    } else if (event && target && typeof target === 'object' && getValuePath in target) {
+      newValue = get(target, formatePath(getValuePath));
+    }
+    if (typeof formatValue === 'function') {
+      newValue = formatValue(newValue, formInstance, event);
+    }
+    if (newValue === value) return;
+    formInstance.updatedValueByPaths(_name, newValue);
+    if (typeof onAfterUpdate === 'function') {
+      onAfterUpdate(newValue, formInstance, event);
+    }
+  };
+  /**基础组件参数*/
+  const baseControl = {
+    ...attrs,
+    name,
+    id,
+    [valuePropName]: value,
+    [trigger]: onValueChange,
+  };
+
+  /**判断是否必填*/
+  const isRequired = useMemo(() => {
+    if (_isRequired) {
+      return _isRequired;
+    } else if (Array.isArray(rules) && rules.length) {
+      return rules.some((rule) => rule.required);
+    } else if (_formItemRules && Array.isArray(_formItemRules) && _formItemRules.length) {
+      return _formItemRules.some((rule) => rule.required);
+    }
+    return false;
+  }, [rules, formInstance, _formItemRules]);
+
+  /**校验是否存在错误信息*/
+  const isInvalid = useMemo(() => {
+    if (Array.isArray(error) && error.length) {
+      return true;
+    }
+    return false;
+  }, [error]);
+
+  return {
+    value,
+    isRequired,
+    isInvalid,
+    error,
+    onValueChange,
+    state,
+    errorState,
+    formInstance,
+    _name,
+    name,
+    id,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+    children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
+  } as FairysValtioFormItemNoStyleAttrsReturn<T>;
+}
+
+export interface FairysValtioFormItemNoStyleAttrsReturn<T extends MObject<T> = object> {
+  /**表单项值*/
+  value?: any;
+  /**是否校验错误*/
+  isInvalid: boolean;
+  /**是否必填*/
+  isRequired: boolean;
+  /**错误信息*/
+  error?: string[];
+  /**值改变事件*/
+  onValueChange: (event: any) => void;
+  /**表单状态*/
+  state: T;
+  /**错误状态*/
+  errorState: Record<PropertyKey, string[]>;
+  /**表单实例*/
+  formInstance: FairysValtioFormInstance<T>;
+  /**拼接父级字段名后得到的表单项名称*/
+  _name?: string;
+  /**表单项名称*/
+  name?: string;
+  /**表单项ID*/
+  id?: string;
+  /**表单项路径*/
+  paths?: (string | number)[];
+  /**父级字段名*/
+  parentName?: string;
+  /**表单属性名实例*/
+  formAttrsNameInstance: FairysValtioFormParentAttrs;
+  /**子元素*/
+  children?: React.ReactNode;
+}