@braineet/ui
Version:
Braineet design system
90 lines (83 loc) • 3.09 kB
JavaScript
;
exports.__esModule = true;
exports.default = exports.PageButtons = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable no-continue */
/* eslint-disable no-plusplus */
var PageButtons = exports.PageButtons = function PageButtons(_ref) {
var pages = _ref.pages,
activePage = _ref.activePage,
onChange = _ref.onChange;
var createPage = function createPage(pageIndex) {
var isActivePage = parseInt(activePage, 10) === parseInt(pageIndex, 10);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledPageButton, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledButton, {
color: isActivePage ? 'brand' : 'black',
styleType: isActivePage ? 'solid' : 'ghost',
isActivePage: isActivePage,
onClick: function onClick(event) {
return onChange(event, pageIndex);
},
children: pageIndex.toString()
})
}, "page-" + pageIndex);
};
var createGap = function createGap(pageIndex) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledBreak, {
children: "..."
}, "gap-" + pageIndex);
};
var renderButtons = function renderButtons(totalPages, currentPage) {
var buttons = [];
for (var pageIndex = 1; pageIndex <= totalPages; pageIndex++) {
// Always display the current page
if (pageIndex === currentPage) {
buttons.push(createPage(pageIndex));
continue;
}
// Always display the first and last page
if (pageIndex === 1 || pageIndex === totalPages) {
buttons.push(createPage(pageIndex));
continue;
}
// Display pages used for padding around the current page
if (pageIndex >= currentPage - 2 && pageIndex <= currentPage + 2) {
buttons.push(createPage(pageIndex));
continue;
}
// Handle case where front gap should not be displayed
if (currentPage <= 2 + 3 && pageIndex <= 2 * 2 + 3) {
buttons.push(createPage(pageIndex));
continue;
}
// Handle case where back gap should not be displayed
if (currentPage >= totalPages - 2 - 2 && pageIndex >= totalPages - 2 * 2 - 4) {
buttons.push(createPage(pageIndex));
continue;
}
// Render Gap and determine next starting pageIndex
if (pageIndex < currentPage) {
buttons.push(createGap(pageIndex));
if (currentPage >= totalPages - 2 - 2) {
pageIndex = totalPages - 2 * 2 - 3;
} else {
pageIndex = currentPage - 2 - 1;
}
} else {
buttons.push(createGap(pageIndex));
pageIndex = totalPages - 1;
}
}
return buttons;
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledPageButton, {
children: renderButtons(pages, activePage)
});
};
PageButtons.defaultProps = {
activePage: undefined
};
var _default = exports.default = PageButtons;