Merge pull request #808 from illacloud/feat/update-pagination

Feat/update pagination
illacloud · Nov 20, 2023 · fa3f5b3 · fa3f5b3
2 parents 09f80fa + 174710e
commit fa3f5b3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 37 deletions.
diff --git a/packages/icon/src/icons/previous.tsx b/packages/icon/src/icons/previous.tsx
@@ -8,7 +8,7 @@ export const PreviousIcon = createIcon({
       fillRule="evenodd"
       clipRule="evenodd"
       d="M10.2996 11.7603C10.5814 11.4568 10.5639 10.9823 10.2603 10.7004L7.35221 8L10.2603 5.29959C10.5639 5.01774 10.5814 4.54319 10.2996 4.23966C10.0177 3.93612 9.54319 3.91855 9.23966 4.2004L5.73966 7.4504C5.58684 7.59231 5.5 7.79144 5.5 8C5.5 8.20855 5.58684 8.40768 5.73966 8.54959L9.23966 11.7996C9.54319 12.0814 10.0177 12.0639 10.2996 11.7603Z"
-      fill="black"
+      fill="currentColor"
     />
   ),
 })

diff --git a/packages/pagination/src/interface.ts b/packages/pagination/src/interface.ts
@@ -1,6 +1,5 @@
 import { HTMLAttributes, ReactNode } from "react"
 import { BoxProps } from "@illa-design/theme"
-import { SelectProps } from "@illa-design/select"
 
 export type PaginationSize = "small" | "medium" | "large"
 export type PaginationItemType = "page" | "more" | "prev" | "next"
@@ -20,6 +19,7 @@ export interface PaginationProps
   current?: number
   defaultCurrent?: number
   pageSize?: number
+  pageSizeOptions?: string[] | number[]
   defaultPageSize?: number
   total?: number
   itemRender?: (

diff --git a/packages/pagination/src/pagination.tsx b/packages/pagination/src/pagination.tsx
@@ -45,6 +45,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       current,
       defaultCurrent,
       pageSize,
+      pageSizeOptions,
       defaultPageSize,
       total = 0,
       itemRender,
@@ -82,7 +83,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     const totalPageSize = Math.ceil(total / finalPageSize)
 
     const changeCurrent = useCallback(
-      (toCurrent: number): number => {
+      (toCurrent: number, pageSize?: number): number => {
         let toC = toCurrent
         if (toCurrent < 1) {
           toC = 1
@@ -95,7 +96,7 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
         if (current === undefined) {
           setFinalCurrent(toC)
         }
-        onChange?.(toC, finalPageSize)
+        onChange?.(toC, pageSize ?? finalPageSize)
         return toC
       },
       [current, finalPageSize, onChange, setFinalCurrent, total, totalPageSize],
@@ -398,39 +399,49 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       totalPageSize,
     ])
 
+    const finalPageSizeOptions = useMemo(() => {
+      if (!pageSizeOptions || pageSizeOptions.length === 0) {
+        return [
+          {
+            label: `10/${locale.page}`,
+            value: "10",
+          },
+          {
+            label: `20/${locale.page}`,
+            value: "20",
+          },
+          {
+            label: `30/${locale.page}`,
+            value: "30",
+          },
+          {
+            label: `40/${locale.page}`,
+            value: "40",
+          },
+          {
+            label: `50/${locale.page}`,
+            value: "50",
+          },
+        ]
+      } else {
+        return pageSizeOptions.map((v) => {
+          return {
+            label: `${v}/${locale.page}`,
+            value: v.toString(),
+          }
+        })
+      }
+    }, [locale.page, pageSizeOptions])
+
     const pageSizeComponent = useMemo(() => {
       return (
         <>
-          {sizeCanChange && (
+          {!!sizeCanChange && (
             <Select
-              options={[
-                {
-                  label: `10/${locale.page}`,
-                  value: "10",
-                },
-                {
-                  label: `20/${locale.page}`,
-                  value: "20",
-                },
-                {
-                  label: `30/${locale.page}`,
-                  value: "30",
-                },
-                {
-                  label: `40/${locale.page}`,
-                  value: "40",
-                },
-                {
-                  label: `50/${locale.page}`,
-                  value: "50",
-                },
-              ]}
+              options={finalPageSizeOptions}
               disabled={disabled}
               ml="8px"
-              defaultValue={{
-                label: finalPageSize + "/" + locale.page,
-                value: finalPageSize.toString(),
-              }}
+              defaultValue={finalPageSizeOptions[0].value.toString()}
               colorScheme={inputBorderColorScheme}
               onChange={(value) => {
                 if (value !== null) {
@@ -441,10 +452,8 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
                       : 0
                     : Math.ceil((finalCurrent * finalPageSize) / v)
                   onPageSizeChange?.(v, newCurrent)
-                  changeCurrent(newCurrent)
-                  if (pageSize === undefined) {
-                    setFinalPageSize(v)
-                  }
+                  changeCurrent(newCurrent, v)
+                  setFinalPageSize(v)
                 }
               }}
             />
@@ -456,10 +465,9 @@ export const Pagination = forwardRef<HTMLDivElement, PaginationProps>(
       disabled,
       finalCurrent,
       finalPageSize,
+      finalPageSizeOptions,
       inputBorderColorScheme,
-      locale.page,
       onPageSizeChange,
-      pageSize,
       pageSizeChangeResetCurrent,
       setFinalPageSize,
       sizeCanChange,