2019-08-27 13:48:01 +00:00
|
|
|
import React, { Component, Fragment } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { gettext } from '../utils/constants';
|
|
|
|
|
|
|
|
const propTypes = {
|
|
|
|
gotoPreviousPage: PropTypes.func.isRequired,
|
|
|
|
gotoNextPage: PropTypes.func.isRequired,
|
|
|
|
currentPage: PropTypes.number.isRequired,
|
|
|
|
hasNextPage: PropTypes.bool.isRequired,
|
|
|
|
canResetPerPage: PropTypes.bool.isRequired,
|
2019-10-19 03:21:49 +00:00
|
|
|
resetPerPage: PropTypes.func,
|
|
|
|
curPerPage: PropTypes.number,
|
2019-08-27 13:48:01 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
class Paginator extends Component {
|
|
|
|
|
|
|
|
resetPerPage = (perPage) => {
|
|
|
|
this.props.resetPerPage(perPage);
|
|
|
|
}
|
|
|
|
|
|
|
|
goToPrevious = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.gotoPreviousPage();
|
|
|
|
}
|
|
|
|
|
|
|
|
goToNext = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.gotoNextPage();
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2019-10-19 03:21:49 +00:00
|
|
|
let { curPerPage } = this.props;
|
2019-08-27 13:48:01 +00:00
|
|
|
return (
|
|
|
|
<Fragment>
|
|
|
|
<div className="my-6 text-center">
|
|
|
|
{this.props.currentPage != 1 &&
|
|
|
|
<a href="#" onClick={this.goToPrevious}>{gettext('Previous')}</a>
|
|
|
|
}
|
|
|
|
{this.props.hasNextPage &&
|
|
|
|
<a href="#" onClick={this.goToNext} className="ml-4">{gettext('Next')}</a>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
{this.props.canResetPerPage &&
|
2019-10-19 03:21:49 +00:00
|
|
|
<div className="text-center">
|
2019-08-27 13:48:01 +00:00
|
|
|
{gettext('Per page:')}{' '}
|
2019-10-19 03:21:49 +00:00
|
|
|
<span className={`${curPerPage === 25 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(25);}}>25</span>
|
|
|
|
<span className={`${curPerPage === 50 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(50);}}>50</span>
|
|
|
|
<span className={`${curPerPage === 100 ? '' : 'a-simulate '} mr-1`} onClick={() => {return this.resetPerPage(100);}}>100</span>
|
2019-08-27 13:48:01 +00:00
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Paginator.propTypes = propTypes;
|
|
|
|
|
|
|
|
export default Paginator;
|