ant-design/components/pagination/Pagination.tsx

64 lines
1.8 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';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
2016-03-31 17:46:35 +08:00
import Select from '../select';
import MiniSelect from './MiniSelect';
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;
2017-07-06 19:17:36 +08:00
itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next') => React.ReactNode;
}
export type PaginationLocale = any;
export default class Pagination extends React.Component<PaginationProps, {}> {
2016-03-31 17:46:35 +08:00
static defaultProps = {
prefixCls: 'ant-pagination',
selectPrefixCls: 'ant-select',
2016-07-13 11:14:24 +08:00
};
2016-03-31 17:46:35 +08:00
renderPagination = (locale: PaginationLocale) => {
const { className, size, ...restProps } = this.props;
const isSmall = size === 'small';
2016-03-31 17:46:35 +08:00
return (
<RcPagination
{...restProps}
className={classNames(className, { mini: isSmall })}
selectComponentClass={isSmall ? MiniSelect : Select}
2016-03-31 17:46:35 +08:00
locale={locale}
/>
2016-03-31 17:46:35 +08:00
);
}
render() {
return (
<LocaleReceiver
componentName="Pagination"
defaultLocale={enUS}
>
{this.renderPagination}
</LocaleReceiver>
);
}
}