import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined'; import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; import RightOutlined from '@ant-design/icons/RightOutlined'; import classNames from 'classnames'; import type { PaginationProps as RcPaginationProps } from 'rc-pagination'; import RcPagination, { PaginationLocale } from 'rc-pagination'; import enUS from 'rc-pagination/lib/locale/en_US'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; import useBreakpoint from '../grid/hooks/useBreakpoint'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import { MiddleSelect, MiniSelect } from './Select'; import useStyle from './style'; export interface PaginationProps extends RcPaginationProps { showQuickJumper?: boolean | { goButton?: React.ReactNode }; size?: 'default' | 'small'; responsive?: boolean; role?: string; totalBoundaryShowSizeChanger?: number; } export type PaginationPosition = 'top' | 'bottom' | 'both'; export interface PaginationConfig extends PaginationProps { position?: PaginationPosition; } export { PaginationLocale }; const Pagination: React.FC = ({ prefixCls: customizePrefixCls, selectPrefixCls: customizeSelectPrefixCls, className, size, locale: customLocale, selectComponentClass, responsive, showSizeChanger, ...restProps }) => { const { xs } = useBreakpoint(responsive); const { getPrefixCls, direction, pagination = {} } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('pagination', customizePrefixCls); // Style const [wrapSSR, hashId] = useStyle(prefixCls); const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger; const getIconsProps = () => { const ellipsis = •••; let prevIcon = ( ); let nextIcon = ( ); let jumpPrevIcon = ( {/* You can use transition effects in the container :) */}
{ellipsis}
); let jumpNextIcon = ( {/* You can use transition effects in the container :) */}
{ellipsis}
); // change arrows direction in right-to-left direction if (direction === 'rtl') { [prevIcon, nextIcon] = [nextIcon, prevIcon]; [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon]; } return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon, }; }; const renderPagination = (contextLocale: PaginationLocale) => { const locale = { ...contextLocale, ...customLocale }; const isSmall = size === 'small' || !!(xs && !size && responsive); const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls); const extendedClassName = classNames( { mini: isSmall, [`${prefixCls}-rtl`]: direction === 'rtl', }, className, hashId, ); return wrapSSR( , ); }; return ( {renderPagination} ); }; export default Pagination;