fix: fixed Table pagination bug when given pageSize and showSizeChanger #1885 (#1888)

Co-authored-by: shijia.me <[email protected]>
Co-authored-by: pointhalo <[email protected]>

cypress/e2e/table.spec.js

@@ -206,4 +206,17 @@ describe('table', () => {
         cy.get('.semi-table-tbody .semi-table-row').eq(4).should('contain.text', '未知');
         cy.get('.semi-table-tbody .semi-table-row').eq(5).should('contain.text', '未知');
     });
+
+    it('test given pageSize + showSizeChanger', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=table--fixed-pagination&viewMode=story');
+        cy.get('.semi-page-switch').eq(0).click();
+        cy.get('.semi-select-option').eq(0).click();
+        cy.wait(500);
+        cy.get('.semi-page-item').eq(4).click();
+        cy.get('.semi-table-pagination-info').should('contain.text', '显示第 31 条-第 40 条，共 46 条')
+        cy.get('.semi-page-item-active').eq(0).should('contain.text', '4');
+        cy.get('.semi-page-item').eq(5).click();
+        cy.get('.semi-table-pagination-info').should('contain.text', '显示第 41 条-第 46 条，共 46 条')
+        cy.get('.semi-page-item-active').eq(0).should('contain.text', '5');
+    })
 });

packages/semi-foundation/table/foundation.ts

@@ -511,8 +511,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
 
             if (!this._pagerIsControlled()) {
                 const total = get(propPagination, 'total', dataSource.length);
-                const pageSize = get(propPagination, 'pageSize', pagination.pageSize);
-                const { currentPage } = pagination;
+                const { currentPage, pageSize } = pagination;
 
                 const realTotalPage = Math.ceil(total / pageSize);
 

packages/semi-ui/table/_story/table.stories.jsx

@@ -102,7 +102,8 @@ export {
     FixOnChange,
     ColumnResize,
     FixedResizableRowSelection,
-    SorterSortOrder
+    SorterSortOrder,
+    FixedPagination
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

packages/semi-ui/table/_story/v2/FixedPagination/index.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+/**
+ * test with cypress
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+    const [pagination, setPagination] = useState({
+        pageSize: 20,
+        showSizeChanger: true,
+        position: 'top'
+    });
+    const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+    const DAY = 24 * 60 * 60 * 1000;
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi D2C 设计稿',
+                    value: 'Semi D2C 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+            render: text => `${text} KB`,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
+            render: value => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            },
+        },
+    ];
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return (<div>
+        <Table columns={columns} dataSource={dataSource} pagination={pagination} />
+    </div>);
+}

packages/semi-ui/table/_story/v2/index.js

@@ -23,3 +23,4 @@ export { default as FixOnChange } from './FixOnChange';
 export { default as ColumnResize } from './ColumnResize';
 export { default as FixedResizableRowSelection } from './FixedResizableRowSelection';
 export { default as SorterSortOrder } from './SorterSortOrder';
+export { default as FixedPagination } from './FixedPagination';