refactor: reuse Pagination component in Table and List

Replace custom pagination buttons in Table and List with the shared
Pagination component, removing duplicated UI code and styles.

Author: wangdicoder

components/list/list.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useVirtualScroll } from '../_utils/use-virtual-scroll';
+import Pagination from '../pagination';
 import { ListProps } from './types';
 
 const ITEM_HEIGHT_MAP = { sm: 41, md: 49, lg: 57 } as const;
@@ -128,7 +129,6 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
   const showPagination = pagination && !isVirtual;
   const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;
   const totalItems = paginationConfig?.total ?? dataSource.length;
-  const totalPages = Math.ceil(totalItems / pageSize);
   const activePage = paginationConfig?.current ?? currentPage;
 
   const bodyCls = classNames(`${prefixCls}__body`, {
@@ -150,21 +150,17 @@ const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {
         )}
       </div>
       {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}
-      {showPagination && totalPages > 1 && (
-        <div className={`${prefixCls}__pagination`}>
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-            <button
-              key={page}
-              type="button"
-              className={classNames(`${prefixCls}__page-btn`, {
-                [`${prefixCls}__page-btn_active`]: page === activePage,
-              })}
-              onClick={() => handlePageChange(page)}
-            >
-              {page}
-            </button>
-          ))}
-        </div>
+      {showPagination && (
+        <Pagination
+          current={activePage}
+          total={totalItems}
+          pageSize={pageSize}
+          align={paginationConfig?.align ?? 'right'}
+          size={paginationConfig?.size}
+          disabled={paginationConfig?.disabled}
+          onChange={(page) => handlePageChange(page)}
+          style={{ padding: 16 }}
+        />
       )}
     </div>
   );

components/list/style/_index.scss

@@ -61,37 +61,6 @@
     color: var(--ty-color-text-secondary, #{$gray-500});
   }
 
-  &__pagination {
-    display: flex;
-    justify-content: flex-end;
-    padding: 16px;
-    gap: 4px;
-  }
-
-  &__page-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 6px;
-    border: 1px solid var(--ty-list-border, #{$gray-300});
-    border-radius: $border-radius;
-    background: transparent;
-    cursor: pointer;
-    font-size: $font-size-sm;
-
-    &:hover {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-    }
-
-    &_active {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-      font-weight: 500;
-    }
-  }
 }
 
 .#{$prefix}-list-item {

components/list/types.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseProps, SizeType } from '../_utils/props';
+import { PaginationProps } from '../pagination/types';
 
 export interface ListProps<T = any>
   extends BaseProps,
@@ -26,7 +27,7 @@ export interface ListGridType {
   column?: number;
 }
 
-export interface ListPaginationProps {
+export interface ListPaginationProps extends Pick<PaginationProps, 'size' | 'align' | 'disabled'> {
   current?: number;
   pageSize?: number;
   total?: number;

components/table/style/_index.scss

@@ -140,42 +140,4 @@
     color: var(--ty-color-text-secondary, #{$gray-500});
   }
 
-  // Pagination
-  &__pagination {
-    display: flex;
-    justify-content: flex-end;
-    padding: 16px 0;
-    gap: 4px;
-  }
-
-  &__page-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 6px;
-    border: 1px solid var(--ty-table-border, #{$gray-300});
-    border-radius: $border-radius;
-    background: transparent;
-    cursor: pointer;
-    font-size: $font-size-sm;
-    color: var(--ty-color-text, #{$gray-700});
-
-    &:hover:not(:disabled) {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-    }
-
-    &:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    &_active {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-      font-weight: 500;
-    }
-  }
 }

components/table/table.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { ConfigContext } from '../config-provider/config-context';
 import { getPrefixCls } from '../_utils/general';
 import { useVirtualScroll } from '../_utils/use-virtual-scroll';
+import Pagination from '../pagination';
 import { TableProps, ColumnType, SortOrder } from './types';
 
 const ROW_HEIGHT_MAP = { sm: 40, md: 48, lg: 56 } as const;
@@ -121,7 +122,6 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
 
   const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;
   const totalItems = paginationConfig?.total ?? dataSource.length;
-  const totalPages = Math.ceil(totalItems / pageSize);
   const activePage = paginationConfig?.current ?? currentPage;
 
   const handleSort = (col: ColumnType) => {
@@ -362,37 +362,17 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) => {
           </tbody>
         </table>
       </div>
-      {showPagination && totalPages > 1 && (
-        <div className={`${prefixCls}__pagination`}>
-          <button
-            type="button"
-            className={`${prefixCls}__page-btn`}
-            disabled={activePage <= 1}
-            onClick={() => handlePageChange(activePage - 1)}
-          >
-            ‹
-          </button>
-          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-            <button
-              key={page}
-              type="button"
-              className={classNames(`${prefixCls}__page-btn`, {
-                [`${prefixCls}__page-btn_active`]: page === activePage,
-              })}
-              onClick={() => handlePageChange(page)}
-            >
-              {page}
-            </button>
-          ))}
-          <button
-            type="button"
-            className={`${prefixCls}__page-btn`}
-            disabled={activePage >= totalPages}
-            onClick={() => handlePageChange(activePage + 1)}
-          >
-            ›
-          </button>
-        </div>
+      {showPagination && (
+        <Pagination
+          current={activePage}
+          total={totalItems}
+          pageSize={pageSize}
+          align={paginationConfig?.align ?? 'right'}
+          size={paginationConfig?.size}
+          disabled={paginationConfig?.disabled}
+          onChange={(page) => handlePageChange(page)}
+          style={{ padding: '16px 0' }}
+        />
       )}
     </div>
   );

components/table/types.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { BaseProps, SizeType } from '../_utils/props';
+import { PaginationProps } from '../pagination/types';
 
 export type SortOrder = 'ascend' | 'descend' | null;
 export type ColumnAlign = 'left' | 'center' | 'right';
@@ -24,7 +25,7 @@ export type RowSelection<T = any> = {
   type?: 'checkbox' | 'radio';
 };
 
-export interface TablePaginationConfig {
+export interface TablePaginationConfig extends Pick<PaginationProps, 'size' | 'align' | 'disabled'> {
   current?: number;
   pageSize?: number;
   total?: number;