fix(react): 更新react分页器定义 (#2238)

* fix(react): correct `showPagination` type

* docs: correct `showPagination` type

* chore: correct `showPagination` type

- update `showPagination` type in react playground
- update correct callback in s2 site demo

---------

Co-authored-by: 刘嘉一 <lcx.seima@gmail.com>

packages/s2-react/playground/index.tsx

@@ -55,6 +55,7 @@ import type {
  PartDrillDown,
  PartDrillDownInfo,
  SheetComponentOptions,
+ SheetComponentsProps,
 } from '../src';
 import { SheetComponent } from '../src';
 import {
@@ -168,7 +169,8 @@ function MainLayout() {
  // ================== State ========================
  const [render, setRender] = React.useState(true);
  const [sheetType, setSheetType] = React.useState<SheetType>('pivot');
- const [showPagination, setShowPagination] = React.useState(false);
+ const [showPagination, setShowPagination] =
+ React.useState<SheetComponentsProps['showPagination']>(false);
  const [showTotals, setShowTotals] = React.useState(false);
  const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
  name: 'default',
@@ -812,7 +814,7 @@ function MainLayout() {
  <Switch
  checkedChildren="分页"
  unCheckedChildren="不分页"
- checked={showPagination}
+ checked={showPagination as boolean}
  onChange={setShowPagination}
  />
  <Switch

packages/s2-react/src/components/sheets/interface.ts

@@ -37,5 +37,6 @@ export type SheetComponentOptions = S2Options<
 export type SheetComponentsProps = BaseSheetComponentProps<
  PartDrillDown,
  HeaderCfgProps,
- SheetComponentOptions
+ SheetComponentOptions,
+ true
 >;

packages/s2-shared/src/interface.ts

@@ -45,10 +45,27 @@ export type SheetType =
 /** render callback */
 export type SheetUpdateCallback = (params: S2RenderOptions) => S2RenderOptions;
 
+type _ShowPagination =
+ | boolean
+ | {
+ onShowSizeChange?: (pageSize: number) => void;
+ onChange?: (current: number) => void;
+ };
+
+type ShowPagination<OverrideShowPagination, Options> =
+ OverrideShowPagination extends true
+ ? Options extends {
+ pagination?: { onShowSizeChange?: unknown; onChange?: unknown };
+ }
+ ? boolean | Pick<Options['pagination'], 'onShowSizeChange' | 'onChange'>
+ : _ShowPagination
+ : _ShowPagination;
+
 export interface BaseSheetComponentProps<
  PartialDrillDown = unknown,
  Header = unknown,
  Options = S2Options<TooltipContentType, Pagination>,
+ OverrideShowPagination = false,
 > {
  sheetType?: SheetType;
  spreadsheet?: (
@@ -61,12 +78,7 @@ export interface BaseSheetComponentProps<
  loading?: boolean;
  partDrillDown?: PartialDrillDown;
  adaptive?: Adaptive;
- showPagination?:
- | boolean
- | {
- onShowSizeChange?: (pageSize: number) => void;
- onChange?: (current: number) => void;
- };
+ showPagination?: ShowPagination<OverrideShowPagination, Options>;
  themeCfg?: ThemeCfg;
  header?: Header;
  /** @deprecated 1.29.0 已废弃, 请使用 onMounted 代替 */

s2-site/docs/api/components/sheet-component.zh.md

@@ -19,7 +19,7 @@ order: 0
 | options | 透视表属性配置项 | [SheetComponentOptions](#sheetcomponentoptions) | | ✓ |
 | partDrillDown | 维度下钻相关属性 | [PartDrillDown](/docs/api/components/drill-down) | | |
 | adaptive | 是否根据窗口大小自适应 | `boolean | { width?: boolean, height?: boolean, getContainer: () => HTMLElement }` | `false` | |
-| showPagination | 是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效） | `boolean` \| \{ <br>onShowSizeChange?: (pageSize: number) => void,<br>onChange?: (current: number) => void <br>} | `false` | |
+| showPagination | 是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效） | `boolean` \| \{ <br>onShowSizeChange?: (current:number, pageSize: number) => void,<br>onChange?: (current:number, pageSize: number) => void <br>} | `false` | |
 | themeCfg | 自定义透视表主题样式 | [ThemeCfg](/docs/api/general/S2Theme) | | |
 | loading | 控制表格的加载状态 | `boolean` | | |
 | header | 表头配置项 | [HeaderCfgProps](/docs/api/components/header) | | |

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

@@ -33,6 +33,17 @@ onShowSizeChange?: (pageSize: number) => void,\
 onChange?: (current: number) => void\
 } | `false` | |
 
+📢 It should be noted that in the @antv/s2-react version, the type of `showPagination` is:
+
+```ts
+type ShowPagination =
+ | boolean
+ | {
+ onShowSizeChange?: (current: number, pageSize: number) => void,
+ onChange?: (current: number, pageSize: number) => void
+ }
+```
+
 ### React version
 
 > The [Ant Design](https://ant.design/components/pagination-cn/) Pagination paging component is used, which supports [transparent transmission API](https://ant.design/components/pagination-cn/#API) . If you need to modify the style, you can directly override it through CSS.

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

@@ -29,9 +29,20 @@ S2 内置提供了分页能力。本质上是前端分页，点击下一页滚
 ```
 
 | 参数 | 说明 | 类型 | 默认值 | 必选 |
-| -- | -- | -- | -- | --- | --- | --- | --- |
+| -- | -- | -- | -- | --- |
 | showPagination | 是否显示默认分页<br>（只有在 `options` 配置过 `pagination` 属性才会生效） | `boolean` \| \{ <br>onShowSizeChange?: (pageSize: number) => void,<br>onChange?: (current: number) => void <br>} | `false` | |
 
+📢 需要特别注意的是：在 @antv/s2-react 版本中，`showPagination` 的类型是：
+
+```ts
+type ShowPagination =
+ | boolean
+ | {
+ onShowSizeChange?: (current: number, pageSize: number) => void,
+ onChange?: (current: number, pageSize: number) => void
+ }
+```
+
 ### React 版
 
 > 使用的是 [Ant Design](https://ant.design/components/pagination-cn/) Pagination 分页组件，支持 [透传 API](https://ant.design/components/pagination-cn/#API)。需要修改样式直接通过 CSS 覆盖即可。

s2-site/examples/react-component/pagination/demo/table.tsx

@@ -50,11 +50,11 @@ fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
  options={s2Options}
  sheetType="table"
  showPagination={{
- onChange: (current) => {
- console.log(current);
+ onChange: (current, pageSize) => {
+ console.log(current, pageSize);
  },
- onShowSizeChange: (pageSize) => {
- console.log(pageSize);
+ onShowSizeChange: (current, pageSize) => {
+ console.log(current, pageSize);
  },
  }}
  />,