@kiwicom/orbit-components/es/Pagination/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import useMediaQuery from "../hooks/useMediaQuery";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import ChevronLeft from "../icons/ChevronLeft";
import ChevronRight from "../icons/ChevronRight";
import { MAXIMUM_PAGES, SIZES } from "./consts";
import Pages from "./components/Pages";
import CompactPages from "./components/CompactPages";
import ActiveButton from "./components/ActiveButton";
import Translate from "../Translate";
import useTranslate from "../hooks/useTranslate";

const handlePageChange = (onPageChange, pageCount) => nextPageIndex => {
  if (onPageChange && nextPageIndex <= pageCount && nextPageIndex >= 0) {
    onPageChange(nextPageIndex);
  }
};

const Pagination = ({
  pageCount,
  selectedPage = 1,
  onPageChange,
  dataTest,
  hideLabels = true,
  size = SIZES.NORMAL
}) => {
  const pageChanged = handlePageChange(onPageChange, pageCount);
  const {
    isTablet
  } = useMediaQuery();
  const translate = useTranslate();
  return /*#__PURE__*/React.createElement(Stack, {
    spacing: "XXSmall",
    align: "center",
    grow: false,
    shrink: true,
    dataTest: dataTest,
    basis: "auto"
  }, !isTablet ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: () => pageChanged(selectedPage - 1),
    iconLeft: /*#__PURE__*/React.createElement(ChevronLeft, null),
    type: "secondary",
    title: translate("pagination_label_prev"),
    size: size,
    disabled: selectedPage <= 1
  }), /*#__PURE__*/React.createElement(ActiveButton, {
    transparent: true,
    size: size
  }, selectedPage, " of ", pageCount), /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: () => pageChanged(selectedPage + 1),
    iconLeft: /*#__PURE__*/React.createElement(ChevronRight, null),
    type: "secondary",
    title: translate("pagination_label_next"),
    size: size,
    disabled: pageCount <= selectedPage
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: () => pageChanged(selectedPage - 1),
    iconLeft: /*#__PURE__*/React.createElement(ChevronLeft, null),
    type: "secondary",
    title: hideLabels ? translate("pagination_label_prev") : undefined,
    size: size,
    disabled: selectedPage <= 1
  }, !hideLabels && /*#__PURE__*/React.createElement(Translate, {
    tKey: "pagination_label_prev"
  })), /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    grow: false,
    spacing: "XXSmall",
    align: "center"
  }, pageCount <= MAXIMUM_PAGES ? /*#__PURE__*/React.createElement(Pages, {
    pageCount: pageCount,
    selectedPage: selectedPage,
    onPageChange: onPageChange,
    size: size
  }) : /*#__PURE__*/React.createElement(CompactPages, {
    pageCount: pageCount,
    selectedPage: selectedPage,
    onPageChange: onPageChange,
    size: size
  })), /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: () => pageChanged(selectedPage + 1),
    iconRight: !hideLabels && /*#__PURE__*/React.createElement(ChevronRight, null),
    iconLeft: hideLabels && /*#__PURE__*/React.createElement(ChevronRight, null),
    type: "secondary",
    title: hideLabels ? translate("pagination_label_next") : undefined,
    size: size,
    disabled: pageCount <= selectedPage
  }, !hideLabels && /*#__PURE__*/React.createElement(Translate, {
    tKey: "pagination_label_next"
  }))));
};

export default Pagination;