fix(table): fix table pagination onPageSizeChange error (#1614)

growingio · Dec 4, 2021 · d9a3b51 · d9a3b51 · vercel · Dec 4, 2021
1 parent 84f8e08
commit d9a3b51
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 29 deletions.
diff --git a/src/list-picker/Trigger.tsx b/src/list-picker/Trigger.tsx
@@ -44,7 +44,7 @@ const Trigger: React.ForwardRefRenderFunction<HTMLInputElement, TriggerProps> =
       prefix={prefix}
       suffix={suffix}
       placeholder={placeholder}
-      value={title ?? getLabelByValue?.(value as string)}
+      value={title ?? getLabelByValue?.(value as React.ReactText)}
       onClear={handleClear}
       {...rest}
     />

diff --git a/src/list/hooks/useCacheOptions.ts b/src/list/hooks/useCacheOptions.ts
@@ -1,4 +1,4 @@
-import { isArray, isEmpty, isNil, isNumber } from 'lodash';
+import { isArray, isEmpty, isNil, isString } from 'lodash';
 import { useCallback, useRef } from 'react';
 import { MaybeArray, OptionProps } from '../interfance';
 
@@ -34,10 +34,10 @@ const useCacheOptions = () => {
       : getOptionByValue(optValue);
 
   const getLabelByValue = (val?: MaybeArray<string | number>, separator = '') => {
-    if (val === '' || typeof val === 'undefined' || isNumber(val)) {
+    if (val === '' || typeof val === 'undefined') {
       return '';
     }
-    if (val?.includes('.')) {
+    if (isString(val) && val?.includes('.')) {
       return (val as any)
         ?.split('.')
         ?.reduce((prev: string[], curr: string | number) => [...prev, getOptionByValue?.(curr)?.label], [])
@@ -49,10 +49,10 @@ const useCacheOptions = () => {
     return getOptionByValue(val)?.label ?? '';
   };
   const getOptionTreeByValue = (val?: string | number) => {
-    if (val === '' || typeof val === 'undefined' || isNumber(val)) {
+    if (val === '' || typeof val === 'undefined') {
       return '';
     }
-    if (val?.includes('.')) {
+    if (isString(val) && val?.includes('.')) {
       return (val as any)?.split('.')?.reduceRight((prev: { key: string; value: string }, curr: string) => {
         if (isEmpty(prev)) {
           return { ...getOptionByValue?.(curr) };

diff --git a/src/pagination/RowsSelector.tsx b/src/pagination/RowsSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Select from '../select';
 import { PaginationContext } from './Pagination';
 
@@ -16,28 +16,32 @@ const RowsSelector: React.FC<{
   const { defaultPageSize, onPageSizeChange, pageSize, pageSizeOptions, prefixCls, textObject } =
     useContext(PaginationContext);
 
-  const previousPageSizeRef = useRef<number>(pageSize || defaultPageSize);
-
+  const [previousPageSize, setPreviousPageSize] = useState<number>(pageSize || defaultPageSize);
+  useEffect(() => {
+    if (pageSize) {
+      setPreviousPageSize(pageSize);
+    }
+  }, [pageSize]);
   return (
     <div aria-label={ariaLabel} className={`${prefixCls}__rows`}>
       {textObject.rowsPerPage(
         <Select
-          defaultValue={defaultPageSize?.toString()}
-          value={pageSize?.toString()}
+          defaultValue={defaultPageSize}
+          value={pageSize}
           size="small"
           getContainer={(node) => node?.parentElement || document.body}
           options={pageSizeOptions.map((rowSize) => {
-            const value = Number.parseInt(`${rowSize}`, 10)?.toString();
+            const value = Number.parseInt(`${rowSize}`, 10);
             return {
-              label: value,
+              label: rowSize?.toString(),
               value,
             };
           })}
-          onChange={(value) => {
-            const currentPageSize = Number.parseInt(`${value}`, 10);
+          onChange={(value: number) => {
+            const currentPageSize = value;
             onRowsChange?.(currentPageSize);
-            onPageSizeChange?.(currentPageSize, previousPageSizeRef.current);
-            previousPageSizeRef.current = currentPageSize;
+            onPageSizeChange?.(currentPageSize, previousPageSize);
+            setPreviousPageSize(currentPageSize);
           }}
           allowClear={false}
           style={{

diff --git a/src/select/interface.ts b/src/select/interface.ts
@@ -9,7 +9,7 @@ export interface SelectProps extends Omit<ListProps, 'isMultiple' | 'onChange' |
    */
   options?: OptionProps[];
   size?: 'small' | 'normal';
-  defaultValue?: string;
+  defaultValue?: string | number;
   value?: string | number;
   onChange?: (val?: string | number, options?: OptionProps) => void;
   overlayClassName?: string;

diff --git a/src/table/hook/usePagination.tsx b/src/table/hook/usePagination.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
-import { isFunction, isUndefined } from 'lodash';
+import { isUndefined } from 'lodash';
 import Pagination, { PaginationProps } from '../../pagination';
 import { ColumnType, ColumnsType, PaginationState } from '../interface';
 import useControlledState from '../../utils/hooks/useControlledState';
@@ -95,19 +95,13 @@ const usePagination = <RecordType,>(
         current={controlledCurrent}
         pageSize={controlledPageSize}
         onPageSizeChange={(currentPageSize, previousPageSize) => {
-          setControlledPageSize(previousPageSize);
-          if (isFunction(onPageSizeChange)) {
-            onPageSizeChange(currentPageSize, previousPageSize);
-          }
+          setControlledPageSize(currentPageSize);
+          onPageSizeChange?.(currentPageSize, previousPageSize);
         }}
         onChange={(currentPage, currentPageSize) => {
           setControlledCurrent(currentPage);
-          if (isFunction(onChange)) {
-            onChange(currentPage, currentPageSize);
-          }
-          if (isFunction(onPaginationChange)) {
-            onPaginationChange(currentPage, currentPageSize);
-          }
+          onChange?.(currentPage, currentPageSize);
+          onPaginationChange?.(currentPage, currentPageSize);
         }}
         {...rest}
       />