Merge branch 'feat-copy-html' of github.com:antvis/S2 into feat-copy-…

…html

packages/s2-core/__tests__/bugs/issue-1587-spec.ts

@@ -0,0 +1,28 @@
+/**
+ * @description spec for issue #1587
+ * https://github.com/antvis/S2/issues/1587
+ */
+
+import { getContainer } from '../util/helpers';
+import * as mockDataConfig from '../data/simple-data.json';
+import type { S2Options } from '../../src';
+import { PivotSheet } from '@/sheet-type';
+
+const s2Options: S2Options = {
+  width: 800,
+  height: 600,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  pagination: {
+    pageSize: 2,
+  },
+};
+
+describe('Pagination Tests', () => {
+  const s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
+  s2.render();
+
+  test('should get correctly pagination scroll y if pagination.current is empty', () => {
+    expect(s2.facet.getPaginationScrollY()).toEqual(0);
+  });
+});

packages/s2-core/__tests__/unit/utils/sort-action-spec.tsx

@@ -35,6 +35,16 @@ describe('Sort Action Test', () => {
       expect(sortAction(data2, 'DESC')).toEqual(['3', '2', '11']);
     });
 
+    test('sort action with zero and number arr', () => {
+      const data1 = [1, 6, -2, 0];
+      expect(sortAction(data1, 'ASC')).toEqual([-2, 0, 1, 6]);
+      expect(sortAction(data1, 'DESC')).toEqual([6, 1, 0, -2]);
+
+      const data2 = ['0', 0, 2, -2];
+      expect(sortAction(data2, 'ASC')).toEqual([-2, '0', 0, 2]);
+      expect(sortAction(data2, 'DESC')).toEqual([2, '0', 0, -2]);
+    });
+
     test('sort action with string arr', () => {
       const data = ['a', 'c', 'b'];
       expect(sortAction(data, 'ASC')).toEqual(['a', 'b', 'c']);
@@ -49,6 +59,22 @@ describe('Sort Action Test', () => {
       expect(sortAction(data2, 'DESC')).toEqual(['啊', '2', '11']);
     });
 
+    test('object data sorted by key with zero', () => {
+      const data1 = [{ a: 1 }, { a: 0 }, { a: -3 }, { a: 2 }];
+      expect(sortAction(data1, 'ASC', 'a')).toEqual([
+        { a: -3 },
+        { a: 0 },
+        { a: 1 },
+        { a: 2 },
+      ]);
+      expect(sortAction(data1, 'DESC', 'a')).toEqual([
+        { a: 2 },
+        { a: 1 },
+        { a: 0 },
+        { a: -3 },
+      ]);
+    });
+
     test('sort action with object arr', () => {
       const data1 = [{ a: 1 }, { a: 3 }, { a: 2 }];
       expect(sortAction(data1, 'ASC', 'a')).toEqual([
@@ -93,6 +119,7 @@ describe('Sort Action Test', () => {
           'a',
         ),
       ).toEqual([{ a: undefined }, { a: '-' }, { a: 2 }, { a: '3' }]);
+
       expect(
         sortAction(
           [{ a: '-' }, { a: '3' }, { a: 2 }, { a: undefined }],

packages/s2-core/src/common/constant/index.ts

@@ -11,3 +11,4 @@ export * from './theme';
 export * from './tooltip';
 export * from './resize';
 export * from './copy';
+export * from './pagination';

packages/s2-core/src/common/constant/pagination.ts

@@ -0,0 +1 @@
+export const DEFAULT_PAGE_INDEX = 1;

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

@@ -52,8 +52,8 @@ import { getAdjustedRowScrollX, getAdjustedScrollOffset } from '../utils/facet';
 import { getAllChildCells } from '../utils/get-all-child-cells';
 import { getColsForGrid, getRowsForGrid } from '../utils/grid';
 import { diffPanelIndexes, type PanelIndexes } from '../utils/indexes';
-import { updateMergedCells } from '../utils/interaction/merge-cell';
 import { isMobile } from '../utils/is-mobile';
+import { DEFAULT_PAGE_INDEX } from '../common/constant/pagination';
 import { CornerBBox } from './bbox/cornerBBox';
 import { PanelBBox } from './bbox/panelBBox';
 import {
@@ -281,7 +281,7 @@ export abstract class BaseFacet {
   public getPaginationScrollY(): number {
     const { pagination } = this.cfg;
     if (pagination) {
-      const { current, pageSize } = pagination;
+      const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
       const heights = this.viewCellHeights;
       const offset = Math.max((current - 1) * pageSize, 0);
       return heights.getCellOffsetY(offset);
@@ -317,7 +317,7 @@ export abstract class BaseFacet {
   emitPaginationEvent = () => {
     const { pagination } = this.cfg;
     if (pagination) {
-      const { current, pageSize } = pagination;
+      const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
       const total = this.viewCellHeights.getTotalLength();
 
       const pageCount = Math.floor((total - 1) / pageSize) + 1;

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

@@ -5,6 +5,7 @@ import { FrozenCellType } from '../common/constant/frozen';
 import type { FrozenCellIndex, FrozenOpts } from '../common/constant/frozen';
 import type { Pagination, ScrollSpeedRatio } from '../common/interface';
 import type { Indexes } from '../utils/indexes';
+import { DEFAULT_PAGE_INDEX } from '../common/constant/pagination';
 import type { ViewCellHeights } from './layout/interface';
 
 export const isFrozenCol = (colIndex: number, frozenCount: number) => {
@@ -356,7 +357,7 @@ export const getCellRange = (
   let end = heights.getTotalLength() - 1;
 
   if (pagination) {
-    const { current, pageSize } = pagination;
+    const { current = DEFAULT_PAGE_INDEX, pageSize } = pagination;
 
     start = Math.max((current - 1) * pageSize, 0);
     end = Math.min(current * pageSize - 1, heights.getTotalLength() - 1);

packages/s2-core/src/interaction/event-controller.ts

@@ -268,23 +268,26 @@ export class EventController {
 
     if (this.isResizeArea(event)) {
       this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_DOWN, event);
-      
+
       // 仅捕获在canvas之外触发的事件     https://github.com/antvis/S2/issues/1592
       const resizeMouseMoveCapture = (mouseEvent: MouseEvent) => {
         if (!this.spreadsheet.getCanvasElement()) return false;
         if (this.spreadsheet.getCanvasElement() !== mouseEvent.target) {
-
           event.clientX = mouseEvent.clientX;
           event.clientY = mouseEvent.clientY;
-          event.originalEvent = mouseEvent
+          event.originalEvent = mouseEvent;
           this.spreadsheet.emit(S2Event.LAYOUT_RESIZE_MOUSE_MOVE, event);
         }
-      }
+      };
 
       window.addEventListener('mousemove', resizeMouseMoveCapture);
-      window.addEventListener('mouseup', () => {
-        window.removeEventListener('mousemove', resizeMouseMoveCapture)
-      }, { once: true })
+      window.addEventListener(
+        'mouseup',
+        () => {
+          window.removeEventListener('mousemove', resizeMouseMoveCapture);
+        },
+        { once: true },
+      );
       return;
     }
 

packages/s2-core/src/utils/sort-action.ts

@@ -5,6 +5,8 @@ import {
   includes,
   indexOf,
   isEmpty,
+  isNaN,
+  isNil,
   keys,
   map,
   split,
@@ -22,6 +24,8 @@ export const isAscSort = (sortMethod) => toUpper(sortMethod) === 'ASC';
 
 export const isDescSort = (sortMethod) => toUpper(sortMethod) === 'DESC';
 
+const canTobeNumber = (a?: string | number) => !isNaN(Number(a));
+
 /**
  * 执行排序
  * @param list - 待排序数组
@@ -37,12 +41,12 @@ export const sortAction = (
   const specialValues = ['-', undefined];
   return list?.sort(
     (pre: string | number | DataType, next: string | number | DataType) => {
-      let a = pre;
-      let b = next;
+      let a = pre as string | number;
+      let b = next as string | number;
       if (key) {
-        a = pre[key];
-        b = next[key];
-        if (Number(a) && Number(b)) {
+        a = pre[key] as string | number;
+        b = next[key] as string | number;
+        if (canTobeNumber(a) && canTobeNumber(b)) {
           return (Number(a) - Number(b)) * sort;
         }
         if (a && specialValues?.includes(a?.toString())) {
@@ -52,7 +56,8 @@ export const sortAction = (
           return sort;
         }
       }
-      if (a && b) {
+      // 没有参数 key 时，需要理解成按字典序（首字母）进行排序，用于排维度值的。（我也不理解为啥要把这两个逻辑写在一起，很容易误解
+      if (!isNil(a) && !isNil(b)) {
         // 数据健全兼容，用户数据不全时，能够展示.
         return a.toString().localeCompare(b.toString(), 'zh') * sort;
       }

packages/s2-react/playground/index.tsx

@@ -887,6 +887,7 @@ function MainLayout() {
               ref={s2Ref}
               themeCfg={themeCfg}
               partDrillDown={partDrillDown}
+              showPagination={showPagination}
               header={{
                 title: (
                   <a href="https://github.com/antvis/S2">

packages/s2-shared/src/utils/resize.ts

@@ -1,20 +1,24 @@
-import { debounce } from 'lodash';
+import { debounce, isBoolean } from 'lodash';
 import { RESIZE_RENDER_DELAY } from '../constant/resize';
 import type { Adaptive, ResizeEffectParams } from '../interface';
 
 export const analyzeAdaptive = (
-  paramsContainer: HTMLElement,
+  defaultContainer: HTMLElement,
   adaptive?: Adaptive,
 ) => {
-  let container = paramsContainer;
-  let adaptiveWidth = true;
-  let adaptiveHeight = false;
-  if (typeof adaptive !== 'boolean') {
-    container = adaptive?.getContainer?.() || paramsContainer;
-    adaptiveWidth = adaptive?.width ?? true;
-    adaptiveHeight = adaptive?.height ?? true;
+  if (isBoolean(adaptive)) {
+    return {
+      container: defaultContainer,
+      adaptiveWidth: true,
+      adaptiveHeight: false,
+    };
   }
-  return { container, adaptiveWidth, adaptiveHeight };
+
+  return {
+    container: adaptive?.getContainer?.() || defaultContainer,
+    adaptiveWidth: adaptive?.width ?? true,
+    adaptiveHeight: adaptive?.height ?? true,
+  };
 };
 
 export const createResizeObserver = (params: ResizeEffectParams) => {

s2-site/docs/common/pagination.zh.md

@@ -10,5 +10,5 @@ boolean ｜ object **必选**,_default: null_ 功能描述： 分页配置
 | 参数      | 说明          | 类型   | 默认值 | 必选  |
 | --------- | ------------------- | ------ | ------ | :--:  |
 | pageSize  | 每页数量            | `number` | - |  ✓   |
-| current   | 当前页（从 1 开始） | `number` |       1      |     |
+| current   | 当前页（从 1 开始） | `number` |       1      |  ✓   |
 | total     | 数据总条数          | `number` | - |      |

s2-site/docs/manual/basic/analysis/pagination.zh.md

@@ -9,13 +9,13 @@ S2 内置提供了分页能力。本质上是前端分页，点击下一页滚
 
 ### 快速上手
 
-首先需要在 `S2Options 中配置 Pagination
+首先需要在 `S2Options` 中配置 `pagination` 属性
 
-markdown:docs/common/pagination.zh.md
+`markdown:docs/common/pagination.zh.md`
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/LVw2QOvjgW/b1563a7b-4070-4d61-a18b-6558e2c5b27b.png" width="600"  alt="preview" />
 
-如果基于 `@antv/s2-core` 开发，需要自己引入或实现分页组件，参考示例
+如果基于 `@antv/s2-core` 开发，需要自行引入或实现分页组件，`core` 层仅提供分页能力，参考示例
 
 * [React](https://github.com/antvis/S2/blob/master/packages/s2-react/src/components/pagination/index.tsx)
 * [Vue 3.0](https://github.com/antvis/S2/blob/master/packages/s2-vue/src/components/pagination/index.vue)
@@ -30,12 +30,12 @@ markdown:docs/common/pagination.zh.md
 
 ### React 版
 
-> 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) 分页组件, 透传 `onChange` 和 `onShowSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
+> 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) 分页组件，透传 `onChange` 和 `onShowSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
 
 <playground path='react-component/pagination/demo/pivot.tsx' rid='container'></playground>
 
 ### Vue 3.0 版
 
-> 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件, 透传 `change` 和 `showSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
+> 使用的是 [Ant Design Vue](https://antdv.com/components/pagination) 分页组件，透传 `change` 和 `showSizeChange` 回调。需要修改样式直接写 CSS 覆盖即可。
 
 [Demo 地址](https://codesandbox.io/embed/nice-dijkstra-hzycy6?fontsize=14&hidenavigation=1&theme=dark)

s2-site/docs/manual/basic/theme.zh.md

@@ -121,7 +121,7 @@ const customTheme = {
   },
 };
 
-s2.setThemeCfg({ theme: customTheme }); // 也可以使用：s2.setTheme(customTheme)
+s2.setTheme(customTheme)
 s2.render(false);
 ```
 

s2-site/docs/manual/getting-started.zh.md

@@ -186,7 +186,7 @@ s2.render();
 
 ### `React` 版本
 
-`S2` 提供了开箱即用的 `React` 版本 [表格组件](/zh/examples/gallery#category-表格组件）, 还有丰富的配套 [分析组件](/zh/examples/gallery#category-Tooltip), 帮助开发者快速满足业务看数分析需求。
+`S2` 提供了开箱即用的 `React` 版本 [表格组件](/zh/examples/gallery#category-表格组件), 还有丰富的配套 [分析组件](/zh/examples/gallery#category-Tooltip), 帮助开发者快速满足业务看数分析需求。
 
 #### 表格组件使用
 

s2-site/examples/theme/custom/demo/custom-schema.ts

@@ -194,7 +194,7 @@ fetch(
 
     const s2 = new TableSheet(container, s2DataConfig, s2Options);
 
-    s2.setThemeCfg({ theme: customTheme });
+    s2.setTheme(customTheme);
 
     s2.render();
   });