@fairys/valtio-form-basic 0.0.8 → 0.0.10

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,56 @@ export class FairysValtioFormInstance<T extends MObject<T> = Record<string, any>
   };
 
   // ===================================================规则处理================================================================
-  /**列规则 */
-  rules: Record<
-    PropertyKey,
-    ((formData: T, instance: FairysValtioFormInstance<T>) => RuleItem[] | Promise<RuleItem[]>) | RuleItem[]
-  > = {};
-  /**规则验证
-   * @param fields 列字段数组(可选)
+  /**由表单项挂载规则,(根据表单项的字段存储路径对应校验规则)*/
+  mountRules: Record<PropertyKey, RuleItem[]> = {};
+  /**移除表单项挂载规则*/
+  removeRules = (name: PropertyKey) => {
+    delete this.mountRules[name];
+  };
+  /**表单项规则*/
+  rules: Record<PropertyKey, RuleItem[]> = {};
+  /**表单项名称到路径映射*/
+  nameToPaths: Record<PropertyKey, PropertyKey[]> = {};
+  /**验证表单项规则
+   * @param fields 要验证的字段(可选)
    * @param isReturn 是否返回验证结果(可选)
    */
   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,12 +182,28 @@ 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 });
+            }
           }
         }
       });
     });
   };
+
+  /**
+   * 验证某些前缀的字段
+   * @param prefix 前缀字段数组
+   * @param isReturn 是否返回验证结果(可选)
+   */
+  validatePrefixFields = async (prefix: string[], isReturn: boolean = true): Promise<ValidateFieldsError | Values> => {
+    const fields = Object.keys(this.rules) as PropertyKey[];
+    const _fields = fields.filter((item) => prefix.some((p) => item.toString().startsWith(p)));
+    return this.validate(_fields, isReturn);
+  };
 }
 
 /**声明实例*/

package/src/form/layout.tsx

@@ -6,7 +6,7 @@ export interface FairysValtioFormLayoutContextOptions {
   /**列数据*/
   colCount?: number;
   /**规则校验失败错误提示位置*/
-  errorLayout?: 'left-bottom' | 'right-bottom' | 'top-right' | 'top-left';
+  errorLayout?: 'bottom-left' | 'bottom-right' | 'top-right' | 'top-left' | 'left-border-top' | 'right-border-top';
   /**
    * label显示模式
    * @platform taro 支持 between
@@ -27,7 +27,15 @@ export interface FairysValtioFormLayoutContextOptions {
   /**
    * 底部边框类型
    */
-  borderedType?: 'bottom' | 'body';
+  itemBorderType?: 'bottom' | 'body';
+  /**边框颜色*/
+  itemBorderColor?: React.CSSProperties['borderColor'];
+  /**是否校验失败时显示红色边框*/
+  isInvalidBorderRed?: boolean;
+  /**是否校验失败时显示红色文本*/
+  isInvalidTextRed?: boolean;
+  /**是否显示冒号*/
+  showColon?: boolean;
 }
 
 export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayoutContextOptions {
@@ -64,9 +72,9 @@ export interface FairysValtioFormLayoutAttrsProps extends FairysValtioFormLayout
 export class FairysValtioFormLayoutInstance {
   state = proxy<FairysValtioFormLayoutContextOptions>({
     colCount: 1,
-    errorLayout: 'right-bottom',
+    errorLayout: 'bottom-right',
     labelMode: 'between',
-    borderedType: 'bottom',
+    itemBorderType: 'bottom',
   });
   updated = (options: FairysValtioFormLayoutContextOptions = {}) => {
     const keys = Object.keys(options);
@@ -148,7 +156,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
   const formLayoutInstance = useFairysValtioFormLayoutInstance();
   const [state] = useFairysValtioFormLayoutContext();
   const parent_colCount = state.colCount || 1;
-  const parent_errorLayout = state.errorLayout || 'right-bottom';
+  const parent_errorLayout = state.errorLayout || 'bottom-right';
   const parent_labelMode = state.labelMode || 'between';
   const parent_formItemClassName = state.formItemClassName;
   const parent_formItemStyle = state.formItemStyle;
@@ -156,7 +164,11 @@ 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_isInvalidTextRed = state.isInvalidTextRed;
+  const parent_showColon = state.showColon;
 
   const {
     colCount = parent_colCount,
@@ -168,8 +180,12 @@ 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,
+    isInvalidTextRed = parent_isInvalidTextRed,
+    showColon = parent_showColon,
     gap,
     isAllColSpan = false,
     className,
@@ -194,7 +210,11 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
         formItemLabelStyle,
         formItemBodyClassName,
         formItemBodyStyle,
-        borderedType,
+        itemBorderType,
+        itemBorderColor,
+        isInvalidBorderRed,
+        isInvalidTextRed,
+        showColon,
       }),
     [
       colCount,
@@ -206,17 +226,21 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
       formItemLabelStyle,
       formItemBodyClassName,
       formItemBodyStyle,
-      borderedType,
+      itemBorderType,
+      itemBorderColor,
+      isInvalidBorderRed,
+      isInvalidTextRed,
+      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__transition-all fairystaroform__duration-300 fairystaroform__text-[12px] fairystaroform__w-full fairystaroform__box-border fairystaroform__rounded-[8px]`,
         {
           '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,
         },
@@ -227,7 +251,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
   const headerCls = useMemo(
     () =>
       clsx(
-        `fairys-valtio-form-layout-header fairystaroform__flex fairystaroform__justify-between fairystaroform__items-center fairystaroform__flex-row fairystaroform__py-[12px]  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 fairystaroform__box-border`,
+        `fairys-valtio-form-layout-header fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__flex fairystaroform__justify-between fairystaroform__items-center fairystaroform__flex-row fairystaroform__py-[10px]  fairystaroform__border-b fairystaroform__border-b-solid fairystaroform__border-b-gray-200 fairystaroform__box-border`,
         {
           'fairystaroform__px-[8px]': bordered || boxShadow,
           'fairystaroform__px-[4px]': !bordered && !boxShadow,
@@ -239,15 +263,21 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
   const headerTitleCls = useMemo(
     () =>
       clsx(
-        `fairys-valtio-form-layout-header-title fairystaroform__text-[14px] fairystaroform__font-bold fairystaroform__box-border`,
+        `fairys-valtio-form-layout-header-title fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__text-[14px] fairystaroform__font-bold fairystaroform__box-border`,
+      ),
+    [],
+  );
+  const headerExtraCls = useMemo(
+    () =>
+      clsx(
+        `fairys-valtio-form-layout-header-extra fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__box-border`,
       ),
     [],
   );
-  const headerExtraCls = useMemo(() => clsx(`fairys-valtio-form-layout-header-extra fairystaroform__box-border`), []);
 
   const body_base = useMemo(() => {
     return clsx(
-      'fairys-valtio-form-layout-body fairystaroform__px-[8px] fairystaroform__w-full fairystaroform__grid fairystaroform__gap-[2px] fairystaroform__box-border',
+      'fairys-valtio-form-layout-body fairystaroform__transition-all fairystaroform__duration-300 fairystaroform__px-[8px] fairystaroform__w-full fairystaroform__grid fairystaroform__gap-[2px] fairystaroform__box-border',
       bodyClassName,
     );
   }, [bodyClassName]);
@@ -270,7 +300,7 @@ export function useFairysValtioFormLayoutAttrs(props: FairysValtioFormLayoutAttr
     colCount,
     errorLayout,
     labelMode,
-    borderedType,
+    itemBorderType,
     formLayoutInstance,
     //======================
     layoutName: layoutCls,
@@ -299,7 +329,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,25 @@
   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;
+}
+
+.fairys-valtio-form-item-invalid-text-red > .fairys-valtio-form-item-container > .fairys-valtio-form-item-label,
+.fairys-valtio-form-item-invalid-text-red
+  > .fairys-valtio-form-item-container
+  > .fairys-valtio-form-item-body
+  > .fairys-valtio-form-item-body-input {
+  color: red !important;
+}