@idares-ui/react
Version:
35 lines • 2.93 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
var FullMode_1 = require("./components/FullMode");
var SimpleMode_1 = tslib_1.__importDefault(require("./components/SimpleMode"));
var context_1 = require("./utils/context");
var enum_1 = require("./utils/enum");
var theme_1 = require("./utils/theme");
/**
* Pagination
*/
var Pagination = function (_a) {
var _b = _a.page, page = _b === void 0 ? 1 : _b, _c = _a.perPage, perPage = _c === void 0 ? 10 : _c, _d = _a.count, count = _d === void 0 ? 60 : _d, _e = _a.setPage, setPage = _e === void 0 ? function () { } : _e, _f = _a.baseSize, baseSize = _f === void 0 ? "xl" : _f, baseColor = _a.baseColor;
var numberOfPages = Math.ceil(count / perPage);
var showFullMode = numberOfPages > enum_1.SIMPLE_MODE_THRESHOLD;
if (numberOfPages <= 1)
return null;
return (React.createElement(context_1.MainContext.Provider, { value: { numberOfPages: numberOfPages, page: page, setPage: setPage } },
React.createElement(PaginationWrapper, tslib_1.__assign({ role: "group", "aria-label": "Pagination" }, { baseColor: baseColor, baseSize: baseSize }),
!showFullMode && React.createElement(SimpleMode_1["default"], null),
showFullMode && React.createElement(FullMode_1.FullMode, null))));
};
exports["default"] = Pagination;
var PaginationWrapper = styled_components_1["default"].div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n --color-primary: ", ";\n --color-white: ", ";\n --color-black: ", ";\n --color-grey: ", ";\n\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n font-size: ", ";\n font-weight: 300;\n column-gap: 1em;\n\n .arrow {\n fill: var(--color-grey);\n transition: fill 0.2s ease-in-out;\n\n &.left {\n transform: rotateZ(90deg);\n }\n &.right {\n transform: rotateZ(-90deg);\n }\n }\n"], ["\n --color-primary: ", ";\n --color-white: ", ";\n --color-black: ", ";\n --color-grey: ", ";\n\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n font-size: ", ";\n font-weight: 300;\n column-gap: 1em;\n\n .arrow {\n fill: var(--color-grey);\n transition: fill 0.2s ease-in-out;\n\n &.left {\n transform: rotateZ(90deg);\n }\n &.right {\n transform: rotateZ(-90deg);\n }\n }\n"])), function (_a) {
var baseColor = _a.baseColor;
return baseColor !== null && baseColor !== void 0 ? baseColor : theme_1.theme.colors.primary;
}, theme_1.theme.colors.white, theme_1.theme.colors.black, theme_1.theme.colors.grey, function (_a) {
var _b;
var baseSize = _a.baseSize;
return (_b = theme_1.theme.sizes[baseSize]) !== null && _b !== void 0 ? _b : baseSize;
});
var templateObject_1;
//# sourceMappingURL=index.js.map