2016-07-07 20:25:03 +08:00
|
|
|
|
import * as 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';
|
|
|
|
|
|
2016-08-15 12:00:05 +08:00
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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',
|
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
|
|
|
|
|
2016-08-15 12:00:05 +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="ant-select"
|
|
|
|
|
{...this.props}
|
|
|
|
|
locale={locale}
|
2016-06-06 13:54:10 +08:00
|
|
|
|
className={className}
|
|
|
|
|
/>
|
2016-03-31 17:46:35 +08:00
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|