@flexis/ui
Version:
Styleless React Components
258 lines (215 loc) • 13.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _helpers = require("../../helpers");
var _PaginatorSt = require("./Paginator.st.css");
var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent;
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) {
(0, _inherits2.default)(Paginator, _PureComponent);
function Paginator(props) {
var _this;
(0, _classCallCheck2.default)(this, Paginator);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Paginator).call(this, props));
var defaultPage = props.defaultPage;
_this.state = {
page: defaultPage
};
return _this;
}
(0, _createClass2.default)(Paginator, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
name = _this$props.name,
disabled = _this$props.disabled,
props = (0, _objectWithoutProperties2.default)(_this$props, ["className", "name", "disabled"]);
var page = this.state.page;
return _createElement("nav", (0, _extends2.default)({}, (0, _helpers.omit)(props, ['tabIndex', 'type', 'onChange', 'mapPagesLabel', 'defaultPage', 'page', 'total']), {
className: (0, _PaginatorSt.style)(_PaginatorSt.classes.root, {
disabled: disabled
}, className),
"aria-disabled": disabled
}), _createElement("ul", {
className: _PaginatorSt.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: _PaginatorSt.classes.item
}, separate ? _createElement("span", {
className: _PaginatorSt.classes.separator
}) : _createElement("button", {
className: (0, _PaginatorSt.style)(_PaginatorSt.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.default.number,
type: _propTypes.default.oneOf(['button', 'submit']),
name: _propTypes.default.string,
onChange: _propTypes.default.func,
defaultPage: _propTypes.default.number,
page: _propTypes.default.number,
total: _propTypes.default.number.isRequired,
disabled: _propTypes.default.bool,
mapPagesLabel: _propTypes.default.func
} : void 0;
Paginator.defaultProps = {
tabIndex: 0,
type: 'button',
defaultPage: -1,
disabled: false,
mapPagesLabel: function mapPagesLabel(_) {
return _;
}
};
return Paginator;
}();
var _default = Paginator;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1BhZ2luYXRvci9QYWdpbmF0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBTUE7O0FBQ0E7O0FBSUE7Ozs7QUEwQkEsSUFBTSxJQUFJLEdBQUcsQ0FBYjtBQUNBLElBQU0sZ0JBQWdCLEdBQUcsQ0FBQyxDQUExQjtBQUVBLElBQU0sWUFBWSxHQUFHLENBQXJCO0FBQ0EsSUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLEtBQUwsQ0FBVyxZQUFZLEdBQUcsSUFBMUIsQ0FBeEI7O0FBRUEsSUFBQSxTQUFBO0FBQUE7QUFBQSxZQUFBO0FBQUEsTUFBcUIsU0FBckI7QUFBQTs7QUEyQ0MsdUJBQVksS0FBWixFQUFpQjtBQUFBOztBQUFBO0FBRWhCLGlIQUFNLEtBQU47QUFGZ0IsVUFLZixXQUxlLEdBTVosS0FOWSxDQUtmLFdBTGU7QUFRaEIsWUFBSyxLQUFMLEdBQWE7QUFDWixRQUFBLElBQUksRUFBRTtBQURNLE9BQWI7QUFSZ0I7QUFXaEI7O0FBdERGO0FBQUE7QUFBQSwrQkF3RE87QUFBQSwwQkFPRCxLQUFLLEtBUEo7QUFBQSxZQUdKLFNBSEksZUFHSixTQUhJO0FBQUEsWUFJSixJQUpJLGVBSUosSUFKSTtBQUFBLFlBS0osUUFMSSxlQUtKLFFBTEk7QUFBQSxZQU1ELEtBTkM7QUFBQSxZQVNKLElBVEksR0FVRCxLQUFLLEtBVkosQ0FTSixJQVRJO0FBWUwsZUFDQyxpREFDSyxtQkFBSyxLQUFMLEVBQVksQ0FDZixVQURlLEVBRWYsTUFGZSxFQUdmLFVBSGUsRUFJZixlQUplLEVBS2YsYUFMZSxFQU1mLE1BTmUsRUFPZixPQVBlLENBQVosQ0FETDtBQVVDLFVBQUEsU0FBUyxFQUFFLHdCQUFNLHFCQUFRLElBQWQsRUFBb0I7QUFDOUIsWUFBQSxRQUFRLEVBQVI7QUFEOEIsV0FBcEIsRUFFUixTQUZRLENBVlo7QUFhQywyQkFBZTtBQWJoQixZQWVD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