petitPapillon
8 years ago
9 changed files with 294 additions and 232 deletions
@ -0,0 +1,45 @@ |
|||
import React, { Component } from 'react'; |
|||
import PaginationRender from './pagination.render'; |
|||
|
|||
export default class TablePaginationRenderer extends Component { |
|||
constructor (props) { |
|||
super(); |
|||
|
|||
this.getSafePage = this.getSafePage.bind(this); |
|||
this.changePage = this.changePage.bind(this); |
|||
this.applyPage = this.applyPage.bind(this); |
|||
|
|||
this.state = { |
|||
page: props.page |
|||
} |
|||
} |
|||
|
|||
componentWillReceiveProps (nextProps) { |
|||
this.setState({ page: nextProps.page }); |
|||
} |
|||
|
|||
getSafePage (page) { |
|||
if (isNaN(page)) { |
|||
page = this.props.page; |
|||
} |
|||
return Math.min(Math.max(page, 0), this.props.pages - 1); |
|||
} |
|||
|
|||
changePage (page) { |
|||
page = this.getSafePage(page); |
|||
this.setState({ page }); |
|||
if (this.props.page !== page) { |
|||
this.props.onPageChange(page); |
|||
} |
|||
} |
|||
|
|||
applyPage (e) { |
|||
e && e.preventDefault(); |
|||
const page = this.state.page; |
|||
this.changePage(page === '' ? this.props.page : page); |
|||
} |
|||
|
|||
render () { |
|||
return PaginationRender.call(this); |
|||
} |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import React from 'react'; |
|||
import classnames from 'classnames'; |
|||
|
|||
const defaultButton = props => |
|||
<button type='button' {...props} className='-btn'> |
|||
{props.children} |
|||
</button> |
|||
|
|||
const PaginationRender = function() { |
|||
const { |
|||
// Computed
|
|||
pages, |
|||
// Props
|
|||
page, |
|||
showPageSizeOptions, |
|||
pageSizeOptions, |
|||
pageSize, |
|||
showPageJump, |
|||
canPrevious, |
|||
canNext, |
|||
onPageSizeChange, |
|||
className, |
|||
PreviousComponent = defaultButton, |
|||
NextComponent = defaultButton, |
|||
} = this.props; |
|||
|
|||
return ( |
|||
<div |
|||
className={classnames(className, '-pagination')} |
|||
style={this.props.paginationStyle} |
|||
> |
|||
<div className='-previous'> |
|||
<PreviousComponent |
|||
onClick={e => { |
|||
if (!canPrevious) return; |
|||
this.changePage(page - 1) |
|||
}} |
|||
disabled={!canPrevious} |
|||
> |
|||
{this.props.previousText} |
|||
</PreviousComponent> |
|||
</div> |
|||
<div className='-center'> |
|||
<span className='-pageInfo'> |
|||
{this.props.pageText}{' '} |
|||
{showPageJump |
|||
? |
|||
<div className='-pageJump'> |
|||
<input |
|||
type={this.state.page === '' ? 'text' : 'number'} |
|||
onChange={e => { |
|||
const val = e.target.value; |
|||
console.error('onchange', val); |
|||
this.changePage(val - 1); |
|||
}} |
|||
value={this.state.page === '' ? '' : this.state.page + 1} |
|||
onBlur={this.applyPage} |
|||
onKeyPress={e => { |
|||
if (e.which === 13 || e.keyCode === 13) { |
|||
this.applyPage(); |
|||
} |
|||
}} |
|||
/> |
|||
</div> |
|||
: |
|||
<span className='-currentPage'> |
|||
{page + 1} |
|||
</span>}{' '} |
|||
{this.props.ofText}{' '} |
|||
<span className='-totalPages'>{pages || 1}</span> |
|||
</span> |
|||
{showPageSizeOptions && |
|||
<span className='select-wrap -pageSizeOptions'> |
|||
<select |
|||
onChange={e => onPageSizeChange(Number(e.target.value))} |
|||
value={pageSize} |
|||
> |
|||
{pageSizeOptions.map((option, i) => { |
|||
return ( |
|||
<option key={i} value={option}> |
|||
{option} {this.props.rowsText} |
|||
</option> |
|||
) |
|||
})} |
|||
</select> |
|||
</span>} |
|||
</div> |
|||
<div className='-next'> |
|||
<NextComponent |
|||
onClick={e => { |
|||
if (!canNext) return; |
|||
this.changePage(page + 1) |
|||
}} |
|||
disabled={!canNext} |
|||
> |
|||
{this.props.nextText} |
|||
</NextComponent> |
|||
</div> |
|||
</div> |
|||
) |
|||
}; |
|||
|
|||
export default PaginationRender; |
|||
Loading…
Reference in new issue