@opexa/portal-components 0.0.544 → 0.0.545

package/dist/components/Games/GamesList.client.d.ts

@@ -20,6 +20,7 @@ export interface GamesListProps {
     heading?: string | ReactNode;
     viewGameProvidersUrl?: string;
     className?: string | ClassNameEntries;
+    pagination?: 'lazy-load' | 'paginated';
 }
 export declare function GamesList__client(props: GamesListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Games/GamesList.client.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { isString, noop } from 'lodash-es';
 import Link from 'next/link';
+import { useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useGamesQuery } from '../../client/hooks/useGamesQuery.js';
 import { useInfiniteQueryHelper } from '../../client/hooks/useInfiniteQueryHelper.js';
@@ -13,20 +14,42 @@ import { Progress } from '../../ui/Progress/index.js';
 import { Empty } from '../shared/Empty.js';
 import { Game } from './Game.js';
 import { GameContext } from './GamesContext.js';
+import { GamesPagination } from './GamesPagination.js';
 export function GamesList__client(props) {
+    const { pagination = 'lazy-load' } = props;
+    const perPage = props.first ?? 24;
     const { loading, availableRows, totalRows, totalAvailableRows, hasNextPage, next, } = useInfiniteQueryHelper(useGamesQuery, {
-        first: props.first ?? 24,
+        first: perPage,
         filter: props.filter,
         search: props.search,
         sort: props.sort,
     });
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = Math.ceil(totalRows / perPage);
+    useEffect(() => {
+        if (pagination === 'paginated') {
+            const requiredRows = currentPage * perPage;
+            if (requiredRows > availableRows.length && hasNextPage && !loading) {
+                next();
+            }
+        }
+    }, [
+        pagination,
+        currentPage,
+        perPage,
+        availableRows.length,
+        hasNextPage,
+        loading,
+        next,
+    ]);
+    const paginatedRows = availableRows.slice((currentPage - 1) * perPage, currentPage * perPage);
     const classNames = isString(props.className)
         ? { root: props.className }
         : (props.className ?? {});
     return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "order-2 mt-4xl font-semibold text-lg lg:order-none lg:mt-0", children: props.heading ?? 'Games' }), props.viewGameProvidersUrl && (_jsxs(Link, { href: props.viewGameProvidersUrl, className: "order-1 flex items-center gap-sm font-semibold text-button-tertiary-fg text-lg lg:order-none lg:text-sm", children: [_jsx(ChevronLeftIcon, { className: "size-5" }), "Back to all Providers"] }))] }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
                     ? 'Fetching latest games...'
-                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
+                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: (pagination === 'paginated' ? paginatedRows : availableRows).map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
                                     root: classNames.thumbnailRoot,
                                     title: classNames.thumbnailTitle,
-                                } }) }, game.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })] }))] }));
+                                } }) }, game.id))) }), _jsx("div", { className: 'mt-2xl flex flex-col items-center lg:mt-3xl', children: pagination === 'paginated' && totalRows > 0 ? (_jsx(GamesPagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage })) : (_jsxs(_Fragment, { children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: twMerge('w-[12.5rem]', classNames.progressRoot), children: _jsx(Progress.Track, { className: twMerge('bg-bg-tertiary', classNames.progressTrack), children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "mt-md text-button-tertiary-fg text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: twMerge('mt-lg', classNames.loadMoreButton), children: "Load More" }))] })) })] }))] }));
 }

package/dist/components/Games/GamesPagination.d.ts

@@ -0,0 +1,8 @@
+interface GamesPaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+}
+export declare function GamesPagination({ currentPage, totalPages, onPageChange, siblingCount, }: GamesPaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Games/GamesPagination.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.js';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.js';
+import { Button } from '../../ui/Button/index.js';
+const DOTS = '...';
+const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+};
+export function GamesPagination({ currentPage, totalPages, onPageChange, siblingCount = 1, }) {
+    const paginationRange = useMemo(() => {
+        const totalPageNumbers = siblingCount + 5;
+        if (totalPageNumbers >= totalPages) {
+            return range(1, totalPages);
+        }
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        const shouldShowLeftDots = leftSiblingIndex > 2;
+        const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+        const firstPageIndex = 1;
+        const lastPageIndex = totalPages;
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = range(1, leftItemCount);
+            return [...leftRange, DOTS, totalPages];
+        }
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = range(totalPages - rightItemCount + 1, totalPages);
+            return [firstPageIndex, DOTS, ...rightRange];
+        }
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+        }
+        return range(1, totalPages);
+    }, [totalPages, siblingCount, currentPage]);
+    const handlePrevious = () => {
+        if (currentPage > 1) {
+            onPageChange(currentPage - 1);
+        }
+    };
+    const handleNext = () => {
+        if (currentPage < totalPages) {
+            onPageChange(currentPage + 1);
+        }
+    };
+    if (currentPage === 0 || (paginationRange && paginationRange.length < 2)) {
+        return null;
+    }
+    return (_jsx("div", { className: 'mx-10 flex items-center justify-center', children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "w-fit rounded-md border-transparent", onClick: handlePrevious, disabled: currentPage === 1, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-6" }) }), paginationRange?.map((pageNumber, index) => {
+                    if (pageNumber === DOTS) {
+                        return (_jsx("span", { className: "flex h-10 w-10 items-center justify-center text-sm text-text-secondary", children: "..." }, `dots-${index}`));
+                    }
+                    return (_jsx(Button, { variant: pageNumber === currentPage ? 'solid' : 'outline', colorScheme: "gray", className: twMerge('h-10 w-10 rounded-md', pageNumber !== currentPage && 'border-transparent', pageNumber === currentPage &&
+                            'border-border-brand-primary bg-bg-brand-primary text-text-primary-inverted'), onClick: () => onPageChange(pageNumber), children: pageNumber }, pageNumber));
+                }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "w-fit rounded-md border-transparent", onClick: handleNext, disabled: currentPage === totalPages, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-6" }) })] }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@opexa/portal-components",
-	"version": "0.0.544",
+	"version": "0.0.545",
 	"exports": {
 		"./ui/*": {
 			"types": "./dist/ui/*/index.d.ts",