@flexis/ui
Version:
Styleless React Components
237 lines (207 loc) • 13.1 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent;
import PropTypes from 'prop-types';
import { omit } from '../../helpers';
import { style, classes } from './Paginator.st.css';
var HALF = 2;
var PENULTIMATE_PAGE = -2;
var visiblePages = 7;
var visiblePagesMid = Math.floor(visiblePages / HALF);
var Paginator =
/** @class */
function () {
var Paginator = /*#__PURE__*/function (_PureComponent) {
_inherits(Paginator, _PureComponent);
function Paginator(props) {
var _this;
_classCallCheck(this, Paginator);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Paginator).call(this, props));
var defaultPage = props.defaultPage;
_this.state = {
page: defaultPage
};
return _this;
}
_createClass(Paginator, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
name = _this$props.name,
disabled = _this$props.disabled,
props = _objectWithoutProperties(_this$props, ["className", "name", "disabled"]);
var page = this.state.page;
return _createElement("nav", _extends({}, omit(props, ['tabIndex', 'type', 'onChange', 'mapPagesLabel', 'defaultPage', 'page', 'total']), {
className: style(classes.root, {
disabled: disabled
}, className),
"aria-disabled": disabled
}), _createElement("ul", {
className: classes.list
}, this.pages()), name && _createElement("input", {
type: "hidden",
name: name,
value: page
}));
}
}, {
key: "pages",
value: function pages() {
var total = this.props.total;
var pages = Array(Math.min(visiblePages, total));
var pagesLength = pages.length;
for (var i = 0; i < pagesLength; i++) {
pages[i] = this.page(i);
}
return pages;
}
}, {
key: "page",
value: function page(visiblePagePlace) {
var _this$props2 = this.props,
tabIndex = _this$props2.tabIndex,
total = _this$props2.total,
disabled = _this$props2.disabled,
mapPagesLabel = _this$props2.mapPagesLabel,
type = _this$props2.type,
name = _this$props2.name;
var page = this.state.page;
var delta = 1;
var doStartDots = false;
var 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;
}
}
var separate = false;
var num = visiblePagePlace + delta;
var text = String(num);
var 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:
}
var pageNum = num - 1;
return _createElement("li", {
key: visiblePagePlace,
className: classes.item
}, separate ? _createElement("span", {
className: classes.separator
}) : _createElement("button", {
className: style(classes.button, {
active: active
}),
type: type,
tabIndex: tabIndex,
onClick: this.onChange(pageNum),
name: name,
value: pageNum,
disabled: disabled,
"aria-current": active ? 'page' : null
}, mapPagesLabel(text)));
}
}, {
key: "onChange",
value: function onChange(page) {
var _this2 = this;
return function (event) {
_this2.triggerNewPage(page, event);
};
}
}, {
key: "triggerNewPage",
value: function triggerNewPage(nextPage, event) {
var _this$props3 = this.props,
pageProp = _this$props3.page,
onChange = _this$props3.onChange,
disabled = _this$props3.disabled;
if (disabled) {
return;
}
var page = this.state.page;
if (nextPage === page) {
return;
}
if (typeof pageProp !== 'number') {
this.setState(function () {
return {
page: nextPage
};
});
}
if (typeof onChange === 'function') {
onChange(nextPage, event);
}
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(_ref, _ref2) {
var page = _ref.page;
var prevPage = _ref2.page;
var nextPage = typeof page === 'number' ? page : prevPage;
if (nextPage === prevPage) {
return null;
}
return {
page: nextPage
};
}
}]);
return Paginator;
}(PureComponent);
process.env.NODE_ENV !== "production" ? 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
} : void 0;
Paginator.defaultProps = {
tabIndex: 0,
type: 'button',
defaultPage: -1,
disabled: false,
mapPagesLabel: function mapPagesLabel(_) {
return _;
}
};
return Paginator;
}();
export default Paginator;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1BhZ2luYXRvci9QYWdpbmF0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxPQUFPLEtBQVAsTUFLTyxPQUxQOzs7QUFNQSxPQUFPLFNBQVAsTUFBc0IsWUFBdEI7QUFDQSxTQUVDLElBRkQsUUFHTyxlQUhQO0FBSUEsU0FDQyxLQURELEVBRUMsT0FGRCxRQUdPLG9CQUhQO0FBMEJBLElBQU0sSUFBSSxHQUFHLENBQWI7QUFDQSxJQUFNLGdCQUFnQixHQUFHLENBQUMsQ0FBMUI7QUFFQSxJQUFNLFlBQVksR0FBRyxDQUFyQjtBQUNBLElBQU0sZUFBZSxHQUFHLElBQUksQ0FBQyxLQUFMLENBQVcsWUFBWSxHQUFHLElBQTFCLENBQXhCOztBQUVBLElBQUEsU0FBQTtBQUFBO0FBQUEsWUFBQTtBQUFBLE1BQXFCLFNBQXJCO0FBQUE7O0FBMkNDLHVCQUFZLEtBQVosRUFBaUI7QUFBQTs7QUFBQTs7QUFFaEIscUZBQU0sS0FBTjtBQUZnQixVQUtmLFdBTGUsR0FNWixLQU5ZLENBS2YsV0FMZTtBQVFoQixZQUFLLEtBQUwsR0FBYTtBQUNaLFFBQUEsSUFBSSxFQUFFO0FBRE0sT0FBYjtBQVJnQjtBQVdoQjs7QUF0REY7QUFBQTtBQUFBLCtCQXdETztBQUFBLDBCQU9ELEtBQUssS0FQSjtBQUFBLFlBR0osU0FISSxlQUdKLFNBSEk7QUFBQSxZQUlKLElBSkksZUFJSixJQUpJO0FBQUEsWUFLSixRQUxJLGVBS0osUUFMSTtBQUFBLFlBTUQsS0FOQzs7QUFBQSxZQVNKLElBVEksR0FVRCxLQUFLLEtBVkosQ0FTSixJQVRJO0FBWUwsZUFDQyxtQ0FDSyxJQUFJLENBQUMsS0FBRCxFQUFRLENBQ2YsVUFEZSxFQUVmLE1BRmUsRUFHZixVQUhlLEVBSWYsZUFKZSxFQUtmLGFBTGUsRUFNZixNQU5lLEVBT2YsT0FQZSxDQUFSLENBRFQ7QUFVQyxVQUFBLFNBQVMsRUFBRSxLQUFLLENBQUMsT0FBTyxD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