@smitch/fluid/lib/pagination/Pagination.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { roundUp } from "@smitch/js-lib";
import { HiChevronRight, HiChevronLeft, HiChevronDoubleRight, HiChevronDoubleLeft, } from "react-icons/hi";
import { ButtonGroup, Select, Button } from "..";
var sizes = {
    md: "text-base",
    lg: "text-lg",
    xl: "text-xl",
};
var Pagination = function (_a) {
    var _b = _a.page, page = _b === void 0 ? "1" : _b, _c = _a.feedback, feedback = _c === void 0 ? true : _c, _d = _a.feedbackLabel, feedbackLabel = _d === void 0 ? "Page" : _d, _e = _a.feedbackSeparator, feedbackSeparator = _e === void 0 ? "of" : _e, _f = _a.firstPageLabel, firstPageLabel = _f === void 0 ? "First Page" : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? "Last Page" : _g, _h = _a.prevPageLabel, prevPageLabel = _h === void 0 ? "Previous Page" : _h, _j = _a.nextPageLabel, nextPageLabel = _j === void 0 ? "Next Page" : _j, range = _a.range, results = _a.results, _k = _a.size, size = _k === void 0 ? "md" : _k, _l = _a.layout, layout = _l === void 0 ? "horizontal" : _l, _m = _a.gap, gap = _m === void 0 ? "none" : _m, _o = _a.rounded, rounded = _o === void 0 ? true : _o, _p = _a.icons, icons = _p === void 0 ? true : _p, _q = _a.minimal, minimal = _q === void 0 ? false : _q, btnBackground = _a.btnBackground, btnColor = _a.btnColor, _r = _a.btnShape, btnShape = _r === void 0 ? "default" : _r, onChange = _a.onChange, _s = _a.className, className = _s === void 0 ? "" : _s, style = _a.style;
    var _t = useState(page), selectValue = _t[0], setSelectValue = _t[1];
    useEffect(function () {
        setSelectValue(page);
    }, [page]);
    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
    var handleChange = function (e) {
        return onChange(e.currentTarget.value);
    };
    var handleOnClick = function (page) { return onChange(page); };
    var totalPages = useMemo(function () {
        return roundUp(results / range);
    }, [results, range]);
    var options = useMemo(function () {
        return __spreadArray([], new Array(totalPages), true).map(function (_el, index) { return (index + 1).toString(); });
    }, [totalPages]);
    return (_jsxs("nav", { className: twMerge("pagination group flex flex-col items-center justify-center gap-1 ", className), style: style, "aria-label": "pagination", children: [_jsxs(ButtonGroup, { className: "pagination-buttons mb-1 ".concat(btnShape === "circle" ? "items-center" : ""), layout: layout, rounded: rounded, gap: gap, children: [_jsx(Button, { className: "".concat(minimal ? "hidden" : ""), title: firstPageLabel, onClick: function () { return handleOnClick("1"); }, disabled: page === "1", size: size, btnBackground: btnBackground, btnColor: btnColor, layout: btnShape, children: icons ? (_jsxs(_Fragment, { children: [_jsx(HiChevronDoubleLeft, { className: "mx-auto" }), _jsx("span", { className: "sr-only", children: firstPageLabel })] })) : ("First") }), _jsx(Button, { title: prevPageLabel, onClick: function () { return handleOnClick("".concat(Number(selectValue) - 1)); }, disabled: Number(selectValue) === 1, size: size, btnBackground: btnBackground, btnColor: btnColor, layout: btnShape, children: icons ? (_jsxs(_Fragment, { children: [_jsx(HiChevronLeft, { className: "mx-auto" }), _jsx("span", { className: "sr-only", children: prevPageLabel })] })) : ("Prev") }), _jsx(Select, { dropdownSize: size, className: "".concat(size, " border-gray-200 dark:border-gray-700 min-w-16 w-full text-center bg-light text-dark dark:bg-black dark:text-light"), defaultValue: selectValue, onChange: handleChange, nocaret: true, options: options, rounded: "none" }), _jsx(Button, { title: nextPageLabel, onClick: function () { return handleOnClick("".concat(Number(selectValue) + 1)); }, disabled: Number(selectValue) === totalPages, size: size, btnBackground: btnBackground, btnColor: btnColor, layout: btnShape, children: icons ? (_jsxs(_Fragment, { children: [_jsx(HiChevronRight, { className: "mx-auto" }), _jsx("span", { className: "sr-only", children: nextPageLabel })] })) : ("Next") }), _jsx(Button, { className: "".concat(minimal ? "hidden" : ""), title: lastPageLabel, onClick: function () { return handleOnClick(totalPages.toString()); }, disabled: Number(selectValue) === totalPages, size: size, btnBackground: btnBackground, btnColor: btnColor, layout: btnShape, children: icons ? (_jsxs(_Fragment, { children: [_jsx(HiChevronDoubleRight, { className: "mx-auto" }), _jsx("span", { className: "sr-only", children: lastPageLabel })] })) : ("Last") })] }), feedback ? (_jsxs("div", { className: "feedback mt-1 ".concat(sizeClasses), children: [feedbackLabel, " ", selectValue, " ", feedbackSeparator, " ", totalPages] })) : null] }));
};
export default Pagination;
//# sourceMappingURL=Pagination.js.map