ant-design/components/pagination/Pagination.tsx
lijianan f6c235462e
chore: Remove locale-provider (#41289)
* chore: rm locale-receiver

* chore: export useLocale in locale

* chore: comment

* chore: rm locale-provider dir

* docs: rm locale-provider in migration document

* chore: fix regexp

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-03-21 13:08:43 +08:00

131 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 { PaginationLocale, PaginationProps as RcPaginationProps } from 'rc-pagination';
import RcPagination 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 { useLocale } from '../locale';
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;
rootClassName?: string;
}
export type PaginationPosition = 'top' | 'bottom' | 'both';
export type PaginationAlign = 'start' | 'center' | 'end';
export interface PaginationConfig extends Omit<PaginationProps, 'rootClassName'> {
position?: PaginationPosition;
align?: PaginationAlign;
}
export type { PaginationLocale };
const Pagination: React.FC<PaginationProps> = ({
prefixCls: customizePrefixCls,
selectPrefixCls: customizeSelectPrefixCls,
className,
rootClassName,
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 };
};
const [contextLocale] = useLocale('Pagination', enUS);
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,
rootClassName,
hashId,
);
return wrapSSR(
<RcPagination
{...getIconsProps()}
{...restProps}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
className={extendedClassName}
selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
locale={locale}
showSizeChanger={mergedShowSizeChanger}
/>,
);
};
if (process.env.NODE_ENV !== 'production') {
Pagination.displayName = 'Pagination';
}
export default Pagination;