@smitch/fluid
Version:
A Next/React ui-component libray.
42 lines (41 loc) • 5.18 kB
JavaScript
'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.rounded, rounded = _m === void 0 ? true : _m, _o = _a.outline, outline = _o === void 0 ? 'none' : _o, _p = _a.outlineColor, outlineColor = _p === void 0 ? 'dark' : _p, _q = _a.icons, icons = _q === void 0 ? true : _q, _r = _a.minimal, minimal = _r === void 0 ? false : _r, btnBackground = _a.btnBackground, btnColor = _a.btnColor, 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", layout: layout, rounded: rounded, outline: outline, outlineColor: outlineColor, children: [_jsx(Button, { className: "".concat(minimal ? 'hidden' : ''), title: firstPageLabel, onClick: function () { return handleOnClick('1'); }, disabled: page === '1', size: size, btnBackground: btnBackground, btnColor: btnColor, 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, 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-none min-w-16 w-full text-center bg-dark text-light dark:bg-light dark:text-dark"), 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, 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, 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;