diff --git a/packages/icon/src/icons/previous.tsx b/packages/icon/src/icons/previous.tsx index 2744c5f04..9b908e6a5 100644 --- 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 index eaf7ca629..ec34e9934 100644 --- 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 index 3dc71d877..621fe8da3 100644 --- a/packages/pagination/src/pagination.tsx +++ b/packages/pagination/src/pagination.tsx @@ -45,6 +45,7 @@ export const Pagination = forwardRef( current, defaultCurrent, pageSize, + pageSizeOptions, defaultPageSize, total = 0, itemRender, @@ -82,7 +83,7 @@ export const Pagination = forwardRef( 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( 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( 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 && (