Pagination 调整, 去掉 pageNum changePageNum 属性

This commit is contained in:
liaoxuezhi 2019-05-13 13:08:24 +08:00
parent 0645874cac
commit c28aad6bc2
2 changed files with 30 additions and 34 deletions

View File

@ -1015,9 +1015,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
items: lastPage,
hasNext: store.hasNext,
mode: store.mode,
onPageChange: this.handleChangePage,
pageNum: store.pageNum,
changePageNum: store.changePageNum,
onPageChange: this.handleChangePage
}
)}
</div>

View File

@ -1,31 +1,23 @@
import * as React from 'react';
import {Renderer, RendererProps} from '../factory';
import { autobind } from '../utils/helper';
export interface PaginationProps extends RendererProps {
activePage?: number;
items?: number;
maxButtons?: number;
hasNext?: boolean;
mode?: string;
onPageChange: (page: number, perPage?: number) => void;
pageNum?: number;
changePageNum: (value: number) => void;
showPageInput: boolean;
}
export interface DefaultProps {
activePage: number;
items: number;
maxButtons: number;
mode: string;
hasNext: boolean;
mode: string;
onPageChange: (page: number, perPage?: number) => void;
showPageInput: boolean;
}
type PropsWithDefault = PaginationProps & DefaultProps;
export interface PaginationState {
pageNum: string;
};
export default class Pagination extends React.PureComponent<PaginationProps, any> {
static defaultProps: DefaultProps = {
export default class Pagination extends React.Component<PaginationProps, PaginationState> {
static defaultProps = {
activePage: 1,
items: 1,
maxButtons: 5,
@ -34,13 +26,20 @@ export default class Pagination extends React.PureComponent<PaginationProps, any
showPageInput: true,
};
constructor(props: PaginationProps) {
super(props);
this.handlePageChange = this.handlePageChange.bind(this);
state = {
pageNum: String(this.props.activePage) || ''
};
componentWillReceiveProps(nextProps:PaginationProps) {
if (this.props.activePage !== nextProps.activePage) {
this.setState({
pageNum: String(nextProps.activePage) || ''
})
}
}
renderSimple() {
const {activePage, hasNext, onPageChange, classnames: cx} = this.props as PropsWithDefault;
const {activePage, hasNext, onPageChange, classnames: cx} = this.props;
return (
<ul className={cx('Pagination', 'Pagination--sm')}>
@ -68,22 +67,21 @@ export default class Pagination extends React.PureComponent<PaginationProps, any
);
}
@autobind
handlePageChange(e: React.ChangeEvent<any>) {
const {changePageNum, items} = this.props;
const {items} = this.props;
let value = e.currentTarget.value;
if (((typeof value === 'number' || /^\d+$/.test(value)) && value > 0) || value === '') {
if (value !== '') {
value = parseInt(value, 10);
value = (value > (items as number) ? items : value) as number;
}
changePageNum(value);
if (/^\d+$/.test(value) && parseInt(value, 10) > items) {
value = String(items);
}
this.setState({pageNum: value});
}
renderNormal() {
let {activePage, items, maxButtons, onPageChange, pageNum, classnames: cx, showPageInput} = this
.props as PropsWithDefault;
let {activePage, items, maxButtons, onPageChange, classnames: cx, showPageInput} = this.props;
const pageNum = this.state.pageNum;
let pageButtons: any = [];
let startPage: number;
@ -195,7 +193,7 @@ export default class Pagination extends React.PureComponent<PaginationProps, any
return (
<div>
<ul className={cx('Pagination', 'Pagination--sm')} onSelect={(value: number) => onPageChange(value)}>
<ul className={cx('Pagination', 'Pagination--sm')}>
{pageButtons}
</ul>
@ -214,7 +212,7 @@ export default class Pagination extends React.PureComponent<PaginationProps, any
/>
<span>
<button
onClick={() => onPageChange(pageNum as number)}
onClick={() => onPageChange(parseInt(pageNum, 10))}
type="submit"
className={cx('Button', 'Button--default')}
>