@idares-ui/react
Version:
39 lines • 4.56 kB
JavaScript
import { __assign, __makeTemplateObject, __rest } from "tslib";
import * as React from "react";
import styled from "styled-components";
import { MainContext } from "../utils/context";
var PaginationButton = function (_a) {
var active = _a.active, title = _a.title, value = _a.value, clickInput = _a.clickInput, children = _a.children, htmlProps = __rest(_a, ["active", "title", "value", "clickInput", "children"]);
var _b = React.useContext(MainContext), numberOfPages = _b.numberOfPages, page = _b.page, setPage = _b.setPage;
var _c = React.useState(false), showInput = _c[0], setShowInput = _c[1];
var pageInput = React.useRef(null);
var sanitizeValue = function (val) {
if (isNaN(val))
return page;
if (val < 1)
return 1;
if (val > numberOfPages)
return numberOfPages;
return val;
};
var focusPage = function (pageNumber) {
pageNumber;
};
return (React.createElement(Container, __assign({ className: "page-item".concat(active ? " active" : "") }, htmlProps, { onClick: function () {
(value || value === 0) && setPage(value);
clickInput && setShowInput(true);
} }), showInput ? (React.createElement("input", { className: "page-input", enterKeyHint: "go", autoFocus: true, ref: pageInput, onBlur: function () { return setTimeout(function () { return setShowInput(false); }, 200); }, onKeyPress: function (e) {
var _a;
// Check for Enter key
if (e.key === "Enter") {
var newPage = sanitizeValue(parseInt(((_a = pageInput.current) === null || _a === void 0 ? void 0 : _a.value) || ""));
setPage(newPage);
focusPage(newPage);
setShowInput(false);
}
} })) : (children !== null && children !== void 0 ? children : title)));
};
export default PaginationButton;
var Container = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: transparent;\n border: 0.05em solid var(--color-grey);\n border-radius: 0.35em;\n height: 2.4em;\n width: 2.4em;\n cursor: pointer;\n user-select: none;\n line-height: 0;\n\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition: border-color 0.2s ease-in-out;\n\n &:focus {\n outline: none;\n border: 0.05em solid var(--color-primary);\n\n svg {\n fill: var(--color-primary);\n }\n\n &.active {\n border: 0.05em solid var(--color-grey);\n color: var(--color-white);\n }\n }\n\n &.active {\n font-weight: 700;\n color: var(--color-white);\n background-color: var(--color-primary);\n border: 0.05em solid var(--color-primary);\n transition-duration: 0s;\n }\n\n &:not(.active):hover {\n border-color: var(--color-primary);\n transition: border-color 0s ease-in-out;\n }\n\n .page-input {\n outline: none;\n border: none;\n padding: 0.05em;\n font-size: 0.7em;\n width: 1.5em;\n height: 1.5em;\n color: var(--color-grey);\n background: transparent;\n text-align: center;\n }\n"], ["\n background-color: transparent;\n border: 0.05em solid var(--color-grey);\n border-radius: 0.35em;\n height: 2.4em;\n width: 2.4em;\n cursor: pointer;\n user-select: none;\n line-height: 0;\n\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition: border-color 0.2s ease-in-out;\n\n &:focus {\n outline: none;\n border: 0.05em solid var(--color-primary);\n\n svg {\n fill: var(--color-primary);\n }\n\n &.active {\n border: 0.05em solid var(--color-grey);\n color: var(--color-white);\n }\n }\n\n &.active {\n font-weight: 700;\n color: var(--color-white);\n background-color: var(--color-primary);\n border: 0.05em solid var(--color-primary);\n transition-duration: 0s;\n }\n\n &:not(.active):hover {\n border-color: var(--color-primary);\n transition: border-color 0s ease-in-out;\n }\n\n .page-input {\n outline: none;\n border: none;\n padding: 0.05em;\n font-size: 0.7em;\n width: 1.5em;\n height: 1.5em;\n color: var(--color-grey);\n background: transparent;\n text-align: center;\n }\n"])));
var templateObject_1;
//# sourceMappingURL=PaginationButton.js.map