Merge pull request #2061 from creasy2010/develop

feat: update editingEditor's validate method to support asynchronous
VisActor · Jul 9, 2024 · 580ad65 · 580ad65
2 parents 0d8319d + 810301a
commit 580ad65
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 145 deletions.
diff --git a/docs/assets/guide/en/edit/edit_cell.md b/docs/assets/guide/en/edit/edit_cell.md
@@ -273,6 +273,8 @@ If verification is required, please customize the editor to implement the verifi
 
 If this interface is not defined, the editing value will not be verified by default, and the interface will return false. If the verification fails, it will remain in the editing state.
 
+If asynchronous verification is needed, you can return a Promise object. This Promise object should resolve to true upon successful verification and false upon verification failure.
+
 ## 9. Related APIs
 
 ```ts

diff --git a/docs/assets/guide/zh/edit/edit_cell.md b/docs/assets/guide/zh/edit/edit_cell.md
@@ -275,7 +275,9 @@ interface ListTableConstructorOptions {
 
 需要校验的情况 请自定义编辑器实现校验函数`validateValue`
 
-如未定义该接口则编辑值值默认不做校验，接口返回 false，校验失败则保留在编辑状态。
+如未定义该接口则编辑值值默认不做校验，接口返回 false，校验失败则保留在编辑状态;
+
+若需要实现异步校验，可以返回一个Promise对象，该Promise对象在校验成功时以真值解析，校验失败时以假值解析。
 
 ## 9. 相关 api
 

diff --git a/packages/vtable-editors/src/types.ts b/packages/vtable-editors/src/types.ts
@@ -28,7 +28,7 @@ export interface IEditor<V = any> {
    * Before set new value to table, use it to validate value.
    * If the interface returns true, the value takes effect; otherwise, it does not take effect.
    */
-  validateValue?: () => boolean;
+  validateValue?: () => boolean | Promise<boolean>;
   /**
    * Called when editor mode is exited by any means.
    * Expected to return the current value of the cell.

diff --git a/packages/vtable/src/edit/edit-manager.ts b/packages/vtable/src/edit/edit-manager.ts
@@ -4,6 +4,7 @@ import type { BaseTableAPI } from '../ts-types/base-table';
 import type { ListTableAPI, ListTableConstructorOptions } from '../ts-types';
 import { getCellEventArgsSet } from '../event/util';
 import type { SimpleHeaderLayoutMap } from '../layout';
+import { isPromise } from '../tools/helper';
 
 export class EditManeger {
   table: BaseTableAPI;
@@ -109,7 +110,7 @@ export class EditManeger {
   }
 
   /** 如果是事件触发调用该接口 请传入原始事件对象 将判断事件对象是否在编辑器本身上面  来处理是否结束编辑  返回值如果为false说明没有退出编辑状态*/
-  completeEdit(e?: Event): boolean {
+  completeEdit(e?: Event): boolean | Promise<boolean> {
     if (!this.editingEditor) {
       return true;
     }
@@ -132,25 +133,50 @@ export class EditManeger {
     if (!this.editingEditor.getValue) {
       console.warn('VTable Warn: `getValue` is not provided, did you forget to implement it?');
     }
-    if (!this.editingEditor.validateValue || this.editingEditor.validateValue?.()) {
-      const changedValue = this.editingEditor.getValue?.();
-      const range = this.table.getCellRange(this.editCell.col, this.editCell.row);
-      const changedValues: any[] = [];
-      for (let row = range.start.row; row <= range.end.row; row++) {
-        const rowChangedValues = [];
-        for (let col = range.start.col; col <= range.end.col; col++) {
-          rowChangedValues.push(changedValue);
-        }
-        changedValues.push(rowChangedValues);
+    if (this.editingEditor.validateValue) {
+      const maybePromiseOrValue = this.editingEditor.validateValue?.();
+      if (isPromise(maybePromiseOrValue)) {
+        return new Promise((resolve, reject)=>{
+          maybePromiseOrValue
+            .then(result => {
+              if (result) {
+                this.doExit();
+                resolve(true);
+              }else{
+                resolve(false);
+              }
+            })
+            .catch((err: Error) => {
+              console.error('VTable Error:', err);
+              reject(err);
+            });
+        })
+      } else if (maybePromiseOrValue) {
+        this.doExit();
+        return true;
       }
-      (this.table as ListTableAPI).changeCellValues(range.start.col, range.start.row, changedValues);
-      this.editingEditor.exit && console.warn('VTable Warn: `exit` is deprecated, please use `onEnd` instead.');
-      this.editingEditor.exit?.();
-      this.editingEditor.onEnd?.();
-      this.editingEditor = null;
+    } else {
+      this.doExit();
       return true;
     }
-    return false;
+  }
+
+  private doExit() {
+    const changedValue = this.editingEditor.getValue?.();
+    const range = this.table.getCellRange(this.editCell.col, this.editCell.row);
+    const changedValues: any[] = [];
+    for (let row = range.start.row; row <= range.end.row; row++) {
+      const rowChangedValues = [];
+      for (let col = range.start.col; col <= range.end.col; col++) {
+        rowChangedValues.push(changedValue);
+      }
+      changedValues.push(rowChangedValues);
+    }
+    (this.table as ListTableAPI).changeCellValues(range.start.col, range.start.row, changedValues);
+    this.editingEditor.exit && console.warn('VTable Warn: `exit` is deprecated, please use `onEnd` instead.');
+    this.editingEditor.exit?.();
+    this.editingEditor.onEnd?.();
+    this.editingEditor = null;
   }
 
   cancelEdit() {