feat(components): 组件层更新时增加 loading 效果 close #1790

.prettierignore

@@ -21,6 +21,7 @@ CNAME
 LICENSE
 s2-site/.cache
 s2-site/public
+s2-site/*.tsx
 .history
 esm
 dist

packages/s2-core/__tests__/spreadsheet/spread-sheet-collapse-spec.ts

@@ -280,7 +280,7 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
       expectCornerIconName(s2, 'Plus');
     });
 
-    test('should emit collapse event', () => {
+    test('should emit collapse event', async () => {
       const onCollapsed = jest.fn();
 
       s2.on(S2Event.ROW_CELL_COLLAPSED, onCollapsed);
@@ -301,19 +301,21 @@ describe('SpreadSheet Collapse/Expand Tests', () => {
 
       s2.emit(S2Event.ROW_CELL_COLLAPSED__PRIVATE, treeRowType);
 
+      await sleep(500);
       expect(onCollapsed).toHaveBeenCalledWith(params);
       expectCornerIconName(s2, 'Minus');
     });
 
-    test('should emit collapse all event', () => {
+    test('should emit collapse all event', async () => {
       const onCollapsed = jest.fn();
 
       s2.on(S2Event.ROW_CELL_ALL_COLLAPSED, onCollapsed);
 
       s2.emit(S2Event.ROW_CELL_ALL_COLLAPSED__PRIVATE, false);
 
+      await sleep(500);
       expect(onCollapsed).toHaveBeenCalledWith(true);
-      expectCornerIconName(s2, 'Minus');
+      expectCornerIconName(s2, 'Plus');
     });
 
     // https://github.com/antvis/S2/issues/2607

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -25,9 +25,10 @@ import { cloneDeep, last } from 'lodash';
 import dataCfg from 'tests/data/simple-data.json';
 import { waitForRender } from 'tests/util';
 import { createPivotSheet, getContainer, sleep } from 'tests/util/helpers';
-import type {
+import {
   BaseEvent,
   BaseTooltipOperatorMenuOptions,
+  CornerCell,
   HeaderCell,
   TooltipOptions,
 } from '../../../src';
@@ -843,7 +844,7 @@ describe('PivotSheet Tests', () => {
     );
 
     await pivotSheet.render();
-    const extraField = last(pivotSheet.facet.getCornerCells());
+    const extraField = last<CornerCell>(pivotSheet.facet.getCornerCells());
 
     expect(extraField?.getActualText()).toEqual('数值');
   });
@@ -867,16 +868,19 @@ describe('PivotSheet Tests', () => {
 
     await pivotSheet.render();
 
-    const extraField = last(pivotSheet.facet.getCornerCells());
+    const extraField = last<CornerCell>(pivotSheet.facet.getCornerCells());
 
     expect(extraField?.getActualText()).toEqual(cornerExtraFieldText);
   });
 
   describe('Tree Collapse Tests', () => {
-    test('should collapse rows with tree mode', () => {
+    test('should collapse rows with tree mode', async () => {
       s2.setOptions({
         hierarchyType: 'tree',
       });
+
+      await s2.render(false);
+
       const renderSpy = jest
         .spyOn(s2, 'render')
         .mockImplementation(async () => {});
@@ -901,6 +905,8 @@ describe('PivotSheet Tests', () => {
 
       s2.emit(S2Event.ROW_CELL_COLLAPSED__PRIVATE, treeRowType);
 
+      await sleep(500);
+
       expect(collapseRows).toHaveBeenCalledWith(collapsedRowsType);
       expect(s2.options.style?.rowCell?.collapseFields).toEqual(
         collapsedRowsType.collapseFields,
@@ -1187,7 +1193,7 @@ describe('PivotSheet Tests', () => {
 
     // g5.0 destroy
     expect(destroyFn).toHaveBeenCalled();
-    expect(document.body.contains(s2.getCanvasElement())).toBeFalse();
+    expect(document.body.contains(s2.getCanvasElement())).toBeFalsy();
   });
 
   describe('Test Layout by dataCfg fields', () => {

packages/s2-core/src/common/interface/s2Options.ts

@@ -365,6 +365,9 @@ export interface S2Options<
   frozen?: S2PivotSheetFrozenOptions & S2BaseFrozenOptions;
 }
 
+/**
+ * 自定义渲染模式
+ */
 export interface S2RenderOptions {
   /**
    * 是否重新加载数据
@@ -374,7 +377,7 @@ export interface S2RenderOptions {
   /**
    * 是否重新生成数据集
    */
-  reBuildDataSet?: boolean;
+  rebuildDataSet?: boolean;
 
   /**
    * 是否重新生成列头隐藏信息

packages/s2-core/src/facet/header/corner.ts

@@ -231,7 +231,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
   }
 
   /**
-   *  Make cornerHeader scroll with hScrollBar
+   * Make cornerHeader scroll with hScrollBar
    * @param scrollX
    */
   public onCorScroll(scrollX: number, type: string): void {

packages/s2-core/src/facet/table-facet.ts

@@ -235,7 +235,7 @@ export class TableFacet extends FrozenFacet {
     }
   }
 
-  private onSortHandler = (sortParams: SortParams) => {
+  private onSortHandler = async (sortParams: SortParams) => {
     const s2 = this.spreadsheet;
     let params = sortParams;
 
@@ -274,7 +274,8 @@ export class TableFacet extends FrozenFacet {
 
     set(s2.dataCfg, 'sortParams', [...oldConfigs, ...params]);
     s2.setDataCfg(s2.dataCfg);
-    s2.render(true);
+    await s2.render(true);
+
     s2.emit(
       S2Event.RANGE_SORTED,
       (s2.dataSet as TableDataSet).getDisplayDataSet(),

packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts

@@ -214,7 +214,7 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
     await hideColumnsByThunkGroup(this.spreadsheet, selectedColumnFields, true);
   }
 
-  private handleExpandIconClick(node: Node) {
+  private async handleExpandIconClick(node: Node) {
     const lastHiddenColumnsDetail = this.spreadsheet.store.get(
       'hiddenColumnsDetail',
       [],
@@ -249,6 +249,6 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
     });
     this.spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
     this.spreadsheet.interaction.reset();
-    this.spreadsheet.render(false);
+    await this.spreadsheet.render(false);
   }
 }

packages/s2-core/src/interaction/row-column-resize.ts

@@ -578,7 +578,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
     });
   }
 
-  private renderResizedResult() {
+  private async renderResizedResult() {
     const resizeInfo = this.getResizeInfo();
     const {
       style,
@@ -607,7 +607,7 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
     }
 
     this.spreadsheet.store.set('resized', true);
-    this.render();
+    await this.render();
   }
 
   private getResizeInfo(): ResizeInfo {
@@ -638,10 +638,10 @@ export class RowColumnResize extends BaseEvent implements BaseEventImplement {
     };
   }
 
-  private render() {
+  private async render() {
     this.resizeStartPosition = {};
     this.resizeTarget = null;
     this.resizeReferenceGroup = null;
-    this.spreadsheet.render(false);
+    await this.spreadsheet.render(false);
   }
 }

packages/s2-core/src/sheet-type/pivot-sheet.ts

@@ -66,14 +66,14 @@ export class PivotSheet extends SpreadSheet {
     return this.dataSet?.fields?.valueInCols!;
   }
 
-  public clearDrillDownData(rowNodeId?: string, preventRender?: boolean) {
+  public async clearDrillDownData(rowNodeId?: string, preventRender?: boolean) {
     if (this.dataSet instanceof PivotDataSet) {
       const cleaned = this.dataSet.clearDrillDownData(rowNodeId);
 
       if (cleaned && !preventRender) {
         // 重置当前交互
         this.interaction.reset();
-        this.render(false);
+        await this.render(false);
       }
     }
   }
@@ -97,7 +97,7 @@ export class PivotSheet extends SpreadSheet {
     );
   }
 
-  protected handleRowCellCollapsed(data: RowCellCollapsedParams) {
+  protected async handleRowCellCollapsed(data: RowCellCollapsedParams) {
     const { isCollapsed, node } = data;
     const { collapseFields: defaultCollapsedFields } =
       this.options.style?.rowCell!;
@@ -114,15 +114,16 @@ export class PivotSheet extends SpreadSheet {
         },
       },
     });
-    this.render(false);
+
+    await this.render(false);
     this.emit(S2Event.ROW_CELL_COLLAPSED, {
       isCollapsed,
       collapseFields,
       node,
     });
   }
 
-  protected handleRowCellToggleCollapseAll(isCollapsed: boolean) {
+  protected async handleRowCellToggleCollapseAll(isCollapsed: boolean) {
     const collapseAll = !isCollapsed;
 
     this.setOptions({
@@ -134,11 +135,12 @@ export class PivotSheet extends SpreadSheet {
         },
       },
     });
-    this.render(false);
+
+    await this.render(false);
     this.emit(S2Event.ROW_CELL_ALL_COLLAPSED, collapseAll);
   }
 
-  public groupSortByMethod(sortMethod: SortMethod, meta: Node) {
+  public async groupSortByMethod(sortMethod: SortMethod, meta: Node) {
     const { rows, columns } = this.dataCfg.fields;
     const { hideValue } = this.options.style!.colCell!;
     const sortField = this.isValueInCols() ? last(rows) : last(columns);
@@ -173,6 +175,6 @@ export class PivotSheet extends SpreadSheet {
       ...this.dataCfg,
       sortParams,
     });
-    this.render();
+    await this.render();
   }
 }

packages/s2-core/src/sheet-type/spread-sheet.ts

@@ -121,9 +121,12 @@ export abstract class SpreadSheet extends EE {
   public abstract clearDrillDownData(
     rowNodeId?: string,
     preventRender?: boolean,
-  ): void;
+  ): Promise<void>;
 
-  public abstract groupSortByMethod(sortMethod: SortMethod, meta: Node): void;
+  public abstract groupSortByMethod(
+    sortMethod: SortMethod,
+    meta: Node,
+  ): Promise<void> | void;
 
   public constructor(
     dom: S2MountContainer,
@@ -240,9 +243,9 @@ export abstract class SpreadSheet extends EE {
     return this.options.tooltip?.render?.(this) || new BaseTooltip(this);
   }
 
-  private getTargetCell(target: CellEventTarget) {
+  private getTargetCell(target: CellEventTarget): S2CellType {
     // 刷选等场景, 以最后一个发生交互的单元格为准
-    return this.getCell(target) || last(this.interaction.getInteractedCells());
+    return this.getCell(target) || last(this.interaction.getInteractedCells())!;
   }
 
   /**
@@ -419,13 +422,13 @@ export abstract class SpreadSheet extends EE {
 
     const {
       reloadData = true,
-      reBuildDataSet = false,
+      rebuildDataSet = false,
       reBuildHiddenColumnsDetail = true,
     } = options || {};
 
     this.emit(S2Event.LAYOUT_BEFORE_RENDER);
 
-    if (reBuildDataSet) {
+    if (rebuildDataSet) {
       this.dataSet = this.getDataSet();
     }
 
@@ -452,7 +455,7 @@ export abstract class SpreadSheet extends EE {
       s2.render(false)
       s2.render({
         reloadData: true;
-        reBuildDataSet: true;
+        rebuildDataSet: true;
         reBuildHiddenColumnsDetail: true;
       })
    */
@@ -902,8 +905,8 @@ export abstract class SpreadSheet extends EE {
       menu: {
         selectedKeys,
         items: menuItems,
-        onClick: ({ key: sortMethod }) => {
-          this.groupSortByMethod(sortMethod as SortMethod, meta);
+        onClick: async ({ key: sortMethod }) => {
+          await this.groupSortByMethod(sortMethod as SortMethod, meta);
           this.emit(S2Event.RANGE_SORTED, event);
         },
       },

packages/s2-core/src/sheet-type/table-sheet.ts

@@ -49,7 +49,8 @@ export class TableSheet extends SpreadSheet {
     return false;
   }
 
-  public clearDrillDownData(): void {}
+  // eslint-disable-next-line no-empty-function
+  public async clearDrillDownData() {}
 
   /**
    * Check if the value is in the columns
@@ -81,7 +82,7 @@ export class TableSheet extends SpreadSheet {
     this.off(S2Event.RANGE_FILTER);
   }
 
-  public groupSortByMethod = (sortMethod: SortMethod, meta: Node) => {
+  public groupSortByMethod(sortMethod: SortMethod, meta: Node) {
     const { field } = meta;
 
     const sortParam: SortParam = {
@@ -91,5 +92,5 @@ export class TableSheet extends SpreadSheet {
 
     this.updateSortMethodMap(meta.id, sortMethod);
     this.emit(S2Event.RANGE_SORT, [sortParam]);
-  };
+  }
 }

packages/s2-core/src/ui/hd-adapter/index.ts

@@ -86,17 +86,19 @@ export class HdAdapter {
    * DPR 改变也会触发 visualViewport 的 resize 事件, 预期是只监听双指缩放, 所以这里规避掉
    * @see https://github.com/antvis/S2/issues/2072
    */
-  private renderByZoomScaleWithoutResizeEffect = (event: Event) => {
+  private renderByZoomScaleWithoutResizeEffect = async (event: Event) => {
     this.isDevicePixelRatioChange = false;
-    this.renderByZoomScale(event);
+    await this.renderByZoomScale(event);
   };
 
-  private renderByDevicePixelRatioChanged = () => {
+  private renderByDevicePixelRatioChanged = async () => {
     this.isDevicePixelRatioChange = true;
-    this.renderByDevicePixelRatio();
+    await this.renderByDevicePixelRatio();
   };
 
-  private renderByDevicePixelRatio = (ratio = window.devicePixelRatio) => {
+  private renderByDevicePixelRatio = async (
+    ratio = window.devicePixelRatio,
+  ) => {
     const {
       container,
       options: { width, height },
@@ -112,14 +114,14 @@ export class HdAdapter {
     container.getConfig().devicePixelRatio = ratio;
     container.resize(width!, height!);
 
-    this.spreadsheet.render(false);
+    await this.spreadsheet.render(false);
   };
 
-  private renderByZoomScale = debounce((event: Event) => {
+  private renderByZoomScale = debounce(async (event: Event) => {
     const ratio = Math.ceil((event.target as VisualViewport)?.scale);
 
     if (ratio >= 1 && !this.isDevicePixelRatioChange) {
-      this.renderByDevicePixelRatio(ratio);
+      await this.renderByDevicePixelRatio(ratio);
     }
   }, 350);
 }