ant-design/components/pagination/Pagination.tsx

129 lines
4.1 KiB
TypeScript

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<PaginationProps> = ({
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 = <span className={`${prefixCls}-item-ellipsis`}></span>;
let prevIcon = (
<button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
<LeftOutlined />
</button>
);
let nextIcon = (
<button className={`${prefixCls}-item-link`} type="button" tabIndex={-1}>
<RightOutlined />
</button>
);
let jumpPrevIcon = (
<a className={`${prefixCls}-item-link`}>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<DoubleLeftOutlined className={`${prefixCls}-item-link-icon`} />
{ellipsis}
</div>
</a>
);
let jumpNextIcon = (
<a className={`${prefixCls}-item-link`}>
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
<DoubleRightOutlined className={`${prefixCls}-item-link-icon`} />
{ellipsis}
</div>
</a>
);
// change arrows direction in right-to-left direction
if (direction === 'rtl') {
[prevIcon, nextIcon] = [nextIcon, prevIcon];
[jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon];
}
return {
prevIcon,
nextIcon,
jumpPrevIcon,
jumpNextIcon,
};
};
return (
<LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
{contextLocale => {
const locale = { ...contextLocale, ...customLocale };
const isSmall = size === 'small' || !!(xs && !size && responsive);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
const extendedClassName = classNames(
{
[`${prefixCls}-mini`]: isSmall,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
hashId,
);
return wrapSSR(
<RcPagination
{...getIconsProps()}
{...restProps}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
className={extendedClassName}
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
locale={locale}
showSizeChanger={mergedShowSizeChanger}
/>,
);
}}
</LocaleReceiver>
);
};
export default Pagination;