@ttdk-design-system/library-react 0.0.0-stage → 1.0.1

package/src/web/pagination/pagination.tsx

@@ -0,0 +1,687 @@
+"use client";
+import * as React from "react";
+
+export type PaginationUiProps = UiProps;
+export interface PaginationPageItem {
+  type: "page" | "ellipsis";
+  value: number | string;
+  key: string;
+}
+export interface PaginationProps {
+  /**
+   * Nomor halaman saat ini (1-indexed).
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Jumlah total halaman maksimum (alias untuk totalPages).
+   * @default 1
+   */
+  maxPages?: number;
+
+  /**
+   * Jumlah total halaman (alias maxPages).
+   * @default 1
+   */
+  totalPages?: number;
+
+  /**
+   * Jumlah baris/item data per halaman (page size).
+   * @default 10
+   */
+  limit?: number;
+
+  /**
+   * Callback saat jumlah baris per halaman diubah via select box.
+   */
+  onLimitChange?: (limit: number) => void;
+
+  /**
+   * Pilihan angka baris per halaman pada select box.
+   * @default [10, 20, 50, 100]
+   */
+  limitOptions?: number[];
+
+  /**
+   * Menentukan apakah navigasi ke halaman sebelumnya diizinkan (false = tombol Previous dinonaktifkan).
+   * @default false
+   */
+  canPrevPage?: boolean;
+
+  /**
+   * Menentukan apakah navigasi ke halaman berikutnya diizinkan (false = tombol Next dinonaktifkan).
+   * @default false
+   */
+  canNextPage?: boolean;
+
+  /**
+   * Callback saat tombol First Page (halaman pertama) diklik.
+   */
+  onFirstPage?: () => void;
+
+  /**
+   * Callback saat tombol Previous Page (halaman sebelumnya) diklik.
+   */
+  onPrevPage?: () => void;
+
+  /**
+   * Callback saat tombol Next Page (halaman selanjutnya) diklik.
+   */
+  onNextPage?: () => void;
+
+  /**
+   * Callback saat tombol Last Page (halaman terakhir) diklik.
+   */
+  onLastPage?: () => void;
+
+  /**
+   * Callback saat nomor halaman tertentu diklik.
+   */
+  onPageChange?: (page: number) => void;
+
+  /**
+   * Jumlah tetangga nomor halaman di samping kiri dan kanan halaman aktif.
+   * @default 1
+   */
+  siblingCount?: number;
+
+  /**
+   * Menampilkan tombol First (<<) dan Last (>>).
+   * @default false
+   */
+  showEdges?: boolean;
+
+  /**
+   * Menampilkan nomor halaman terpaginasi (1, 2, 3...).
+   * @default true
+   */
+  showPageNumbers?: boolean;
+
+  /**
+   * Skala ukuran pagination:
+   * - `'sm'`: 28px
+   * - `'md'`: 36px (standar)
+   * - `'lg'`: 44px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Kustomisasi visual granular root kontainer pagination (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Style kustom untuk kontainer daftar pagination content (ul.ttdk-pagination-content).
+   */
+  contentStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kontainer daftar pagination content.
+   */
+  contentClass?: string;
+
+  /**
+   * Style kustom untuk tombol link nomor halaman / navigasi.
+   */
+  linkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol link nomor halaman / navigasi.
+   */
+  linkClass?: string;
+
+  /**
+   * Style kustom untuk tombol nomor halaman saat aktif.
+   */
+  activeLinkStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk tombol nomor halaman saat aktif.
+   */
+  activeLinkClass?: string;
+
+  /**
+   * Style kustom untuk kontainer baris per halaman (limit).
+   */
+  limitStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk kontainer baris per halaman (limit).
+   */
+  limitClass?: string;
+
+  /**
+   * Style kustom untuk elemen Selectbox baris per halaman (limit).
+   */
+  limitSelectStyle?: UiProps;
+
+  /**
+   * Slot kustom untuk menggantikan elemen limit selector bawaan.
+   */
+  limitSlot?: any;
+
+  /**
+   * Menentukan apakah kontrol baris per halaman (limit selectbox) ditampilkan.
+   * Jika tidak disetel, otomatis mengikuti keberadaan callback onLimitChange.
+   */
+  showLimit?: boolean;
+
+  /**
+   * Menentukan apakah teks label 'Baris per halaman:' ditampilkan di samping selectbox limit.
+   * @default true
+   */
+  showLimitLabel?: boolean;
+
+  /**
+   * Teks label untuk opsi baris per halaman.
+   * @default 'Baris per halaman:'
+   */
+  limitLabel?: string;
+
+  /**
+   * Ikon kustom untuk tombol halaman pertama (first page, menggantikan <<).
+   */
+  firstIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman sebelumnya (previous page, menggantikan <).
+   */
+  prevIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman selanjutnya (next page, menggantikan >).
+   */
+  nextIcon?: any;
+
+  /**
+   * Ikon kustom untuk tombol halaman terakhir (last page, menggantikan >>).
+   */
+  lastIcon?: any;
+
+  /**
+   * Ikon kustom untuk separator elipsis (menggantikan ...).
+   */
+  ellipsisIcon?: any;
+
+  /**
+   * Label teks tombol Previous.
+   * @default 'Previous'
+   */
+  prevText?: string;
+
+  /**
+   * Label teks tombol Next.
+   * @default 'Next'
+   */
+  nextText?: string;
+
+  /**
+   * Mode hanya menampilkan ikon pada tombol Previous dan Next tanpa teks label.
+   * @default false
+   */
+  iconOnly?: boolean;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Konten kustom atau subkomponen compound (PaginationContent, PaginationItem, dll).
+   */
+  children?: any;
+}
+
+/**
+ * Komponen Pagination navigasi halaman dengan dukungan Compound API (ala Shadcn UI) dan Props-driven mode.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+import Selectbox from "../selectbox/selectbox";
+
+function Pagination(props: PaginationProps) {
+  function getCurrentPage() {
+    return props.page !== undefined ? props.page : 1;
+  }
+
+  function getTotalPages() {
+    if (props.maxPages !== undefined) return props.maxPages;
+    if (props.totalPages !== undefined) return props.totalPages;
+    return 1;
+  }
+
+  function getCanPrev() {
+    if (props.canPrevPage !== undefined) return props.canPrevPage;
+    return getCurrentPage() > 1;
+  }
+
+  function getCanNext() {
+    if (props.canNextPage !== undefined) return props.canNextPage;
+    return getCurrentPage() < getTotalPages();
+  }
+
+  function getShouldShowLimit() {
+    if (props.showLimit !== undefined) {
+      return Boolean(props.showLimit);
+    }
+    return Boolean(props.onLimitChange);
+  }
+
+  function getLimitOptions() {
+    const opts = props.limitOptions || [10, 20, 50, 100];
+    return opts.map((opt: number) => ({
+      label: String(opt),
+      value: opt,
+    }));
+  }
+
+  function getPageRange() {
+    const total = getTotalPages();
+    const current = getCurrentPage();
+    const sibling = props.siblingCount !== undefined ? props.siblingCount : 1;
+    if (total <= 1) {
+      return [
+        {
+          type: "page",
+          value: 1,
+          key: "page-1",
+        },
+      ];
+    }
+    const totalPageNumbers = sibling * 2 + 5;
+    if (total <= totalPageNumbers) {
+      const pages: PaginationPageItem[] = [];
+      for (let i = 1; i <= total; i++) {
+        pages.push({
+          type: "page",
+          value: i,
+          key: `page-${i}`,
+        });
+      }
+      return pages;
+    }
+    const leftSiblingIndex = Math.max(current - sibling, 1);
+    const rightSiblingIndex = Math.min(current + sibling, total);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < total - 1;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * sibling;
+      const pages: PaginationPageItem[] = [];
+      for (let i = 1; i <= leftItemCount; i++) {
+        pages.push({
+          type: "page",
+          value: i,
+          key: `page-${i}`,
+        });
+      }
+      pages.push({
+        type: "ellipsis",
+        value: "...",
+        key: "ellipsis-right",
+      });
+      pages.push({
+        type: "page",
+        value: total,
+        key: `page-${total}`,
+      });
+      return pages;
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * sibling;
+      const pages: PaginationPageItem[] = [
+        {
+          type: "page",
+          value: 1,
+          key: "page-1",
+        },
+        {
+          type: "ellipsis",
+          value: "...",
+          key: "ellipsis-left",
+        },
+      ];
+      for (let i = total - rightItemCount + 1; i <= total; i++) {
+        pages.push({
+          type: "page",
+          value: i,
+          key: `page-${i}`,
+        });
+      }
+      return pages;
+    }
+    const pages: PaginationPageItem[] = [
+      {
+        type: "page",
+        value: 1,
+        key: "page-1",
+      },
+      {
+        type: "ellipsis",
+        value: "...",
+        key: "ellipsis-left",
+      },
+    ];
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+      pages.push({
+        type: "page",
+        value: i,
+        key: `page-${i}`,
+      });
+    }
+    pages.push({
+      type: "ellipsis",
+      value: "...",
+      key: "ellipsis-right",
+    });
+    pages.push({
+      type: "page",
+      value: total,
+      key: `page-${total}`,
+    });
+    return pages;
+  }
+
+  function handleLimitChange(val: any) {
+    if (props.onLimitChange) {
+      props.onLimitChange(Number(val));
+    }
+  }
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={`ttdk-pagination ${props.className || ""}`.trim()}
+      data-size={props.size || "md"}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      {props.children ? <>{props.children}</> : null}
+      {!props.children ? (
+        <div className="ttdk-pagination-auto-wrapper">
+          {getShouldShowLimit() ? (
+            <div
+              className={`ttdk-pagination-limit ${
+                props.limitClass || ""
+              }`.trim()}
+              style={{
+                ...buildUiVars(props.limitStyle),
+              }}
+            >
+              {props.showLimitLabel !== false ? (
+                <span className="ttdk-pagination-limit-label">
+                  {props.limitLabel || "Baris per halaman:"}
+                </span>
+              ) : null}
+              {props.limitSlot ? <>{props.limitSlot}</> : null}
+              {!props.limitSlot ? (
+                <Selectbox
+                  size={props.size === "lg" ? "md" : "sm"}
+                  value={props.limit || 10}
+                  options={getLimitOptions()}
+                  onChange={(val) => handleLimitChange(val)}
+                  controlStyle={{
+                    minWidth: "70px",
+                    width: "76px",
+                    height:
+                      props.size === "sm"
+                        ? "28px"
+                        : props.size === "lg"
+                        ? "44px"
+                        : "36px",
+                    minHeight:
+                      props.size === "sm"
+                        ? "28px"
+                        : props.size === "lg"
+                        ? "44px"
+                        : "36px",
+                    padding: "0 8px",
+                    fontSize: "12px",
+                    ...buildUiVars(props.limitSelectStyle),
+                  }}
+                />
+              ) : null}
+            </div>
+          ) : null}
+          <ul
+            className={`ttdk-pagination-content ${
+              props.contentClass || ""
+            }`.trim()}
+            style={{
+              ...buildUiVars(props.contentStyle),
+            }}
+          >
+            {props.showEdges || Boolean(props.onFirstPage) ? (
+              <li className="ttdk-pagination-item">
+                <button
+                  type="button"
+                  aria-label="Go to first page"
+                  className={`ttdk-pagination-link ttdk-pagination-first ${
+                    props.linkClass || ""
+                  }`.trim()}
+                  data-size={props.size || "md"}
+                  data-disabled={!getCanPrev() ? "true" : "false"}
+                  disabled={!getCanPrev()}
+                  onClick={(event) => {
+                    if (props.onFirstPage) {
+                      props.onFirstPage();
+                    } else if (props.onPageChange) {
+                      props.onPageChange(1);
+                    }
+                  }}
+                  style={{
+                    ...buildUiVars(props.linkStyle),
+                  }}
+                >
+                  {props.firstIcon ? <>{props.firstIcon}</> : null}
+                  {!props.firstIcon ? (
+                    <svg
+                      className="ttdk-pagination-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      aria-hidden="true"
+                    >
+                      <polyline points="11 17 6 12 11 7" />
+                      <polyline points="18 17 13 12 18 7" />
+                    </svg>
+                  ) : null}
+                </button>
+              </li>
+            ) : null}
+            <li className="ttdk-pagination-item">
+              <button
+                type="button"
+                aria-label="Go to previous page"
+                className={`ttdk-pagination-link ttdk-pagination-prev ${
+                  props.linkClass || ""
+                }`.trim()}
+                data-size={props.size || "md"}
+                data-disabled={!getCanPrev() ? "true" : "false"}
+                disabled={!getCanPrev()}
+                onClick={(event) => {
+                  if (props.onPrevPage) {
+                    props.onPrevPage();
+                  } else if (props.onPageChange) {
+                    props.onPageChange(Math.max(1, getCurrentPage() - 1));
+                  }
+                }}
+                style={{
+                  ...buildUiVars(props.linkStyle),
+                }}
+              >
+                {props.prevIcon ? <>{props.prevIcon}</> : null}
+                {!props.prevIcon ? (
+                  <svg
+                    className="ttdk-pagination-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                  >
+                    <polyline points="15 18 9 12 15 6" />
+                  </svg>
+                ) : null}
+                {!props.iconOnly ? (
+                  <span className="ttdk-pagination-prev-text">
+                    {props.prevText || "Previous"}
+                  </span>
+                ) : null}
+              </button>
+            </li>
+            {props.showPageNumbers !== false ? (
+              <>
+                {getPageRange()?.map((item) => (
+                  <li className="ttdk-pagination-item" key={item.key}>
+                    {item.type === "ellipsis" ? (
+                      <span
+                        aria-hidden="true"
+                        className="ttdk-pagination-ellipsis"
+                      >
+                        {props.ellipsisIcon ? <>{props.ellipsisIcon}</> : null}
+                        {!props.ellipsisIcon ? (
+                          <svg
+                            className="ttdk-pagination-icon"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                          >
+                            <circle cx="12" cy="12" r="1" />
+                            <circle cx="19" cy="12" r="1" />
+                            <circle cx="5" cy="12" r="1" />
+                          </svg>
+                        ) : null}
+                        <span className="ttdk-sr-only">More pages</span>
+                      </span>
+                    ) : null}
+                    {item.type === "page" ? (
+                      <button
+                        type="button"
+                        className={`ttdk-pagination-link ${
+                          props.linkClass || ""
+                        } ${
+                          item.value === getCurrentPage()
+                            ? props.activeLinkClass || ""
+                            : ""
+                        }`.trim()}
+                        aria-current={
+                          item.value === getCurrentPage() ? "page" : undefined
+                        }
+                        data-active={
+                          item.value === getCurrentPage() ? "true" : "false"
+                        }
+                        data-size={props.size || "md"}
+                        onClick={(event) => {
+                          if (props.onPageChange) {
+                            props.onPageChange(Number(item.value));
+                          }
+                        }}
+                        style={{
+                          ...buildUiVars(props.linkStyle),
+                          ...(item.value === getCurrentPage()
+                            ? buildUiVars(props.activeLinkStyle)
+                            : {}),
+                        }}
+                      >
+                        {item.value}
+                      </button>
+                    ) : null}
+                  </li>
+                ))}
+              </>
+            ) : null}
+            <li className="ttdk-pagination-item">
+              <button
+                type="button"
+                aria-label="Go to next page"
+                className={`ttdk-pagination-link ttdk-pagination-next ${
+                  props.linkClass || ""
+                }`.trim()}
+                data-size={props.size || "md"}
+                data-disabled={!getCanNext() ? "true" : "false"}
+                disabled={!getCanNext()}
+                onClick={(event) => {
+                  if (props.onNextPage) {
+                    props.onNextPage();
+                  } else if (props.onPageChange) {
+                    props.onPageChange(
+                      Math.min(getTotalPages(), getCurrentPage() + 1)
+                    );
+                  }
+                }}
+                style={{
+                  ...buildUiVars(props.linkStyle),
+                }}
+              >
+                {!props.iconOnly ? (
+                  <span className="ttdk-pagination-next-text">
+                    {props.nextText || "Next"}
+                  </span>
+                ) : null}
+                {props.nextIcon ? <>{props.nextIcon}</> : null}
+                {!props.nextIcon ? (
+                  <svg
+                    className="ttdk-pagination-icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    aria-hidden="true"
+                  >
+                    <polyline points="9 18 15 12 9 6" />
+                  </svg>
+                ) : null}
+              </button>
+            </li>
+            {props.showEdges || Boolean(props.onLastPage) ? (
+              <li className="ttdk-pagination-item">
+                <button
+                  type="button"
+                  aria-label="Go to last page"
+                  className={`ttdk-pagination-link ttdk-pagination-last ${
+                    props.linkClass || ""
+                  }`.trim()}
+                  data-size={props.size || "md"}
+                  data-disabled={!getCanNext() ? "true" : "false"}
+                  disabled={!getCanNext()}
+                  onClick={(event) => {
+                    if (props.onLastPage) {
+                      props.onLastPage();
+                    } else if (props.onPageChange) {
+                      props.onPageChange(getTotalPages());
+                    }
+                  }}
+                  style={{
+                    ...buildUiVars(props.linkStyle),
+                  }}
+                >
+                  {props.lastIcon ? <>{props.lastIcon}</> : null}
+                  {!props.lastIcon ? (
+                    <svg
+                      className="ttdk-pagination-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      aria-hidden="true"
+                    >
+                      <polyline points="13 17 18 12 13 7" />
+                      <polyline points="6 17 11 12 6 7" />
+                    </svg>
+                  ) : null}
+                </button>
+              </li>
+            ) : null}
+          </ul>
+        </div>
+      ) : null}
+    </nav>
+  );
+}
+
+export default Pagination;
+
+export { Pagination };