@flexis/ui
Version:
Styleless React Components
159 lines • 12 kB
JavaScript
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { omit } from '../../helpers';
import { style, classes } from './Paginator.st.css';
const HALF = 2;
const PENULTIMATE_PAGE = -2;
const visiblePages = 7;
const visiblePagesMid = Math.floor(visiblePages / HALF);
let Paginator = /** @class */ (() => {
class Paginator extends PureComponent {
constructor(props) {
super(props);
const { defaultPage } = props;
this.state = {
page: defaultPage
};
}
static getDerivedStateFromProps({ page }, { page: prevPage }) {
const nextPage = typeof page === 'number'
? page
: prevPage;
if (nextPage === prevPage) {
return null;
}
return {
page: nextPage
};
}
render() {
const { className, name, disabled, ...props } = this.props;
const { page } = this.state;
return (<nav {...omit(props, [
'tabIndex',
'type',
'onChange',
'mapPagesLabel',
'defaultPage',
'page',
'total'
])} className={style(classes.root, {
disabled
}, className)} aria-disabled={disabled}>
<ul className={classes.list}>
{this.pages()}
</ul>
{name && (<input type='hidden' name={name} value={page}/>)}
</nav>);
}
pages() {
const { total } = this.props;
const pages = Array(Math.min(visiblePages, total));
const pagesLength = pages.length;
for (let i = 0; i < pagesLength; i++) {
pages[i] = this.page(i);
}
return pages;
}
page(visiblePagePlace) {
const { tabIndex, total, disabled, mapPagesLabel, type, name } = this.props;
const { page } = this.state;
let delta = 1;
let doStartDots = false;
let doEndDots = true;
if (total < visiblePages) {
doEndDots = false;
}
else if (page > visiblePagesMid) {
doStartDots = true;
if (page >= total - visiblePagesMid - 1) {
delta = total - visiblePages + 1;
doEndDots = false;
}
else {
delta = page - visiblePagesMid + 1;
}
}
let separate = false;
let num = visiblePagePlace + delta;
let text = String(num);
const active = num - 1 === page;
switch (visiblePagePlace) {
case 0:
text = '1';
num = 1;
break;
case visiblePages - 1:
text = String(total);
num = total;
break;
case 1:
if (doStartDots) {
separate = true;
}
break;
case visiblePages + PENULTIMATE_PAGE:
if (doEndDots) {
separate = true;
}
break;
default:
}
const pageNum = num - 1;
return (<li key={visiblePagePlace} className={classes.item}>
{separate ? (<span className={classes.separator}/>) : (<button className={style(classes.button, {
active
})} type={type} tabIndex={tabIndex} onClick={this.onChange(pageNum)} name={name} value={pageNum} disabled={disabled} aria-current={active ? 'page' : null}>
{mapPagesLabel(text)}
</button>)}
</li>);
}
onChange(page) {
return (event) => {
this.triggerNewPage(page, event);
};
}
triggerNewPage(nextPage, event) {
const { page: pageProp, onChange, disabled } = this.props;
if (disabled) {
return;
}
const { page } = this.state;
if (nextPage === page) {
return;
}
if (typeof pageProp !== 'number') {
this.setState(() => ({
page: nextPage
}));
}
if (typeof onChange === 'function') {
onChange(nextPage, event);
}
}
}
Paginator.propTypes = {
tabIndex: PropTypes.number,
type: PropTypes.oneOf([
'button',
'submit'
]),
name: PropTypes.string,
onChange: PropTypes.func,
defaultPage: PropTypes.number,
page: PropTypes.number,
total: PropTypes.number.isRequired,
disabled: PropTypes.bool,
mapPagesLabel: PropTypes.func
};
Paginator.defaultProps = {
tabIndex: 0,
type: 'button',
defaultPage: -1,
disabled: false,
mapPagesLabel: _ => _
};
return Paginator;
})();
export default Paginator;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdG9yLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1BhZ2luYXRvci9QYWdpbmF0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxFQUFFLEVBSWIsYUFBYSxFQUNiLE1BQU0sT0FBTyxDQUFDO0FBQ2YsT0FBTyxTQUFTLE1BQU0sWUFBWSxDQUFDO0FBQ25DLE9BQU8sRUFFTixJQUFJLEVBQ0osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNOLEtBQUssRUFDTCxPQUFPLEVBQ1AsTUFBTSxvQkFBb0IsQ0FBQztBQXVCNUIsTUFBTSxJQUFJLEdBQUcsQ0FBQyxDQUFDO0FBQ2YsTUFBTSxnQkFBZ0IsR0FBRyxDQUFDLENBQUMsQ0FBQztBQUU1QixNQUFNLFlBQVksR0FBRyxDQUFDLENBQUM7QUFDdkIsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDLENBQUM7QUFFeEQ7SUFBQSxNQUFxQixTQUFVLFNBQVEsYUFBNkI7UUEyQ25FLFlBQVksS0FBSztZQUVoQixLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7WUFFYixNQUFNLEVBQ0wsV0FBVyxFQUNYLEdBQUcsS0FBSyxDQUFDO1lBRVYsSUFBSSxDQUFDLEtBQUssR0FBRztnQkFDWixJQUFJLEVBQUUsV0FBVzthQUNqQixDQUFDO1FBQ0gsQ0FBQztRQTdCRCxNQUFNLENBQUMsd0JBQXdCLENBQzlCLEVBQUUsSUFBSSxFQUFVLEVBQ2hCLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBVTtZQUcxQixNQUFNLFFBQVEsR0FBRyxPQUFPLElBQUksS0FBSyxRQUFRO2dCQUN4QyxDQUFDLENBQUMsSUFBSTtnQkFDTixDQUFDLENBQUMsUUFBUSxDQUFDO1lBRVosSUFBSSxRQUFRLEtBQUssUUFBUSxFQUFFO2dCQUMxQixPQUFPLElBQUksQ0FBQzthQUNaO1lBRUQsT0FBTztnQkFD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