Merge pull request #2062 from VisActor/1797-feature-validate-async

1797 feature validate async

common/changes/@visactor/vtable/1797-feature-validate-async_2024-07-11-07-21.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: edit api validateValue support async\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}

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

docs/assets/guide/zh/edit/edit_cell.md

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

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.

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;
@@ -108,8 +109,9 @@ export class EditManeger {
     }
   }
 
-  /** 如果是事件触发调用该接口 请传入原始事件对象 将判断事件对象是否在编辑器本身上面  来处理是否结束编辑  返回值如果为false说明没有退出编辑状态*/
-  completeEdit(e?: Event): boolean {
+  /** 如果是鼠标事件触发调用该接口 请传入原始事件对象 将判断事件对象是否在编辑器本身上面  来处理是否结束编辑
+   * 返回值如果为false说明没有退出编辑状态  validateValue接口返回false 说明校验失败不退出编辑 */
+  completeEdit(e?: Event): boolean | Promise<boolean> {
     if (!this.editingEditor) {
       return true;
     }
@@ -132,25 +134,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;
-      return true;
+      return false;
+    }
+    this.doExit();
+    return true;
+  }
+
+  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);
     }
-    return false;
+    (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() {