feat: ✨ enable users to set the page size of the pagination configura…

…tion and close #302 (#309)

* style: 💄 cancel the splitLineRightShadow for the table mode

* chore: 🏗️ optimize the file structure of issue-285-spec

* feat: ✨ enable users to set the page size of the pagination configuration

* chore: ✅ update the table test

* chore: ✏️ fix the lint

packages/s2-core/__tests__/bugs/issue-285-spec.tsx

@@ -1,23 +1,29 @@
+/**
+ * @description spec for issue #285
+ * https://github.com/antvis/S2/issues/285
+ * Wrong render state when updating the dataCfg and options
+ *
+ */
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { Switch } from 'antd';
 import { getContainer } from '../util/helpers';
 import { SheetEntry } from '../util/sheet-entry';
-import {
-  withColHeaderDataCfg,
-  withoutColHeaderDataCfg,
-} from '../data/issue-285-dataset.json';
+import * as withColHeaderDataCfg from '../data/data-issue-285/data-col-header.json';
+import * as withoutColHeaderDataCfg from '../data/data-issue-285/data-without-col-header.json';
+import { S2DataConfig } from '@/common/interface';
 
 function MainLayout() {
-  const [dataCfg, setDataCfg] = useState(withoutColHeaderDataCfg);
+  const [dataCfg, setDataCfg] = useState<S2DataConfig>(withColHeaderDataCfg);
   const [colHeaderMode, setColHeaderMode] = useState(false);
 
-  const onColHeaderChange = (checked) => {
+  const onColHeaderChange = (checked: boolean) => {
     setColHeaderMode(checked);
     const newDataSet = checked ? withColHeaderDataCfg : withoutColHeaderDataCfg;
     setDataCfg(newDataSet);
   };
+
   return (
     <div>
       <SheetEntry

packages/s2-core/__tests__/data/data-issue-285/data-col-header.json

@@ -0,0 +1,28 @@
+{
+  "fields": {
+    "rows": ["month"],
+    "columns": ["type"],
+    "values": ["price"]
+  },
+  "meta": [
+    {
+      "field": "month",
+      "name": "订单日期"
+    },
+    {
+      "field": "type",
+      "name": "种类"
+    },
+    {
+      "field": "price",
+      "name": "价格"
+    }
+  ],
+  "data": [
+    {
+      "month": "2021-09",
+      "price": 12,
+      "type": "纸"
+    }
+  ]
+}

packages/s2-core/__tests__/data/data-issue-285/data-without-col-header.json

@@ -0,0 +1,31 @@
+{
+  "fields": {
+    "rows": ["month"],
+    "columns": [],
+    "values": ["price", "number"]
+  },
+  "meta": [
+    {
+      "field": "month",
+      "name": "订单日期"
+    },
+    {
+      "field": "number",
+      "name": "数量"
+    },
+    {
+      "field": "price",
+      "name": "价格"
+    }
+  ],
+  "data": [
+    {
+      "month": "2021-09",
+      "price": 12
+    },
+    {
+      "month": "2021-09",
+      "number": 2
+    }
+  ]
+}

packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.tsx

@@ -26,7 +26,7 @@ function MainLayout() {
   };
   const mergedOptions = {
     pagination: showPagination && {
-      pageSize: 20,
+      pageSize: 5,
       current: 1,
     },
     tooltip: {

packages/s2-core/__tests__/spreadsheet/table-sheet-spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { message } from 'antd';
+import { message, Switch } from 'antd';
 import 'antd/dist/antd.min.css';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
@@ -29,8 +29,10 @@ const canConvertToNumber = (sortKey) =>
     return typeof v === 'string' && !Number.isNaN(Number(v));
   });
 
-const getDataCfg = () => {
-  return {
+function MainLayout() {
+  const [showPagination, setShowPagination] = React.useState(false);
+
+  const dataCfg = {
     fields: {
       columns: [
         'order_id',
@@ -77,11 +79,9 @@ const getDataCfg = () => {
         sortMethod: 'ASC',
       },
     ],
-  };
-};
+  } as unknown as S2DataConfig;
 
-const getOptions = (): S2Options => {
-  return {
+  const options = {
     width: 800,
     height: 600,
     showSeriesNumber: true,
@@ -96,20 +96,21 @@ const getOptions = (): S2Options => {
       },
       device: 'pc',
     },
+    pagination: showPagination && {
+      pageSize: 10,
+      current: 1,
+    },
     frozenRowCount: 2,
     frozenColCount: 1,
     frozenTrailingColCount: 1,
     frozenTrailingRowCount: 1,
+
     linkFieldIds: ['order_id', 'customer_name'],
     tooltip: {
       showTooltip: true,
     },
-  };
-};
+  } as S2Options;
 
-function MainLayout(props) {
-  const [options, setOptions] = React.useState(props.options);
-  const [dataCfg, setDataCfg] = React.useState(props.dataCfg);
   const s2Ref = React.useRef<SpreadSheet>(null);
 
   useEffect(() => {
@@ -128,7 +129,14 @@ function MainLayout(props) {
 
   return (
     <div>
-      <div style={{ display: 'inline-block' }}></div>
+      <div style={{ display: 'inline-block' }}>
+        <Switch
+          checkedChildren="分页"
+          unCheckedChildren="不分页"
+          checked={showPagination}
+          onChange={setShowPagination}
+        />
+      </div>
       <SheetComponent
         dataCfg={dataCfg}
         adaptive={false}
@@ -145,9 +153,6 @@ describe('table sheet normal spec', () => {
   });
 
   act(() => {
-    ReactDOM.render(
-      <MainLayout dataCfg={getDataCfg()} options={getOptions()} />,
-      getContainer(),
-    );
+    ReactDOM.render(<MainLayout />, getContainer());
   });
 });

packages/s2-core/__tests__/unit/dataset/table-dataset-spec.ts

@@ -1,10 +1,10 @@
 /**
  * table mode data-set test.
  */
-import { S2DataConfig } from 'src/common/interface';
-import { SpreadSheet } from 'src/sheet-type';
-import { TableDataSet } from 'src/data-set/table-data-set';
-import { assembleDataCfg } from 'tests/util/sheet-entry';
+import { assembleDataCfg } from '../../util/sheet-entry';
+import { S2DataConfig } from '@/common/interface';
+import { SpreadSheet } from '@/sheet-type';
+import { TableDataSet } from '@/data-set/table-data-set';
 
 jest.mock('src/sheet-type');
 jest.mock('src/facet/layout/node');