@aegov/design-system-react/dist/components/Pagination/Pagination.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _zod = require("zod");
var _react2 = require("@phosphor-icons/react");
var _utils = require("../../utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const paginationSchema = _zod.z.object({
  currentPage: _zod.z.number().min(1),
  totalPages: _zod.z.number().min(1),
  onPageChange: _zod.z.function(),
  className: _zod.z.string().optional(),
  showFirstLast: _zod.z.boolean().optional()
});
function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  className,
  showFirstLast = false
}) {
  try {
    paginationSchema.parse({
      currentPage,
      totalPages,
      onPageChange,
      className,
      showFirstLast
    });
  } catch (error) {
    console.error('Pagination validation error:', error);
    return null;
  }
  const getPageNumbers = () => {
    const pages = [];
    const showEllipsis = totalPages > 7;
    if (showEllipsis) {
      if (currentPage <= 3) {
        // Show first 5 pages + ellipsis + last page
        for (let i = 1; i <= 5; i++) pages.push(i);
        pages.push('...');
        pages.push(totalPages);
      } else if (currentPage >= totalPages - 2) {
        // Show first page + ellipsis + last 5 pages
        pages.push(1);
        pages.push('...');
        for (let i = totalPages - 4; i <= totalPages; i++) pages.push(i);
      } else {
        // Show first page + ellipsis + current-1, current, current+1 + ellipsis + last page
        pages.push(1);
        pages.push('...');
        for (let i = currentPage - 1; i <= currentPage + 1; i++) pages.push(i);
        pages.push('...');
        pages.push(totalPages);
      }
    } else {
      // Show all pages if total pages <= 7
      for (let i = 1; i <= totalPages; i++) pages.push(i);
    }
    return pages;
  };
  const iconClasses = "h-5 w-5 rtl:-scale-x-100";
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _utils.cn)("flex items-center justify-center", className)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "flex w-full items-center justify-between sm:hidden"
  }, /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage - 1),
    disabled: currentPage === 1,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretLeft, {
    className: iconClasses
  }), /*#__PURE__*/_react.default.createElement("span", null, "Previous")), /*#__PURE__*/_react.default.createElement("span", {
    className: "text-sm"
  }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage + 1),
    disabled: currentPage === totalPages,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement("span", null, "Next"), /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
    className: iconClasses
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "hidden sm:flex sm:items-center sm:gap-1"
  }, showFirstLast && /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(1),
    disabled: currentPage === 1,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 hover:text-primary-600 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretDoubleLeft, {
    className: iconClasses
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "hidden lg:inline"
  }, "First")), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage - 1),
    disabled: currentPage === 1,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 hover:text-primary-600 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement(_react2.CaretLeft, {
    className: iconClasses
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "hidden lg:inline"
  }, "Previous")), /*#__PURE__*/_react.default.createElement("div", {
    className: "flex items-center gap-1"
  }, getPageNumbers().map((page, index) => page === '...' ? /*#__PURE__*/_react.default.createElement("span", {
    key: `ellipsis-${index}`,
    className: "px-2 text-gray-400"
  }, "...") : /*#__PURE__*/_react.default.createElement("button", {
    key: page,
    onClick: () => onPageChange(page),
    className: (0, _utils.cn)("inline-flex h-8 w-8 items-center justify-center rounded-full text-sm", currentPage === page ? "bg-primary-550 text-white" : "text-gray-700 hover:bg-primary-50 hover:text-primary-600")
  }, page))), /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(currentPage + 1),
    disabled: currentPage === totalPages,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 hover:text-primary-600 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "hidden lg:inline"
  }, "Next"), /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
    className: iconClasses
  })), showFirstLast && /*#__PURE__*/_react.default.createElement("button", {
    onClick: () => onPageChange(totalPages),
    disabled: currentPage === totalPages,
    className: "inline-flex items-center gap-2 px-2 py-1 text-gray-700 hover:text-primary-600 disabled:opacity-50"
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "hidden lg:inline"
  }, "Last"), /*#__PURE__*/_react.default.createElement(_react2.CaretDoubleRight, {
    className: iconClasses
  }))));
}
var _default = exports.default = Pagination;