@fairys/valtio-form-basic 0.0.8 → 0.0.9

package/src/form/form.tsx

@@ -2,6 +2,7 @@ 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 {
   /**表单实例*/
@@ -9,7 +10,7 @@ export interface FairysValtioFormAttrsProps<T extends MObject<T> = object> exten
   /**子元素*/
   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,
+  };
+};

package/src/form/instance/index.ts

@@ -3,6 +3,7 @@ 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';
+import { formatePath, get, set } from 'form/utils';
 
 /**表单实例*/
 export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>> {
@@ -42,6 +43,14 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
     }
   };
 
+  /**根据路径设置值
+   * @param path 值路径
+   * @param value 值
+   */
+  updatedValueByPaths = (path: PropertyKey, value: any) => {
+    set(this.state, formatePath(path), value);
+    this.validate([path], false);
+  };
   // ===================================================隐藏状态================================================================
   /**
    * 更新行数据的隐藏信息
@@ -110,45 +119,53 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   };
 
   // ===================================================规则处理================================================================
-  /**列规则 */
-  rules: Record<
-    PropertyKey,
-    ((formData: T, instance: FairysValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]
-  > = {};
-  /**规则验证
-   * @param fields 列字段数组(可选)
-   * @param isReturn 是否返回验证结果(可选)
-   */
+  /**由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)*/
+  mountRules: Record<PropertyKey, RuleItem[]> = {};
+  /**移除表单项挂载规则*/
+  removeRules = (name: PropertyKey) => {
+    delete this.mountRules[name];
+  };
+  /**表单项规则*/
+  rules: Record<PropertyKey, RuleItem[]> = {};
+  /**表单项名称到路径映射*/
+  nameToPaths: Record<PropertyKey, PropertyKey[]> = {};
+  /**验证表单项规则*/
   validate = async (fields?: PropertyKey[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
-    let _fields = fields;
+    const rules = {
+      ...this.rules,
+      ...this.mountRules,
+    };
+    // 根据字段路径获取对应的值
     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;
+    const _values: Record<PropertyKey, any> = {};
+    /**所有要验证的字段*/
+    let _fields = Object.keys(rules) as PropertyKey[];
+    /**最后要验证的规则*/
+    let _lastRules: Record<PropertyKey, RuleItem[]> = {};
+    /**是否指定了字段*/
+    let isPropsFields = false;
+    // 如果指定了字段，则只验证指定的字段
+    if (Array.isArray(fields) && fields.length) {
+      _fields = [...fields];
+      isPropsFields = true;
+      for (let index = 0; index < fields.length; index++) {
+        const field = fields[index];
+        const paths = this.nameToPaths[field];
+        _lastRules[field] = rules[field];
+        _values[field] = get(_formData, paths ? paths : formatePath(field as string));
+      }
+    } else {
+      isPropsFields = false;
+      _lastRules = { ...rules };
+      // 通过规则进行获取那些字段需要验证
+      for (let index = 0; index < _fields.length; index++) {
+        const field = _fields[index];
+        const paths = this.nameToPaths[field];
+        _values[field] = get(_formData, paths);
       }
-    }
-    if (!isNeedValidate) {
-      console.warn('no rules to validate');
-      return Promise.resolve({ ..._formData });
     }
     return new Promise((resolve, reject) => {
-      new AsyncValidator({ ...rules }).validate({ ..._formData }, (errors, fields) => {
+      new AsyncValidator({ ...rules }).validate({ ..._values }, (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;
@@ -162,7 +179,12 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
           if (errors) {
             reject({ errors, fields });
           } else {
-            resolve(fields);
+            /**如果是指定字段，直接返回字段值*/
+            if (isPropsFields) {
+              resolve({ ...fields });
+            } else {
+              resolve({ ..._formData });
+            }
           }
         }
       });

package/src/form/layout.tsx

@@ -27,7 +27,13 @@ export interface FairysValtioFormLayoutContextOptions {
   /**
    * 底部边框类型
    */
-  borderedType?: 'bottom' | 'body';
+  itemBorderType?: 'bottom' | 'body';
+  /**边框颜色*/
+  itemBorderColor?: React.CSSProperties['borderColor'];
+  /**是否校验失败时显示红色边框*/
+  isInvalidBorderRed?: boolean;
+  /**是否显示冒号*/
+  showColon?: boolean;
 }
 
 export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
@@ -66,7 +72,7 @@ export class FairysValtioFormLayoutInstance {
     colCount: 1,
     errorLayout: 'right-bottom',
     labelMode: 'between',
-    borderedType: 'bottom',
+    itemBorderType: 'bottom',
   });
   updated = (options: FairysValtioFormLayoutContextOptions = {}) => {
     const keys = Object.keys(options);
@@ -156,7 +162,10 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
   const parent_formItemLabelStyle = state.formItemLabelStyle;
   const parent_formItemBodyClassName = state.formItemBodyClassName;
   const parent_formItemBodyStyle = state.formItemBodyStyle;
-  const parent_borderedType = state.borderedType || 'bottom';
+  const parent_borderedType = state.itemBorderType || 'bottom';
+  const parent_itemBorderColor = state.itemBorderColor;
+  const parent_isInvalidBorderRed = state.isInvalidBorderRed;
+  const parent_showColon = state.showColon;
 
   const {
     colCount = parent_colCount,
@@ -168,8 +177,11 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
     formItemLabelStyle = parent_formItemLabelStyle,
     formItemBodyClassName = parent_formItemBodyClassName,
     formItemBodyStyle = parent_formItemBodyStyle,
-    borderedType = parent_borderedType,
+    itemBorderType = parent_borderedType,
+    itemBorderColor = parent_itemBorderColor,
     lastItemBordered = true,
+    isInvalidBorderRed = parent_isInvalidBorderRed,
+    showColon = parent_showColon,
     gap,
     isAllColSpan = false,
     className,
@@ -194,7 +206,10 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
         formItemLabelStyle,
         formItemBodyClassName,
         formItemBodyStyle,
-        borderedType,
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        showColon,
       }),
     [
       colCount,
@@ -206,17 +221,20 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
       formItemLabelStyle,
       formItemBodyClassName,
       formItemBodyStyle,
-      borderedType,
+      itemBorderType,
+      itemBorderColor,
+      isInvalidBorderRed,
+      showColon,
     ],
   );
 
   const layoutCls = useMemo(
     () =>
       clsx(
-        `fairys-valtio-form-layout fairystaroform__text-[12px] fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-md`,
+        `fairys-valtio-form-layout fairystaroform__text-[12px] fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-[4px]`,
         {
           'fairys-valtio-form-layout-all-col-span': isAllColSpan,
-          'fairys-taro-form-valtio-layout-box-shadow': boxShadow,
+          'fairys-valtio-form-layout-box-shadow': boxShadow,
           'fairystaroform__border fairystaroform__border-solid fairystaroform__border-gray-200': bordered,
           'fairys-valtio-form-layout-last-item-no-border': !lastItemBordered,
         },
@@ -270,7 +288,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
     colCount,
     errorLayout,
     labelMode,
-    borderedType,
+    itemBorderType,
     formLayoutInstance,
     //======================
     layoutName: layoutCls,
@@ -299,7 +317,7 @@ export interface FairysValtioFormLayoutAttrsReturn {
   /**
    * 底部边框类型
    */
-  borderedType: string;
+  itemBorderType: string;
   /**表单布局实例*/
   formLayoutInstance: FairysValtioFormLayoutInstance;
   /**布局ClassName*/

package/src/form/utils/index.ts

@@ -0,0 +1,108 @@
+/***
+ * 设置值
+ * @param object 任意对象
+ * @param paths 值路径
+ * @param nextValue 新值
+ *
+ * @description
+ * 值不存在时，当 paths 路径中的值为 number 类型时，会创建一个空数组。当 paths 路径中的值为 string 类型时，会创建一个空对象。
+ */
+export function set<T>(state: any, paths: PropertyKey[], nextValue: T) {
+  const _keys = [...paths];
+  let current: any = state;
+  const length = _keys.length - 1;
+  for (let i = 0; i <= length; i++) {
+    const key = _keys[i];
+    const _current = current[key];
+    // 应该判断下一个key的类型，而不是当前key的类型
+    const nextKey = _keys[i + 1];
+    /**
+     * 如果下一个key不存在，且key是数字，那么创建一个空数组
+     */
+    if (typeof _current === 'undefined' && typeof nextKey === 'number') {
+      current[key] = [];
+    } else if (typeof _current === 'undefined' && typeof nextKey === 'string') {
+      /**
+       * 如果下一个key不存在，且key是字符串，那么创建一个空对象
+       */
+      current[key] = {};
+    }
+    // 判断最后一个，直接赋值
+    if (i === length) {
+      current[key] = nextValue;
+    } else {
+      current = current[key];
+    }
+  }
+  return state;
+}
+
+/***
+ * 获取值
+ * @param value 任意值
+ * @param segments 键路径
+ */
+export function get<TDefault = unknown>(value: any, segments: PropertyKey[]): TDefault {
+  let current: any = value;
+  for (const key of segments) {
+    current = current?.[key];
+  }
+  return current;
+}
+
+/***
+ * 格式化路径，将路径中的数组索引转换为数字
+ * @param path 路径
+ * @returns 格式化后的路径
+ */
+export function formatePath(path: PropertyKey) {
+  if (typeof path !== 'string') {
+    return [path];
+  }
+  return path
+    .split(/[\.]/g)
+    .reduce((pre, next) => {
+      if (/\[[0-9]+\]$/.test(next)) {
+        const _next = next.split(/\[/);
+        let _nextValue: (string | number)[] = [];
+        for (let index = 0; index < _next.length; index++) {
+          const element = _next[index];
+          if (/\]$/.test(element)) {
+            // 去掉数组索引的方括号
+            const _v = element.replace(/\]$/, '');
+            // 转换为数字
+            const v = Number.parseInt(_v);
+            /**判断转换后和转换前的长度是否一致，一致则说明是数字*/
+            if (_v.length === `${v}`.length && !Number.isNaN(v)) {
+              _nextValue.push(v);
+            } else {
+              _nextValue.push(_v);
+            }
+          } else {
+            _nextValue.push(element);
+          }
+        }
+        return [...pre, ..._nextValue];
+      }
+      return [...pre, next];
+    }, [] as (string | number)[])
+    .map((item) => {
+      if (typeof item === 'string') {
+        return item.trim();
+      }
+      return item;
+    })
+    .filter((item) => item !== '');
+}
+
+/**格式化属性名*/
+export function formateName(name?: string, parentName?: string) {
+  if (parentName && name) {
+    return parentName + '.' + name;
+  } else if (parentName) {
+    return parentName;
+  } else if (name) {
+    return name;
+  }
+  return '';
+}

package/src/index.tsx

@@ -1,3 +1,4 @@
+export * from './form/hooks';
 export * from './form/instance';
 export * from './form/layout';
 export * from './form/form';

package/src/styles/index.css

@@ -19,11 +19,11 @@
   box-sizing: border-box;
 }
 
-.fairys-valtio-form-layout.fairys-form-layout-all-col-span {
+.fairys-valtio-form-layout.fairys-valtio-form-layout-all-col-span {
   grid-column: 1 / -1;
 }
 
-.fairys-valtio-form-layout.fairys-form-layout-box-shadow {
+.fairys-valtio-form-layout.fairys-valtio-form-layout-box-shadow {
   box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008;
 }
 
@@ -31,11 +31,17 @@
   margin-top: 12px;
 }
 
-.fairys-valtio-form-layout-last-item-no-border > .fairys-valtio-form-layout-body > .fairys-valtio-form-item:last-child,
+.fairys-valtio-form-layout-last-item-no-border
+  > .fairys-valtio-form-layout-body
+  > .fairys-valtio-form-item:last-child:not(.fairys-valtio-form-item-invalid-border-red),
 .fairys-valtio-form-layout-last-item-no-border
   > .fairys-valtio-form-layout-body
   > .fairys-valtio-form-item:last-child
   > .fairys-valtio-form-item-container
-  > .fairys-valtio-form-item-body {
+  > .fairys-valtio-form-item-body:not(.fairys-valtio-form-item-invalid-border-red) {
   border-bottom: 0px;
 }
+
+.fairys-valtio-form-item-invalid-border-red {
+  border-bottom-color: red !important;
+}