ant-design/components/pagination/Pagination.tsx

88 lines
2.2 KiB
TypeScript
Raw Normal View History

2016-09-21 11:54:53 +08:00
import React from 'react';
2016-03-31 17:46:35 +08:00
import RcPagination from 'rc-pagination';
import Select from '../select';
import MiniSelect from './MiniSelect';
import zhCN from './locale/zh_CN';
export interface PaginationProps {
/** 当前页数*/
current?: number;
/** 默认的当前页数*/
defaultCurrent?: number;
/** 数据总数*/
total: number;
/** 初始的每页条数*/
defaultPageSize?: number;
/** 每页条数*/
pageSize?: number;
/** 页码改变的回调,参数是改变后的页码*/
onChange?: (page: number) => void;
/** 是否可以改变 pageSize */
showSizeChanger?: boolean;
/** 指定每页可以显示多少条*/
pageSizeOptions?: Array<string>;
/** pageSize 变化的回调 */
onShowSizeChange?: (current: number, size: number) => void;
/** 是否可以快速跳转至某页*/
showQuickJumper?: boolean;
/** 当为「small」时是小尺寸分页 */
size?: string;
/** 当添加该属性时,显示为简单分页*/
simple?: Object;
/** 用于显示总共有多少条数据*/
showTotal?: (total: number) => React.ReactNode;
style?: React.CSSProperties;
className?: string;
locale?: Object;
prefixCls?: string;
selectPrefixCls?: string;
}
export interface PaginationContext {
antLocale?: {
Pagination?: any,
};
}
export default class Pagination extends React.Component<PaginationProps, any> {
2016-03-31 17:46:35 +08:00
static defaultProps = {
locale: zhCN,
className: '',
prefixCls: 'ant-pagination',
selectPrefixCls: 'ant-select',
2016-07-13 11:14:24 +08:00
};
2016-03-31 17:46:35 +08:00
static contextTypes = {
antLocale: React.PropTypes.object,
2016-07-13 11:14:24 +08:00
};
2016-03-31 17:46:35 +08:00
context: PaginationContext;
2016-03-31 17:46:35 +08:00
render() {
let className = this.props.className;
2016-08-24 16:09:55 +08:00
let selectComponentClass = Select as React.ReactNode;
2016-03-31 17:46:35 +08:00
let locale;
if (this.context.antLocale && this.context.antLocale.Pagination) {
locale = this.context.antLocale.Pagination;
} else {
locale = this.props.locale;
}
if (this.props.size === 'small') {
className += ' mini';
selectComponentClass = MiniSelect;
}
return (
<RcPagination
selectComponentClass={selectComponentClass}
selectPrefixCls={this.props.selectPrefixCls}
2016-03-31 17:46:35 +08:00
{...this.props}
locale={locale}
className={className}
/>
2016-03-31 17:46:35 +08:00
);
}
}