fix(pagination): add event param on onChange (#1791)

Co-authored-by: maxin <maxin@growingio.com>

src/pagination/Pagination.tsx

@@ -110,7 +110,7 @@ const Pagination = WithRef<HTMLDivElement, PaginationProps>((props, ref) => {
         {showSizeChanger && (
           <RowsSelector onRowsChange={(rows) => setPageSize(rows)} aria-label={getAriaLabel('rows')} />
         )}
-        <p aria-label={getAriaLabel('total')} className={`${prefixCls}__total`}>
+        <p aria-label={getAriaLabel('total')} className={`${prefixCls}__total`} data-testid="pagination-item__total">
           {totalTextRender?.(total) ?? textObject.total(total)}
         </p>
         <nav aria-label={getAriaLabel('nav')} className={`${prefixCls}__nav`}>
@@ -135,11 +135,11 @@ const Pagination = WithRef<HTMLDivElement, PaginationProps>((props, ref) => {
         {showQuickJumper && (
           <QuickJumper
             aria-label={getAriaLabel('jumper')}
-            onQuickGo={(page) => {
+            onQuickGo={(page, event) => {
               let arrivedPage = page;
               if (page < 1) arrivedPage = 1;
               if (page > maxPages) arrivedPage = maxPages;
-              goToPage(arrivedPage);
+              goToPage(arrivedPage, event);
             }}
           />
         )}

src/pagination/PaginationItem.tsx

@@ -25,6 +25,8 @@ const PaginationItem: React.FC<PaginationItemProps> = (props) => {
     [PaginationItemType.Last]: <RightDoubleOutlined />,
   };
 
+  const isPage = type === PaginationItemType.Page;
+
   return (
     <IconButton
       disabled={disabled}
@@ -34,12 +36,12 @@ const PaginationItem: React.FC<PaginationItemProps> = (props) => {
       onClick={onClick}
       aria-label={ariaLabel}
       aria-current={ariaCurrent}
+      style={{
+        width: isPage ? 'auto' : undefined,
+      }}
+      data-testid={`pagination-item__${isPage ? page : type}`}
     >
-      {type === PaginationItemType.Page ? (
-        <span className={`${prefixCls}__page__button-text`}>{page}</span>
-      ) : (
-        icon[type]
-      )}
+      {isPage ? <span className={`${prefixCls}__page__button-text`}>{page}</span> : icon[type]}
     </IconButton>
   );
 };

src/pagination/QuickJumper.tsx

@@ -8,22 +8,23 @@ const QuickJumper: React.FC<{
    * 快速跳转的回调（按下回车会触发）
    * @param page 跳转的页码
    */
-  onQuickGo?: (page: number) => void;
+  onQuickGo?: (page: number, event: React.KeyboardEvent<HTMLInputElement>) => void;
 }> = (props) => {
   const { 'aria-label': ariaLabel, onQuickGo } = props;
   const { prefixCls, maxPages, textObject } = useContext(PaginationContext);
 
   return (
-    <div aria-label={ariaLabel} className={`${prefixCls}__jumper`}>
+    <div aria-label={ariaLabel} className={`${prefixCls}__jumper`} data-testid="pagination-item__jumper">
       {textObject.jumpTo(
         <InputNumber
           min={1}
           max={maxPages}
           size="small"
           className={`${prefixCls}__jumper__input`}
-          onKeyDown={({ key, currentTarget }) => {
+          onKeyDown={(event) => {
+            const { key, currentTarget } = event;
             if (key === 'Enter') {
-              onQuickGo?.(Number.parseInt(`${currentTarget.value}`, 10));
+              onQuickGo?.(Number.parseInt(`${currentTarget.value}`, 10), event);
             }
           }}
         />

src/pagination/RowsSelector.tsx

@@ -23,7 +23,7 @@ const RowsSelector: React.FC<{
     }
   }, [pageSize]);
   return (
-    <div aria-label={ariaLabel} className={`${prefixCls}__rows`}>
+    <div aria-label={ariaLabel} className={`${prefixCls}__rows`} data-testid="pagination-item__rows-selector">
       {textObject.rowsPerPage(
         <Select
           defaultValue={defaultPageSize}

src/pagination/hooks/usePagination.ts

@@ -11,7 +11,7 @@ const usePagination = (
   props: Omit<PaginationProps, 'pageSize'> & Required<Pick<PaginationProps, 'pageSize'>>
 ): {
   maxPages: number;
-  goToPage: (value: number) => void;
+  goToPage: (value: number, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement>) => void;
   items: PaginationItemProps[];
 } => {
   const {
@@ -34,12 +34,12 @@ const usePagination = (
     }
   }, [maxPages, currentPage, setCurrentPage]);
 
-  const goToPage = (value: number) => {
+  const goToPage: ReturnType<typeof usePagination>['goToPage'] = (value, event) => {
     if (value) {
       setCurrentPage(value);
     }
     if (isFunction(onChange)) {
-      onChange(value, pageSize);
+      onChange(value, pageSize, event);
     }
   };
 
@@ -99,7 +99,7 @@ const usePagination = (
         type,
         disabled: disabledByStringType,
         page: computePage(type),
-        onClick: () => goToPage(computePage(type)),
+        onClick: (event) => goToPage(computePage(type), event),
       };
     }
 
@@ -108,7 +108,7 @@ const usePagination = (
       page: type,
       'aria-current': type === currentPage,
       active: type === currentPage,
-      onClick: () => goToPage(type),
+      onClick: (event) => goToPage(type, event),
     };
   });
 

src/pagination/interface.ts

@@ -41,8 +41,13 @@ interface PaginationProps {
    * 页码改变的回调
    * @param page 改变后的页码
    * @param pageSize 每页条数
+   * @param event 触发改变的原生事件对象，`React.KeyboardEvent<HTMLInputElement>` 为快速跳转触发的事件对象
    */
-  onChange?: (page: number, pageSize: number) => void;
+  onChange?: (
+    page: number,
+    pageSize: number,
+    event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLInputElement> | null
+  ) => void;
 
   /**
    * 数据总量的自定义渲染函数

src/pagination/style/index.ts

@@ -1,5 +1,5 @@
-import './index.less';
-
 import '../../button/style';
 import '../../input/style';
 import '../../select/style';
+
+import './index.less';

src/table/hook/usePagination.tsx

@@ -39,11 +39,9 @@ const usePagination = <RecordType,>(
 
   useEffect(() => {
     if (controlledCurrent * controlledPageSize > totalMemo) {
-      onChange?.(Math.ceil(totalMemo / controlledPageSize) || 1, controlledPageSize);
+      onChange?.(Math.ceil(totalMemo / controlledPageSize) || 1, controlledPageSize, null);
     }
-    // 不应该检测 onChange 依赖
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlledCurrent, controlledPageSize, totalMemo]);
+  }, [controlledCurrent, controlledPageSize, totalMemo, onChange]);
 
   const paginationData = useMemo(() => {
     if (pagination === false || !controlledPageSize) {
@@ -100,9 +98,9 @@ const usePagination = <RecordType,>(
           setControlledPageSize(currentPageSize);
           onPageSizeChange?.(currentPageSize, previousPageSize);
         }}
-        onChange={(currentPage, currentPageSize) => {
+        onChange={(currentPage, currentPageSize, event) => {
           setControlledCurrent(currentPage);
-          onChange?.(currentPage, currentPageSize);
+          onChange?.(currentPage, currentPageSize, event);
           onPaginationChange?.(currentPage, currentPageSize);
         }}
         {...rest}