@fairys/valtio-form-basic 0.0.8 → 0.0.10

package/src/form/form.item.tsx

@@ -1,14 +1,27 @@
 /**表单项*/
 
 import { MObject } from 'interface';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import { useFairysValtioFormInstanceContextState, FairysValtioFormInstance } from './instance';
 import { useFairysValtioFormLayoutContext, FairysValtioFormLayoutContextOptions } from './layout';
+import { FairysValtioFormParentAttrs, useFairysValtioFormAttrsName } from './hooks';
+import { get } from './utils';
+import { RuleItem } from 'async-validator';
 
 export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
-  /**表单项名称*/
-  name: string;
+  /**
+   * 表单项名称 ，字段需要和存储的字段路径一致
+   *
+   * @example
+   * 路径中的值为 number 类型时，会创建一个空数组。路径中的值为 string 类型时，会创建一个空对象。最后一个直接赋值
+   *
+   * 默认："name"
+   * 嵌套字段："name.a.doc" ===> { name: { a: { doc: undefined } } }
+   * 嵌套字段："name[1].a.doc" ===> { name: [{}, { a: { doc: undefined } }] }
+   * 嵌套字段："name.a[2].doc" ===> { name: { a: [{}, {}, { doc: undefined }] } }
+   */
+  name?: string;
   /**表单项标签*/
   label?: string;
   /**传递组件字段*/
@@ -29,9 +42,9 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   bodyStyle?: React.CSSProperties;
   children?: React.ReactNode;
   /**规则校验失败错误提示位置*/
-  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
   /**label显示模式*/
-  labelMode?: 'left' | 'top' | 'between';
+  labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
   /**额外内容*/
   extra?: React.ReactNode;
   /**底部提示内容*/
@@ -51,9 +64,19 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
   /**是否显示冒号*/
   showColon?: boolean;
   /**底部显示边框*/
-  borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+  itemBorderType?: FairysValtioFormLayoutContextOptions['itemBorderType'];
+  /**边框颜色*/
+  itemBorderColor?: React.CSSProperties['borderColor'];
+  /**是否校验失败时显示红色边框*/
+  isInvalidBorderRed?: boolean;
+  /**是否校验失败时显示红色文本*/
+  isInvalidTextRed?: boolean;
   /**输入框属性*/
   attrs?: any;
+  /**是否拼接父级字段名*/
+  isJoinParentField?: boolean;
+  /**校验规则*/
+  rules?: RuleItem[];
 }
 
 /**
@@ -63,7 +86,7 @@ export interface FairysValtioFormItemAttrsProps<T extends MObject<T> = object> {
  * 
  * ```tsx
 import { Fragment } from 'react'
-import { useFairysValtioFormItemAttrs } from "@fairys/valtio-form"
+import { useFairysValtioFormItemAttrs , FairysValtioFormParentAttrsContext } from "@fairys/valtio-form"
 import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
 export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
 
@@ -72,10 +95,11 @@ export const FormItem = (props: FormItemProps) => {
   const {
     itemClassName, itemStyle, containerClassName, itemLabelClassName, itemLabelStyle,
     itemBodyClassName, itemBodyStyle, itemInputClassName, itemExtraClassName, errorClassName, helpClassName,
-    isInvalid, borderedType, children, error
+    isInvalid, itemBorderType, children, error,formAttrsNameInstance
   } = useFairysValtioFormItemAttrs(props)
 
   return (
+   <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
     <View className={itemClassName} style={itemStyle}>
       <View className={containerClassName}>
         <View className={itemLabelClassName} style={itemLabelStyle}>
@@ -86,12 +110,13 @@ export const FormItem = (props: FormItemProps) => {
             {children}
           </View>
           {extra ? <View className={itemExtraClassName}>{extra}</View> : <Fragment />}
-          {borderedType === 'body' && isInvalid ? <View className={errorClassName}>{error}</View> : <Fragment />}
+          {itemBorderType === '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 />}
+      {isInvalid && itemBorderType !== 'body' ? <View className={errorClassName}>{error}</View> : <Fragment />}
     </View>
+   </FairysValtioFormParentAttrsContext.Provider>
   );
 }
  * ```
@@ -100,8 +125,8 @@ export const FormItem = (props: FormItemProps) => {
 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_borderedType = layoutAttrs.itemBorderType || 'bottom';
+  const parent_errorLayout = layoutAttrs.errorLayout || 'bottom-right';
   const parent_formItemClassName = layoutAttrs.formItemClassName;
   const parent_formItemLabelClassName = layoutAttrs.formItemLabelClassName;
   const parent_formItemLabelStyle = layoutAttrs.formItemLabelStyle;
@@ -109,6 +134,11 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const parent_formItemBodyClassName = layoutAttrs.formItemBodyClassName;
   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',
@@ -128,14 +158,38 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     colSpan = 1,
     rowSpan = 1,
     isRequired: _isRequired,
-    borderedType = parent_borderedType,
+    itemBorderType = parent_borderedType,
     attrs = {},
-    showColon = false,
+    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 [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
-  const rules = formInstance.rules?.[name];
-  const value = state[name];
-  const error = errorState[name];
+  const value = useMemo(() => get(state, paths), [state, paths]);
+  const error = errorState[_name];
+  // 使用从 Form 中设置的规则
+  const _formItemRules = formInstance.rules?.[_name];
+
+  formInstance.nameToPaths[_name] = paths;
+  /**挂载校验规则*/
+  if (Array.isArray(rules) && rules.length) {
+    formInstance.mountRules[_name] = rules;
+  }
+  useEffect(() => {
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_name]);
 
   const onValueChange = (event: any) => {
     let value = event;
@@ -148,7 +202,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     if (typeof formatValue === 'function') {
       value = formatValue(value, formInstance, event);
     }
-    formInstance.updated({ [name]: value });
+    formInstance.updatedValueByPaths(_name, value);
     if (typeof onAfterUpdate === 'function') {
       onAfterUpdate(value, formInstance, event);
     }
@@ -168,9 +222,11 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
       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]);
+  }, [rules, formInstance, _formItemRules]);
 
   /**校验是否存在错误信息*/
   const isInvalid = useMemo(() => {
@@ -183,22 +239,25 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   /**表单项类名*/
   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',
+      'fairys-valtio-form-item fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__p-[4px] fairystaroform__text-[12px] fairystaroform__relative fairystaroform__flex fairystaroform__flex-col fairystaroform__box-border fairystaroform__break-all',
       {
+        'fairys-valtio-form-item-invalid': isInvalid,
+        'fairys-valtio-form-item-invalid-text-red': isInvalid && isInvalidTextRed,
+        'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && itemBorderType === 'bottom',
         'fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200':
-          borderedType === 'bottom',
+          itemBorderType === 'bottom',
         [labelMode]: labelMode,
       },
-      className,
       parent_formItemClassName,
+      className,
     );
-  }, [className, parent_formItemClassName, labelMode, borderedType]);
+  }, [className, parent_formItemClassName, labelMode, itemBorderType, isInvalid, isInvalidBorderRed]);
 
   /**表单项容器类名*/
   const itemContainer_cls = useMemo(() => {
     // 默认两端显示
     return clsx(
-      'fairys-valtio-form-item-container fairystaroform__flex-1 fairystaroform__h-full fairystaroform__flex fairystaroform__box-border',
+      'fairys-valtio-form-item-container fairystaroform__transition-all fairystaroform__duration-300 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',
@@ -213,7 +272,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   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',
+      'fairys-valtio-form-item-label fairystaroform__transition-all fairystaroform__duration-300  fairystaroform__text-gray-800 fairystaroform__flex fairystaroform__items-center fairystaroform__relative fairystaroform__box-border',
       {
         'fairystaroform__justify-start': labelMode !== 'left',
         'fairystaroform__justify-end': labelMode === 'left',
@@ -229,23 +288,24 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   const itemBody_cls = useMemo(() => {
     // 默认两端显示
     return clsx(
-      'fairys-valtio-form-item-body fairystaroform__relative fairystaroform__flex-1 fairystaroform__flex fairystaroform__box-border',
+      'fairys-valtio-form-item-body fairystaroform__transition-all fairystaroform__duration-300 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',
+          itemBorderType === 'body',
+        'fairys-valtio-form-item-invalid-border-red': isInvalid && isInvalidBorderRed && itemBorderType === 'body',
       },
-      bodyClassName,
       parent_formItemBodyClassName,
+      bodyClassName,
     );
-  }, [bodyClassName, labelMode, borderedType, parent_formItemBodyClassName]);
+  }, [bodyClassName, labelMode, itemBorderType, parent_formItemBodyClassName, isInvalid, isInvalidBorderRed]);
 
   // 表单项输入类名
   const itemInput_cls = useMemo(() => {
     return clsx(
-      'fairys-valtio-form-item-body fairystaroform__flex fairystaroform__flex-row fairystaroform__flex-1 fairystaroform__box-border',
+      'fairys-valtio-form-item-body-input fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__min-h-[32px] fairystaroform__flex fairystaroform__flex-row fairystaroform__items-center 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',
@@ -256,28 +316,34 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   /**表单项额外内容类名*/
   const itemExtra_cls = useMemo(() => {
     return clsx(
-      'fairys-valtio-form-item-body-extra fairystaroform__box-border fairystaroform__flex fairystaroform__items-center fairystaroform__justify-center',
+      'fairys-valtio-form-item-body-extra fairystaroform__transition-all fairystaroform__duration-300 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',
+      'fairys-valtio-form-item-body-help fairystaroform__transition-all fairystaroform__duration-300 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',
+      'fairys-valtio-form-item-body-error fairystaroform__transition-all fairystaroform__duration-300 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',
+          errorLayout === 'bottom-left',
         '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 === 'bottom-right',
+        'fairystaroform__top-[-4px]  fairystaroform__right-0 fairystaroform__justify-end': errorLayout === 'top-right',
+        'fairystaroform__top-[-4px] fairystaroform__left-0 fairystaroform__justify-start': errorLayout === 'top-left',
+        /**边框底部提示*/
+        'fairystaroform__left-0  fairystaroform__bottom-[-2px] fairystaroform__justify-start':
+          errorLayout === 'left-border-top',
+        /**边框顶部提示*/
+        'fairystaroform__right-0  fairystaroform__bottom-[-2px] fairystaroform__justify-end':
+          errorLayout === 'right-border-top',
       },
     );
   }, [errorLayout]);
@@ -297,7 +363,7 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
   return {
     value,
     isInvalid,
-    borderedType,
+    itemBorderType,
     onValueChange,
     colSpan,
     rowSpan,
@@ -309,14 +375,28 @@ export function useFairysValtioFormItemAttrs<T extends MObject<T> = object>(prop
     errorState,
     formInstance,
     error,
+    _name,
+    name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
     // ================================================================================
     itemClassName: item_cls,
-    itemStyle: { ...(parent_formItemStyle || {}), ...styleBase, ...(style || {}) },
+    itemStyle: {
+      ...(itemBorderColor && itemBorderType === 'bottom' ? { borderBottomColor: itemBorderColor } : {}),
+      ...(parent_formItemStyle || {}),
+      ...styleBase,
+      ...(style || {}),
+    },
     containerClassName: itemContainer_cls,
     itemLabelClassName: itemLabel_cls,
     itemLabelStyle: { ...(parent_formItemLabelStyle || {}), ...(labelStyle || {}) },
     itemBodyClassName: itemBody_cls,
-    itemBodyStyle: { ...(parent_formItemBodyStyle || {}), ...(bodyStyle || {}) },
+    itemBodyStyle: {
+      ...(itemBorderColor && itemBorderType === 'body' ? { borderBottomColor: itemBorderColor } : {}),
+      ...(parent_formItemBodyStyle || {}),
+      ...(bodyStyle || {}),
+    },
     itemInputClassName: itemInput_cls,
     itemExtraClassName: itemExtra_cls,
     errorClassName: itemError_cls,
@@ -329,31 +409,41 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
   /**表单项值*/
   value?: any;
   /**是否校验错误*/
-  isInvalid?: boolean;
+  isInvalid: boolean;
   /**边框类型*/
-  borderedType?: FairysValtioFormLayoutContextOptions['borderedType'];
+  itemBorderType: FairysValtioFormLayoutContextOptions['itemBorderType'];
   /**值改变事件*/
-  onValueChange?: (event: any) => void;
+  onValueChange: (event: any) => void;
   /**当前表单项占据列数*/
-  colSpan?: number;
+  colSpan: number;
   /**当前表单项占据行数*/
-  rowSpan?: number;
+  rowSpan: number;
   /**列数*/
-  colCount?: number;
+  colCount: number;
   /**标签显示模式*/
-  labelMode?: FairysValtioFormLayoutContextOptions['labelMode'];
+  labelMode: FairysValtioFormLayoutContextOptions['labelMode'];
   /**错误提示位置*/
-  errorLayout?: FairysValtioFormLayoutContextOptions['errorLayout'];
+  errorLayout: FairysValtioFormLayoutContextOptions['errorLayout'];
   /**是否必填*/
-  isRequired?: boolean;
+  isRequired: boolean;
   /**表单状态*/
-  state?: T;
+  state: T;
   /**错误状态*/
-  errorState?: Record<PropertyKey, string[]>;
+  errorState: Record<PropertyKey, string[]>;
   /**表单实例*/
-  formInstance?: FairysValtioFormInstance<T>;
+  formInstance: FairysValtioFormInstance<T>;
   /**错误信息*/
   error?: string[];
+  /**拼接父级字段名后得到的表单项名称*/
+  _name?: string;
+  /**表单项名称*/
+  name?: string;
+  /**表单项路径*/
+  paths?: (string | number)[];
+  /**父级字段名*/
+  parentName?: string;
+  /**表单属性名实例*/
+  formAttrsNameInstance: FairysValtioFormParentAttrs;
   // =========================================
   /**表单项类名*/
   itemClassName: string;
@@ -380,3 +470,97 @@ export interface FairysValtioFormItemAttrsReturn<T extends MObject<T> = object>
   /**子元素*/
   children?: React.ReactNode;
 }
+
+/**
+ * 没有样式的表单项属性，仅返回基础输入组件参数
+ * 
+ * @example
+ * 
+ *```tsx 
+import { Fragment } from 'react'
+import { useFairysValtioFormItemAttrs, FairysValtioFormParentAttrsContext } from "@fairys/valtio-form"
+import type { FairysValtioFormItemAttrsProps } from "@fairys/valtio-form"
+export interface FormItemProps extends FairysValtioFormItemAttrsProps{}
+
+export const FormItem = (props: FormItemProps) => {
+  const { children , formAttrsNameInstance } = useFairysValtioFormItemNoStyleAttrs(props)
+  return <FairysValtioFormParentAttrsContext.Provider value={formAttrsNameInstance}>
+    {children}
+  </FairysValtioFormParentAttrsContext.Provider>
+}
+ * ```
+*/
+export function useFairysValtioFormItemNoStyleAttrs<T extends MObject<T> = object>(
+  props: FairysValtioFormItemAttrsProps<T>,
+) {
+  const {
+    name,
+    valuePropName = 'value',
+    getValueFromEvent,
+    formatValue,
+    onAfterUpdate,
+    trigger = 'onChange',
+    children,
+    attrs = {},
+    isJoinParentField = true,
+    rules,
+  } = props;
+  const [state, errorState, formInstance] = useFairysValtioFormInstanceContextState<T>();
+  const {
+    name: _name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+  } = useFairysValtioFormAttrsName({ name, isJoinParentField });
+  const value = useMemo(() => get(state, paths), [state, paths]);
+  const error = errorState[_name];
+  formInstance.nameToPaths[_name] = paths;
+  /**挂载校验规则*/
+  if (Array.isArray(rules) && rules.length) {
+    formInstance.mountRules[_name] = rules;
+  }
+
+  useEffect(() => {
+    return () => {
+      formInstance.removeRules(_name);
+    };
+  }, [_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.updatedValueByPaths(_name, value);
+    if (typeof onAfterUpdate === 'function') {
+      onAfterUpdate(value, formInstance, event);
+    }
+  };
+  /**基础组件参数*/
+  const baseControl = {
+    ...attrs,
+    name,
+    [valuePropName]: value,
+    [trigger]: onValueChange,
+  };
+  return {
+    value,
+    error,
+    onValueChange,
+    state,
+    errorState,
+    formInstance,
+    _name,
+    name,
+    paths,
+    parentName,
+    formAttrsNameInstance,
+    children: React.isValidElement(children) ? React.cloneElement(children, { ...baseControl }) : children,
+  };
+}

package/src/form/form.tsx

@@ -2,14 +2,15 @@ import { MObject } from 'interface';
 import { FairysValtioFormInstance, useFairysValtioFormInstance } from './instance';
 import { useMemo, type ReactNode } from 'react';
 import { FairysValtioFormLayoutAttrsProps } from './layout';
+import { RuleItem } from 'async-validator';
 
 export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> extends FairysValtioFormLayoutAttrsProps {
   /**表单实例*/
   form?: FairysValtioFormInstance<T>;
   /**子元素*/
   children: ReactNode;
-  /**表单项规则*/
-  rules?: FairysValtioFormInstance<T>['rules'];
+  /**表单项规则(如果表单项没有指定规则，则使用全局规则，如果表单项指定规则，则使用表单项规则)*/
+  rules?: Record<PropertyKey, RuleItem[]>;
   /**表单初始值*/
   formData?: FairysValtioFormInstance<T>['state'];
   /**表单隐藏状态*/
@@ -49,20 +50,4 @@ export function useFairysValtioForm<T extends MObject<T> = object>(props: Fairys
     ...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/hooks/index.tsx

@@ -0,0 +1,78 @@
+import { useRef, createContext, useContext, useMemo } from 'react';
+import { proxy, useSnapshot } from 'valtio';
+import { formatePath, formateName } from 'form/utils';
+export interface FairysValtioFormParentAttrsState {
+  name?: string;
+}
+
+/***
+ * 父级属性
+ */
+export class FairysValtioFormParentAttrs {
+  state = proxy<FairysValtioFormParentAttrsState>({
+    name: '',
+  });
+  // ===================================================更新状态================================================================
+  updated = (attrs: Record<string, any>) => {
+    this.state = { ...this.state, ...attrs };
+  };
+  /***更新父级字段值*/
+  updatedName = (name?: string, parentName?: string) => {
+    this.state.name = formateName(name, parentName);
+  };
+}
+
+/**初始化父级属性*/
+export const useFairysValtioFormParentAttrs = (instance?: FairysValtioFormParentAttrs) => {
+  const parentAttrs = useRef<FairysValtioFormParentAttrs>();
+  if (!parentAttrs.current) {
+    if (instance) {
+      parentAttrs.current = instance;
+    } else {
+      parentAttrs.current = new FairysValtioFormParentAttrs();
+    }
+  }
+  return parentAttrs.current;
+};
+
+/***父级属性上下文*/
+export const FairysValtioFormParentAttrsContext = createContext<FairysValtioFormParentAttrs>(
+  new FairysValtioFormParentAttrs(),
+);
+
+/***获取父级属性实例*/
+export const useFairysValtioFormParentAttrsContext = () => useContext(FairysValtioFormParentAttrsContext);
+
+/***获取父级属性状态*/
+export const useFairysValtioFormParentAttrsState = () => {
+  const instance = useFairysValtioFormParentAttrsContext();
+  const state = useSnapshot(instance.state);
+  return [state, instance] as const;
+};
+
+export interface FairysValtioFormAttrsNameOptions {
+  name?: string;
+  /**是否拼接父级字段名*/
+  isJoinParentField?: boolean;
+}
+
+/***获取属性名和路径*/
+export const useFairysValtioFormAttrsName = (options: FairysValtioFormAttrsNameOptions = {}) => {
+  const { name, isJoinParentField = true } = options;
+  const formAttrsNameInstance = useFairysValtioFormParentAttrs();
+  const [state] = useFairysValtioFormParentAttrsState();
+  const parentName = state.name;
+  const _name = useMemo(
+    () => (isJoinParentField ? formateName(name, parentName) : name),
+    [name, parentName, isJoinParentField],
+  );
+  const _paths = useMemo(() => formatePath(_name), [_name]);
+  useMemo(() => formAttrsNameInstance.updatedName(_name), [_name]);
+
+  return {
+    formAttrsNameInstance,
+    parentName,
+    name: _name,
+    paths: _paths,
+  };
+};