@multiplatform.one/table 6.0.0

package/src/components/DataTablePagination/index.tsx

@@ -0,0 +1,453 @@
+import {
+  CaretDoubleLeftIcon,
+  CaretDoubleRightIcon,
+  CaretLeftIcon,
+  CaretRightIcon,
+} from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React from "react";
+import { Button, Input, Select } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack, useMedia } from "tamagui";
+import type { TablePagination, TablePaginationState } from "../../types";
+import { useDataTableState } from "../DataTable/DataTableStateContext";
+
+export interface DataTablePaginationProps {
+  pagination?: TablePaginationState;
+  onPaginationChange?: (pagination: TablePagination) => void;
+  pageSizeOptions?: number[];
+  showInfo?: boolean;
+  showPageSizeSelector?: boolean;
+  showPageJump?: boolean;
+  compact?: boolean;
+}
+
+export function DataTablePagination(props: DataTablePaginationProps) {
+  // Try to consume from DataTableStateContext (compound component pattern)
+  const ctx = useDataTableState();
+
+  // Resolve values: explicit props override context values
+  const pagination =
+    props.pagination ??
+    (ctx
+      ? {
+          pageIndex: ctx.state.pagination.pageIndex,
+          pageSize: ctx.state.pagination.pageSize,
+          totalPages: ctx.computed.totalPages,
+          totalCount: ctx.computed.totalRows,
+          hasPreviousPage: ctx.state.pagination.pageIndex > 0,
+          hasNextPage: ctx.state.pagination.pageIndex < ctx.computed.totalPages - 1,
+        }
+      : {
+          pageIndex: 0,
+          pageSize: 10,
+          totalPages: 1,
+          totalCount: 0,
+          hasPreviousPage: false,
+          hasNextPage: false,
+        });
+
+  const onPaginationChange =
+    props.onPaginationChange ??
+    (ctx ? (p: TablePagination) => ctx.actions.setPagination(p) : () => {});
+
+  const {
+    pageSizeOptions = [10, 20, 50, 100],
+    showInfo = true,
+    showPageSizeSelector = true,
+    showPageJump = true,
+    compact = false,
+  } = props;
+
+  const { sm } = useMedia();
+  const { knobProps } = useResolvedKnobs();
+  const isMobile = !sm;
+
+  const handlePageSizeChange = (newPageSize: number) => {
+    onPaginationChange({
+      pageIndex: 0, // Reset to first page when changing page size
+      pageSize: newPageSize,
+    });
+  };
+
+  const handlePageChange = (newPageIndex: number) => {
+    if (newPageIndex >= 0 && newPageIndex < (pagination.totalPages || 1)) {
+      onPaginationChange({
+        pageIndex: newPageIndex,
+        pageSize: pagination.pageSize,
+      });
+    }
+  };
+
+  const handlePageJump = (pageNumber: string) => {
+    const page = Number.parseInt(pageNumber, 10) - 1; // Convert to 0-based
+    if (!Number.isNaN(page) && page >= 0 && page < (pagination.totalPages || 1)) {
+      handlePageChange(page);
+    }
+  };
+
+  const currentPage = pagination.pageIndex + 1; // Convert to 1-based for display
+  const totalPages = pagination.totalPages || 1;
+  const startItem = pagination.pageIndex * pagination.pageSize + 1;
+  const endItem = Math.min(
+    (pagination.pageIndex + 1) * pagination.pageSize,
+    pagination.totalCount || 0,
+  );
+
+  if (compact) {
+    return (
+      <XStack
+        alignItems="center"
+        justifyContent="center"
+        gap="$1"
+        paddingVertical="$1"
+        paddingHorizontal="$2"
+        role="navigation"
+        aria-label="Table pagination"
+      >
+        <Button
+          size="$2"
+          variant="outlined"
+          onPress={() => handlePageChange(0)}
+          disabled={!pagination.hasPreviousPage}
+          icon={<CaretDoubleLeftIcon size={14} />}
+          aria-label="Go to first page"
+        />
+        <Button
+          size="$2"
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex - 1)}
+          disabled={!pagination.hasPreviousPage}
+          icon={<CaretLeftIcon size={14} />}
+          aria-label="Go to previous page"
+        />
+
+        <Text
+          fontSize="$2"
+          color="$color10"
+          paddingHorizontal="$2"
+          aria-live="polite"
+          aria-atomic="true"
+          aria-label={`Current page ${currentPage} of ${totalPages}`}
+        >
+          {currentPage} / {totalPages}
+        </Text>
+
+        <Button
+          size="$2"
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex + 1)}
+          disabled={!pagination.hasNextPage}
+          icon={<CaretRightIcon size={14} />}
+          aria-label="Go to next page"
+        />
+        <Button
+          size="$2"
+          variant="outlined"
+          onPress={() => handlePageChange(totalPages - 1)}
+          disabled={!pagination.hasNextPage}
+          icon={<CaretDoubleRightIcon size={14} />}
+          aria-label="Go to last page"
+        />
+      </XStack>
+    );
+  }
+
+  return (
+    <XStack
+      alignItems="center"
+      justifyContent="space-between"
+      {...knobProps.gapLg}
+      flexWrap="wrap"
+      width="100%"
+      paddingHorizontal={knobProps.panelPadding.padding}
+      paddingVertical="$2"
+      aria-label="Table pagination"
+    >
+      {/* Left Section - Page Size Selector */}
+      {showPageSizeSelector && !isMobile && (
+        <XStack alignItems="center" gap="$2">
+          <Text fontSize={knobProps.sizeToken} color="$color10">
+            Rows per page:
+          </Text>
+          <View width={80}>
+            <Select
+              value={pagination.pageSize.toString()}
+              onValueChange={(value) => {
+                if (typeof value === "string") {
+                  handlePageSizeChange(Number.parseInt(value, 10));
+                }
+              }}
+              options={pageSizeOptions.map((size) => ({
+                label: size.toString(),
+                value: size.toString(),
+              }))}
+              aria-label="Select rows per page"
+              size={knobProps.sizeToken}
+              compact
+            />
+          </View>
+        </XStack>
+      )}
+
+      {/* Center Section - Navigation */}
+      <XStack alignItems="center" gap="$2" aria-label="Pagination controls">
+        <Button
+          size={knobProps.sizeToken}
+          compact
+          variant="outlined"
+          onPress={() => handlePageChange(0)}
+          disabled={!pagination.hasPreviousPage}
+          icon={<CaretDoubleLeftIcon size={16} />}
+          aria-label="Go to first page"
+        />
+        <Button
+          size={knobProps.sizeToken}
+          compact
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex - 1)}
+          disabled={!pagination.hasPreviousPage}
+          icon={<CaretLeftIcon size={16} />}
+          aria-label="Go to previous page"
+        />
+
+        {/* Page Info */}
+        {showInfo && (
+          <View
+            flexDirection="row"
+            alignItems="center"
+            paddingHorizontal="$4"
+            paddingVertical="$2"
+            backgroundColor="$color2"
+            borderWidth={1}
+            borderColor="$color6"
+            borderRadius={knobProps.borderRadius.borderRadius}
+            gap="$2"
+            aria-live="polite"
+            aria-label={`Current page ${currentPage} of ${totalPages}`}
+          >
+            <Text fontSize={knobProps.sizeToken} fontWeight="600">
+              {currentPage}
+            </Text>
+            <Text fontSize={knobProps.sizeToken} color="$color10">
+              of
+            </Text>
+            <Text fontSize={knobProps.sizeToken} fontWeight="600">
+              {totalPages}
+            </Text>
+          </View>
+        )}
+
+        <Button
+          size={knobProps.sizeToken}
+          compact
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex + 1)}
+          disabled={!pagination.hasNextPage}
+          icon={<CaretRightIcon size={16} />}
+          aria-label="Go to next page"
+        />
+        <Button
+          size={knobProps.sizeToken}
+          compact
+          variant="outlined"
+          onPress={() => handlePageChange(totalPages - 1)}
+          disabled={!pagination.hasNextPage}
+          icon={<CaretDoubleRightIcon size={16} />}
+          aria-label="Go to last page"
+        />
+      </XStack>
+
+      {/* Right Section - Page Jump & Info */}
+      <XStack alignItems="center" {...knobProps.gapLg}>
+        {showPageJump && !isMobile && (
+          <XStack alignItems="center" gap="$2" aria-label="Jump to page">
+            <Text fontSize={knobProps.sizeToken} color="$color10">
+              Go to page:
+            </Text>
+            <View width={60}>
+              <Input
+                defaultValue={currentPage.toString()}
+                inputProps={{
+                  type: "number",
+                  style: { textAlign: "center" },
+                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                    if (e.key === "Enter") {
+                      handlePageJump((e.target as HTMLInputElement).value);
+                    }
+                  },
+                }}
+                placeholder={`1-${totalPages}`}
+                aria-label="Page number"
+                size={knobProps.sizeToken}
+                compact
+              />
+            </View>
+          </XStack>
+        )}
+
+        {showInfo && !isMobile && (
+          <Text fontSize={knobProps.sizeToken} color="$color10" aria-live="polite">
+            {pagination.totalCount
+              ? `${startItem}-${endItem} of ${pagination.totalCount} items`
+              : `${startItem}-${endItem} items`}
+          </Text>
+        )}
+      </XStack>
+    </XStack>
+  );
+}
+
+// Additional Pagination Components
+
+export interface DataTablePaginationInfoProps {
+  pagination: TablePaginationState;
+  showTotal?: boolean;
+  showRange?: boolean;
+}
+
+export function DataTablePaginationInfo({
+  pagination,
+  showTotal = true,
+  showRange = true,
+}: DataTablePaginationInfoProps) {
+  const { knobProps } = useResolvedKnobs();
+  const currentPage = pagination.pageIndex + 1;
+  const totalPages = pagination.totalPages || 1;
+  const startItem = pagination.pageIndex * pagination.pageSize + 1;
+  const endItem = Math.min(
+    (pagination.pageIndex + 1) * pagination.pageSize,
+    pagination.totalCount || 0,
+  );
+
+  return (
+    <YStack alignItems="center" gap="$1">
+      <Text fontSize={knobProps.sizeToken} fontWeight="500">
+        Page {currentPage} of {totalPages}
+      </Text>
+      {showRange && pagination.totalCount && (
+        <Text fontSize="$2" color="$color10">
+          Showing {startItem}-{endItem} of {pagination.totalCount} items
+        </Text>
+      )}
+      {showTotal && pagination.totalCount && (
+        <Text fontSize="$2" color="$color10">
+          Total: {pagination.totalCount} items
+        </Text>
+      )}
+    </YStack>
+  );
+}
+
+export interface DataTablePaginationControlsProps {
+  pagination: TablePaginationState;
+  onPaginationChange: (pagination: TablePagination) => void;
+  variant?: "default" | "minimal";
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeToToken = { sm: "$2", md: "$3", lg: "$4" } as const;
+
+export function DataTablePaginationControls({
+  pagination,
+  onPaginationChange,
+  variant = "default",
+  size = "md",
+}: DataTablePaginationControlsProps) {
+  const { knobProps } = useResolvedKnobs();
+  const sizeToken = sizeToToken[size];
+  const handlePageChange = (newPageIndex: number) => {
+    if (newPageIndex >= 0 && newPageIndex < (pagination.totalPages || 1)) {
+      onPaginationChange({
+        pageIndex: newPageIndex,
+        pageSize: pagination.pageSize,
+      });
+    }
+  };
+
+  if (variant === "minimal") {
+    return (
+      <XStack alignItems="center" gap="$1" role="navigation" aria-label="Table pagination">
+        <Button
+          size={sizeToken}
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex - 1)}
+          disabled={!pagination.hasPreviousPage}
+          aria-label="Go to previous page"
+        >
+          Previous
+        </Button>
+        <Text
+          fontSize={knobProps.sizeToken}
+          color="$color10"
+          paddingHorizontal="$3"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          Page {pagination.pageIndex + 1} of {pagination.totalPages || 1}
+        </Text>
+        <Button
+          size={sizeToken}
+          variant="outlined"
+          onPress={() => handlePageChange(pagination.pageIndex + 1)}
+          disabled={!pagination.hasNextPage}
+          aria-label="Go to next page"
+        >
+          Next
+        </Button>
+      </XStack>
+    );
+  }
+
+  return (
+    <XStack alignItems="center" gap="$2" role="navigation" aria-label="Table pagination">
+      <Button
+        size={sizeToken}
+        variant="outlined"
+        onPress={() => handlePageChange(0)}
+        disabled={!pagination.hasPreviousPage}
+        icon={<CaretDoubleLeftIcon size={16} />}
+        aria-label="Go to first page"
+      />
+      <Button
+        size={sizeToken}
+        variant="outlined"
+        onPress={() => handlePageChange(pagination.pageIndex - 1)}
+        disabled={!pagination.hasPreviousPage}
+        icon={<CaretLeftIcon size={16} />}
+        aria-label="Go to previous page"
+      />
+
+      <View
+        flexDirection="row"
+        alignItems="center"
+        paddingHorizontal="$3"
+        paddingVertical="$2"
+        backgroundColor="$color1"
+        borderRadius={knobProps.borderRadius.borderRadius}
+        aria-live="polite"
+        aria-atomic="true"
+      >
+        <Text fontSize={knobProps.sizeToken} fontWeight="500">
+          Page {pagination.pageIndex + 1} of {pagination.totalPages || 1}
+        </Text>
+      </View>
+
+      <Button
+        size={sizeToken}
+        variant="outlined"
+        onPress={() => handlePageChange(pagination.pageIndex + 1)}
+        disabled={!pagination.hasNextPage}
+        icon={<CaretRightIcon size={16} />}
+        aria-label="Go to next page"
+      />
+      <Button
+        size={sizeToken}
+        variant="outlined"
+        aria-label="Go to last page"
+        onPress={() => handlePageChange((pagination.totalPages || 1) - 1)}
+        disabled={!pagination.hasNextPage}
+        icon={<CaretDoubleRightIcon size={16} />}
+      />
+    </XStack>
+  );
+}