@douyinfe/semi-foundation 2.60.0 → 2.61.0-alpha.0

package/form/foundation.ts

@@ -9,6 +9,11 @@ import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, Component
 
 export type { BaseFormAdapter };
 
+type ScrollToErrorOpts = {
+    field?: string;
+    index?: number;
+    scrollOpts?: ScrollIntoViewOptions
+}
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
 
     data: FormState;
@@ -72,6 +77,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         this.getFormProps = this.getFormProps.bind(this);
         this.getFieldExist = this.getFieldExist.bind(this);
         this.scrollToField = this.scrollToField.bind(this);
+        this.scrollToError = this.scrollToError.bind(this);
     }
 
     init() {
@@ -130,7 +136,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         this._adapter.forceUpdate();
     }
 
-    // in order to slove byted-issue-289
+    // in order to solve bytedance internal issue-289
     registerArrayField(arrayFieldPath: string, val: any): void {
         this.updateArrayField(arrayFieldPath, {
             updateKey: new Date().valueOf(),
@@ -622,6 +628,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             submitForm: () => this.submit(),
             getFieldExist: (field: string) => this.getFieldExist(field),
             scrollToField: (field: string, scrollOpts?: ScrollIntoViewOptions) => this.scrollToField(field, scrollOpts),
+            scrollToError: (opts?: ScrollToErrorOpts) => this.scrollToError(opts),
         };
     }
 
@@ -701,8 +708,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         const errorDOM = this._adapter.getAllErrorDOM();
         if (errorDOM && errorDOM.length) {
             try {
-                const fieldDom = errorDOM[0].parentNode.parentNode;
-                scrollIntoView(fieldDom as Element, scrollOpts);
+                const fieldDOM = errorDOM[0].parentNode.parentNode;
+                scrollIntoView(fieldDOM as Element, scrollOpts);
             } catch (error) {}
         }
     }
@@ -713,4 +720,34 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             scrollIntoView(fieldDOM as Element, scrollOpts);
         }
     }
+
+    scrollToError(config?: ScrollToErrorOpts): void { 
+        let scrollOpts: ScrollIntoViewOptions = config && config.scrollOpts ? config.scrollOpts : { behavior: 'smooth', block: 'start' };
+        let field = config && config.field;
+        let index = config && config.index;
+        let fieldDOM, errorDOM;
+        if (typeof index === 'number') {
+            const allErrorDOM = this._adapter.getAllErrorDOM();
+            let errorDOM = allErrorDOM[index];
+            if (errorDOM) {
+                fieldDOM = errorDOM.parentNode.parentNode;
+            }
+        } else if (field) {
+            // If field is specified, find the error dom of the corresponding field
+            errorDOM = this._adapter.getFieldErrorDOM(field);
+            if (errorDOM) {
+                fieldDOM = errorDOM.parentNode.parentNode;
+            }
+        } else if (typeof field === 'undefined') {
+            // If field is not specified, find all error doms and scroll to the first one
+            let allErrorDOM = this._adapter.getAllErrorDOM();
+            if (allErrorDOM && allErrorDOM.length) {
+                fieldDOM = allErrorDOM[0].parentNode.parentNode;
+            }
+        }
+
+        if (fieldDOM) {
+            scrollIntoView(fieldDOM as Element, scrollOpts);
+        }
+    }
 }

package/form/interface.ts

@@ -22,6 +22,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
+    getFieldErrorDOM: (field: string) => Node;
     initFormId: () => void
 }
 
@@ -62,6 +63,12 @@ export type FieldPathValue<T, P extends FieldPath<T>> =
           ? T[P]
           : never;
 
+export type ScrollToErrorOptions<K> = {
+    field?: K;
+    index?: number;
+    scrollConfig?: ScrollIntoViewOptions
+}
+
 // use object replace Record<string, any>, fix issue 933
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */
@@ -91,7 +98,8 @@ export interface BaseFormApi<T extends object = any> {
     getValues: () => T;
     /** set value of multiple fields */
     setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
-    scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void
+    scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void;
+    scrollToError: <K extends keyof T>(config?: ScrollToErrorOptions<K>) => void
 }
 
 export interface CallOpts {

package/lib/cjs/form/foundation.d.ts

@@ -2,6 +2,11 @@ import BaseFoundation from '../base/foundation';
 import { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 export type { BaseFormAdapter };
+type ScrollToErrorOpts = {
+    field?: string;
+    index?: number;
+    scrollOpts?: ScrollIntoViewOptions;
+};
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     data: FormState;
     fields: Map<string, FieldStaff>;
@@ -85,6 +90,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         submitForm: () => void;
         getFieldExist: (field: string) => boolean;
         scrollToField: (field: string, scrollOpts?: ScrollIntoViewOptions) => void;
+        scrollToError: (opts?: ScrollToErrorOpts) => void;
         setValue: (field: string, value: any, opts: CallOpts) => void;
         setError: (field: string, error: any, opts: CallOpts) => void;
         setTouched: (field: string, isTouched: boolean, opts: CallOpts) => void;
@@ -98,4 +104,5 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     _autoScroll(timeout?: boolean | number): void;
     _getErrorFieldAndScroll(scrollOpts?: ScrollIntoViewOptions | boolean): void;
     scrollToField(field: string, scrollOpts?: ScrollIntoViewOptions<any>): void;
+    scrollToError(config?: ScrollToErrorOpts): void;
 }

package/lib/cjs/form/foundation.js

@@ -65,6 +65,7 @@ class FormFoundation extends _foundation.default {
     this.getFormProps = this.getFormProps.bind(this);
     this.getFieldExist = this.getFieldExist.bind(this);
     this.scrollToField = this.scrollToField.bind(this);
+    this.scrollToError = this.scrollToError.bind(this);
   }
   init() {
     this._adapter.initFormId();
@@ -117,7 +118,7 @@ class FormFoundation extends _foundation.default {
     this._adapter.notifyChange(this.data);
     this._adapter.forceUpdate();
   }
-  // in order to slove byted-issue-289
+  // in order to solve bytedance internal issue-289
   registerArrayField(arrayFieldPath, val) {
     this.updateArrayField(arrayFieldPath, {
       updateKey: new Date().valueOf(),
@@ -609,7 +610,8 @@ class FormFoundation extends _foundation.default {
       }),
       submitForm: () => this.submit(),
       getFieldExist: field => this.getFieldExist(field),
-      scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts)
+      scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts),
+      scrollToError: opts => this.scrollToError(opts)
     });
   }
   getFormState() {
@@ -684,8 +686,8 @@ class FormFoundation extends _foundation.default {
     const errorDOM = this._adapter.getAllErrorDOM();
     if (errorDOM && errorDOM.length) {
       try {
-        const fieldDom = errorDOM[0].parentNode.parentNode;
-        (0, _scrollIntoViewIfNeeded.default)(fieldDom, scrollOpts);
+        const fieldDOM = errorDOM[0].parentNode.parentNode;
+        (0, _scrollIntoViewIfNeeded.default)(fieldDOM, scrollOpts);
       } catch (error) {}
     }
   }
@@ -699,5 +701,36 @@ class FormFoundation extends _foundation.default {
       (0, _scrollIntoViewIfNeeded.default)(fieldDOM, scrollOpts);
     }
   }
+  scrollToError(config) {
+    let scrollOpts = config && config.scrollOpts ? config.scrollOpts : {
+      behavior: 'smooth',
+      block: 'start'
+    };
+    let field = config && config.field;
+    let index = config && config.index;
+    let fieldDOM, errorDOM;
+    if (typeof index === 'number') {
+      const allErrorDOM = this._adapter.getAllErrorDOM();
+      let errorDOM = allErrorDOM[index];
+      if (errorDOM) {
+        fieldDOM = errorDOM.parentNode.parentNode;
+      }
+    } else if (field) {
+      // If field is specified, find the error dom of the corresponding field
+      errorDOM = this._adapter.getFieldErrorDOM(field);
+      if (errorDOM) {
+        fieldDOM = errorDOM.parentNode.parentNode;
+      }
+    } else if (typeof field === 'undefined') {
+      // If field is not specified, find all error doms and scroll to the first one
+      let allErrorDOM = this._adapter.getAllErrorDOM();
+      if (allErrorDOM && allErrorDOM.length) {
+        fieldDOM = allErrorDOM[0].parentNode.parentNode;
+      }
+    }
+    if (fieldDOM) {
+      (0, _scrollIntoViewIfNeeded.default)(fieldDOM, scrollOpts);
+    }
+  }
 }
 exports.default = FormFoundation;

package/lib/cjs/form/interface.d.ts

@@ -16,6 +16,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
+    getFieldErrorDOM: (field: string) => Node;
     initFormId: () => void;
 }
 export type AllErrors<T> = T extends Record<string, any> ? {
@@ -35,6 +36,11 @@ export type FieldPath<T> = T extends object ? {
     [K in keyof T]: T[K] extends object ? `${string & K}.${FieldPath<T[K]>}` | `${string & K}` : `${string & K}`;
 }[keyof T] : never;
 export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends FieldPath<T[K]> ? FieldPathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
+export type ScrollToErrorOptions<K> = {
+    field?: K;
+    index?: number;
+    scrollConfig?: ScrollIntoViewOptions;
+};
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */
     getValue: <P extends FieldPath<T>>(field?: P) => FieldPathValue<T, P>;
@@ -66,6 +72,7 @@ export interface BaseFormApi<T extends object = any> {
     /** set value of multiple fields */
     setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
     scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void;
+    scrollToError: <K extends keyof T>(config?: ScrollToErrorOptions<K>) => void;
 }
 export interface CallOpts {
     [x: string]: any;

package/lib/es/form/foundation.d.ts

@@ -2,6 +2,11 @@ import BaseFoundation from '../base/foundation';
 import { Options as ScrollIntoViewOptions } from 'scroll-into-view-if-needed';
 import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
 export type { BaseFormAdapter };
+type ScrollToErrorOpts = {
+    field?: string;
+    index?: number;
+    scrollOpts?: ScrollIntoViewOptions;
+};
 export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     data: FormState;
     fields: Map<string, FieldStaff>;
@@ -85,6 +90,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         submitForm: () => void;
         getFieldExist: (field: string) => boolean;
         scrollToField: (field: string, scrollOpts?: ScrollIntoViewOptions) => void;
+        scrollToError: (opts?: ScrollToErrorOpts) => void;
         setValue: (field: string, value: any, opts: CallOpts) => void;
         setError: (field: string, error: any, opts: CallOpts) => void;
         setTouched: (field: string, isTouched: boolean, opts: CallOpts) => void;
@@ -98,4 +104,5 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     _autoScroll(timeout?: boolean | number): void;
     _getErrorFieldAndScroll(scrollOpts?: ScrollIntoViewOptions | boolean): void;
     scrollToField(field: string, scrollOpts?: ScrollIntoViewOptions<any>): void;
+    scrollToError(config?: ScrollToErrorOpts): void;
 }

package/lib/es/form/foundation.js

@@ -56,6 +56,7 @@ export default class FormFoundation extends BaseFoundation {
     this.getFormProps = this.getFormProps.bind(this);
     this.getFieldExist = this.getFieldExist.bind(this);
     this.scrollToField = this.scrollToField.bind(this);
+    this.scrollToError = this.scrollToError.bind(this);
   }
   init() {
     this._adapter.initFormId();
@@ -108,7 +109,7 @@ export default class FormFoundation extends BaseFoundation {
     this._adapter.notifyChange(this.data);
     this._adapter.forceUpdate();
   }
-  // in order to slove byted-issue-289
+  // in order to solve bytedance internal issue-289
   registerArrayField(arrayFieldPath, val) {
     this.updateArrayField(arrayFieldPath, {
       updateKey: new Date().valueOf(),
@@ -600,7 +601,8 @@ export default class FormFoundation extends BaseFoundation {
       }),
       submitForm: () => this.submit(),
       getFieldExist: field => this.getFieldExist(field),
-      scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts)
+      scrollToField: (field, scrollOpts) => this.scrollToField(field, scrollOpts),
+      scrollToError: opts => this.scrollToError(opts)
     });
   }
   getFormState() {
@@ -675,8 +677,8 @@ export default class FormFoundation extends BaseFoundation {
     const errorDOM = this._adapter.getAllErrorDOM();
     if (errorDOM && errorDOM.length) {
       try {
-        const fieldDom = errorDOM[0].parentNode.parentNode;
-        scrollIntoView(fieldDom, scrollOpts);
+        const fieldDOM = errorDOM[0].parentNode.parentNode;
+        scrollIntoView(fieldDOM, scrollOpts);
       } catch (error) {}
     }
   }
@@ -690,4 +692,35 @@ export default class FormFoundation extends BaseFoundation {
       scrollIntoView(fieldDOM, scrollOpts);
     }
   }
+  scrollToError(config) {
+    let scrollOpts = config && config.scrollOpts ? config.scrollOpts : {
+      behavior: 'smooth',
+      block: 'start'
+    };
+    let field = config && config.field;
+    let index = config && config.index;
+    let fieldDOM, errorDOM;
+    if (typeof index === 'number') {
+      const allErrorDOM = this._adapter.getAllErrorDOM();
+      let errorDOM = allErrorDOM[index];
+      if (errorDOM) {
+        fieldDOM = errorDOM.parentNode.parentNode;
+      }
+    } else if (field) {
+      // If field is specified, find the error dom of the corresponding field
+      errorDOM = this._adapter.getFieldErrorDOM(field);
+      if (errorDOM) {
+        fieldDOM = errorDOM.parentNode.parentNode;
+      }
+    } else if (typeof field === 'undefined') {
+      // If field is not specified, find all error doms and scroll to the first one
+      let allErrorDOM = this._adapter.getAllErrorDOM();
+      if (allErrorDOM && allErrorDOM.length) {
+        fieldDOM = allErrorDOM[0].parentNode.parentNode;
+      }
+    }
+    if (fieldDOM) {
+      scrollIntoView(fieldDOM, scrollOpts);
+    }
+  }
 }

package/lib/es/form/interface.d.ts

@@ -16,6 +16,7 @@ export interface BaseFormAdapter<P = Record<string, any>, S = Record<string, any
     getFormProps: (keys: undefined | string | Array<string>) => any;
     getAllErrorDOM: () => NodeList;
     getFieldDOM: (field: string) => Node;
+    getFieldErrorDOM: (field: string) => Node;
     initFormId: () => void;
 }
 export type AllErrors<T> = T extends Record<string, any> ? {
@@ -35,6 +36,11 @@ export type FieldPath<T> = T extends object ? {
     [K in keyof T]: T[K] extends object ? `${string & K}.${FieldPath<T[K]>}` | `${string & K}` : `${string & K}`;
 }[keyof T] : never;
 export type FieldPathValue<T, P extends FieldPath<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends FieldPath<T[K]> ? FieldPathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
+export type ScrollToErrorOptions<K> = {
+    field?: K;
+    index?: number;
+    scrollConfig?: ScrollIntoViewOptions;
+};
 export interface BaseFormApi<T extends object = any> {
     /** get value of field */
     getValue: <P extends FieldPath<T>>(field?: P) => FieldPathValue<T, P>;
@@ -66,6 +72,7 @@ export interface BaseFormApi<T extends object = any> {
     /** set value of multiple fields */
     setValues: (fieldsValue: Partial<T>, config?: setValuesConfig) => void;
     scrollToField: <K extends keyof T>(field: K, scrollConfig?: ScrollIntoViewOptions) => void;
+    scrollToError: <K extends keyof T>(config?: ScrollToErrorOptions<K>) => void;
 }
 export interface CallOpts {
     [x: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.60.0",
+    "version": "2.61.0-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "4002a3053726ca7c3d5175cad3cd7bc36cf0daf1",
+    "gitHead": "0975fe4980561d1c172fefc4a2273f71d5154f41",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",