ant-design/components/pagination/Pagination.tsx

124 lines
3.7 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2016-03-31 17:46:35 +08:00
import RcPagination from 'rc-pagination';
import enUS from 'rc-pagination/lib/locale/en_US';
import classNames from 'classnames';
2016-03-31 17:46:35 +08:00
import MiniSelect from './MiniSelect';
2018-08-21 17:13:12 +08:00
import Icon from '../icon';
import Select from '../select';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2016-03-31 17:46:35 +08:00
export interface PaginationProps {
2017-11-21 13:48:37 +08:00
total?: number;
defaultCurrent?: number;
current?: number;
defaultPageSize?: number;
pageSize?: number;
2017-11-21 13:48:37 +08:00
onChange?: (page: number, pageSize?: number) => void;
hideOnSinglePage?: boolean;
showSizeChanger?: boolean;
pageSizeOptions?: string[];
onShowSizeChange?: (current: number, size: number) => void;
showQuickJumper?: boolean;
2017-08-02 13:03:42 +08:00
showTotal?: (total: number, range: [number, number]) => React.ReactNode;
size?: string;
simple?: boolean;
style?: React.CSSProperties;
locale?: Object;
className?: string;
prefixCls?: string;
selectPrefixCls?: string;
2018-12-07 20:02:01 +08:00
itemRender?: (
page: number,
type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
originalElement: HTMLElement,
) => React.ReactNode;
role?: string;
}
export interface PaginationConfig extends PaginationProps {
position?: 'top' | 'bottom' | 'both';
}
export type PaginationLocale = any;
export default class Pagination extends React.Component<PaginationProps, {}> {
getIconsProps = (prefixCls: string) => {
2018-08-21 17:13:12 +08:00
const prevIcon = (
<a className={`${prefixCls}-item-link`}>
2018-08-22 20:01:00 +08:00
<Icon type="left" />
2018-08-21 17:13:12 +08:00
</a>
);
const nextIcon = (
<a className={`${prefixCls}-item-link`}>
2018-08-22 20:01:00 +08:00
<Icon type="right" />
2018-08-21 17:13:12 +08:00
</a>
);
const jumpPrevIcon = (
<a className={`${prefixCls}-item-link`}>
2018-08-22 20:01:00 +08:00
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
2018-12-07 20:02:01 +08:00
<Icon className={`${prefixCls}-item-link-icon`} type="double-left" />
2018-08-22 20:01:00 +08:00
<span className={`${prefixCls}-item-ellipsis`}></span>
</div>
2018-08-21 17:13:12 +08:00
</a>
);
const jumpNextIcon = (
<a className={`${prefixCls}-item-link`}>
2018-08-22 20:01:00 +08:00
{/* You can use transition effects in the container :) */}
<div className={`${prefixCls}-item-container`}>
2018-12-07 20:02:01 +08:00
<Icon className={`${prefixCls}-item-link-icon`} type="double-right" />
2018-08-22 20:01:00 +08:00
<span className={`${prefixCls}-item-ellipsis`}></span>
</div>
2018-08-21 17:13:12 +08:00
</a>
);
return {
prevIcon,
nextIcon,
jumpPrevIcon,
jumpNextIcon,
};
2018-12-07 20:02:01 +08:00
};
2018-08-21 17:13:12 +08:00
renderPagination = (contextLocale: PaginationLocale) => {
const {
2018-12-07 20:02:01 +08:00
prefixCls: customizePrefixCls,
selectPrefixCls: customizeSelectPrefixCls,
className,
size,
locale: customLocale,
...restProps
} = this.props;
const locale = { ...contextLocale, ...customLocale };
const isSmall = size === 'small';
2016-03-31 17:46:35 +08:00
return (
<ConfigConsumer>
{({ getPrefixCls }: ConfigConsumerProps) => {
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
return (
<RcPagination
{...restProps}
prefixCls={prefixCls}
selectPrefixCls={selectPrefixCls}
{...this.getIconsProps(prefixCls)}
className={classNames(className, { mini: isSmall })}
selectComponentClass={isSmall ? MiniSelect : Select}
locale={locale}
/>
);
}}
</ConfigConsumer>
2016-03-31 17:46:35 +08:00
);
2018-12-07 20:02:01 +08:00
};
render() {
return (
2018-12-07 20:02:01 +08:00
<LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
{this.renderPagination}
</LocaleReceiver>
);
}
}