@djangocfg/ui-core 2.1.319 → 2.1.321

package/src/components/navigation/pagination/ssr-pagination.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import React from 'react';
+
+import { cn } from '../../../lib';
+import { useIsMobile } from '../../../hooks';
+import { useLocation, useQueryParams } from '../../../hooks/router';
+
+import {
+    Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink,
+    PaginationNext, PaginationPrevious
+} from './pagination';
+
+interface SSRPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  itemsPerPage: number;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  className?: string;
+  showInfo?: boolean;
+  maxVisiblePages?: number;
+  baseUrl?: string;
+  pathname?: string;
+  preserveQuery?: boolean;
+}
+
+function buildSearch(params: Record<string, string | string[]>, page: number, preserveQuery: boolean): string {
+  const next = new URLSearchParams();
+  if (preserveQuery) {
+    for (const [key, value] of Object.entries(params)) {
+      if (key === 'page') continue;
+      if (Array.isArray(value)) {
+        for (const v of value) next.append(key, v);
+      } else {
+        next.set(key, value);
+      }
+    }
+  }
+  if (page !== 1) next.set('page', page.toString());
+  return next.toString();
+}
+
+export const SSRPagination: React.FC<SSRPaginationProps> = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  hasNextPage,
+  hasPreviousPage: _hasPreviousPage,
+  className,
+  showInfo = true,
+  maxVisiblePages = 7,
+  baseUrl,
+  pathname: propPathname,
+  preserveQuery = true,
+}) => {
+  const queryParams = useQueryParams();
+  const { pathname } = useLocation();
+  const isMobile = useIsMobile();
+
+  const getCurrentPageFromUrl = (): number => {
+    const pageParam = queryParams.get('page');
+    if (pageParam) {
+      const pageNum = parseInt(pageParam, 10);
+      return isNaN(pageNum) ? 1 : pageNum;
+    }
+    return 1;
+  };
+
+  const actualCurrentPage = getCurrentPageFromUrl() || currentPage;
+  const actualHasPreviousPage = actualCurrentPage > 1;
+
+  const getPageUrl = (page: number): string => {
+    if (baseUrl) {
+      return `${baseUrl}?page=${page}`;
+    }
+    const queryString = buildSearch(queryParams.params, page, preserveQuery);
+    const basePath = propPathname || pathname || '';
+    return queryString ? `${basePath}?${queryString}` : basePath;
+  };
+
+  const getVisiblePages = (): (number | 'ellipsis')[] => {
+    const mobileMaxVisible = 3;
+    const effectiveMaxVisible = isMobile ? mobileMaxVisible : maxVisiblePages;
+
+    if (totalPages <= effectiveMaxVisible) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const pages: (number | 'ellipsis')[] = [];
+    const halfVisible = Math.floor(effectiveMaxVisible / 2);
+
+    if (isMobile) {
+      if (actualCurrentPage > 1) pages.push(actualCurrentPage - 1);
+      pages.push(actualCurrentPage);
+      if (actualCurrentPage < totalPages) pages.push(actualCurrentPage + 1);
+    } else {
+      pages.push(1);
+
+      let start = Math.max(2, actualCurrentPage - halfVisible);
+      let end = Math.min(totalPages - 1, actualCurrentPage + halfVisible);
+
+      if (actualCurrentPage <= halfVisible + 1) {
+        end = Math.min(totalPages - 1, effectiveMaxVisible - 1);
+      } else if (actualCurrentPage >= totalPages - halfVisible) {
+        start = Math.max(2, totalPages - effectiveMaxVisible + 2);
+      }
+
+      if (start > 2) pages.push('ellipsis');
+      for (let i = start; i <= end; i++) pages.push(i);
+      if (end < totalPages - 1) pages.push('ellipsis');
+      if (totalPages > 1) pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  const visiblePages = getVisiblePages();
+  const startItem = (actualCurrentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(actualCurrentPage * itemsPerPage, totalItems);
+
+  if (totalItems === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {showInfo && (
+        <div className="text-sm text-muted-foreground text-center">
+          {isMobile ? (
+            `Page ${actualCurrentPage} of ${totalPages}`
+          ) : (
+            `Showing ${startItem.toLocaleString()} to ${endItem.toLocaleString()} of ${totalItems.toLocaleString()} results`
+          )}
+        </div>
+      )}
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href={actualHasPreviousPage ? getPageUrl(actualCurrentPage - 1) : undefined}
+              className={!actualHasPreviousPage ? "pointer-events-none opacity-50" : undefined}
+            />
+          </PaginationItem>
+
+          {visiblePages.map((page, index) => (
+            <PaginationItem key={index}>
+              {page === 'ellipsis' ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationLink
+                  href={getPageUrl(page)}
+                  isActive={page === actualCurrentPage}
+                >
+                  {page}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+
+          <PaginationItem>
+            <PaginationNext
+              href={hasNextPage ? getPageUrl(actualCurrentPage + 1) : undefined}
+              className={!hasNextPage ? "pointer-events-none opacity-50" : undefined}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};
+
+SSRPagination.displayName = 'SSRPagination';

package/src/components/navigation/sidebar/index.ts

@@ -0,0 +1,26 @@
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+} from './sidebar';