@idares-ui/react
Version:
33 lines • 2.71 kB
JavaScript
import { __assign, __makeTemplateObject } from "tslib";
import * as React from "react";
import styled from "styled-components";
import { FullMode } from "./components/FullMode";
import SimpleMode from "./components/SimpleMode";
import { MainContext } from "./utils/context";
import { SIMPLE_MODE_THRESHOLD } from "./utils/enum";
import { theme } from "./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 > SIMPLE_MODE_THRESHOLD;
if (numberOfPages <= 1)
return null;
return (React.createElement(MainContext.Provider, { value: { numberOfPages: numberOfPages, page: page, setPage: setPage } },
React.createElement(PaginationWrapper, __assign({ role: "group", "aria-label": "Pagination" }, { baseColor: baseColor, baseSize: baseSize }),
!showFullMode && React.createElement(SimpleMode, null),
showFullMode && React.createElement(FullMode, null))));
};
export default Pagination;
var PaginationWrapper = styled.div(templateObject_1 || (templateObject_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.colors.primary;
}, theme.colors.white, theme.colors.black, theme.colors.grey, function (_a) {
var _b;
var baseSize = _a.baseSize;
return (_b = theme.sizes[baseSize]) !== null && _b !== void 0 ? _b : baseSize;
});
var templateObject_1;
//# sourceMappingURL=index.js.map