@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 styled from "styled-components";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import Hide from "../Hide";
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";

var handlePageChange = function handlePageChange(onPageChange, pageCount) {
  return function (nextPageIndex) {
    if (onPageChange && nextPageIndex <= pageCount && nextPageIndex >= 0) {
      onPageChange(nextPageIndex);
    }
  };
}; // Fix this with updated stack


var StyledNav = styled.nav.withConfig({
  displayName: "Pagination__StyledNav",
  componentId: "n5hqxf-0"
})(["width:auto;"]);

var Pagination = function Pagination(_ref) {
  var pageCount = _ref.pageCount,
      _ref$selectedPage = _ref.selectedPage,
      selectedPage = _ref$selectedPage === void 0 ? 1 : _ref$selectedPage,
      onPageChange = _ref.onPageChange,
      dataTest = _ref.dataTest,
      _ref$hideLabels = _ref.hideLabels,
      hideLabels = _ref$hideLabels === void 0 ? true : _ref$hideLabels,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? SIZES.NORMAL : _ref$size;
  var pageChanged = handlePageChange(onPageChange, pageCount);
  return /*#__PURE__*/React.createElement(Stack, {
    direction: "row",
    spacing: "tight",
    align: "center",
    grow: false,
    shrink: true,
    dataTest: dataTest,
    as: StyledNav
  }, /*#__PURE__*/React.createElement(Hide, {
    on: ["smallMobile", "mediumMobile", "largeMobile"]
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: function onClick() {
      return pageChanged(selectedPage - 1);
    },
    iconLeft: /*#__PURE__*/React.createElement(ChevronLeft, null),
    type: "secondary",
    size: size,
    disabled: selectedPage <= 1
  }, !hideLabels && /*#__PURE__*/React.createElement(Translate, {
    tKey: "pagination_label_prev"
  }))), /*#__PURE__*/React.createElement(Hide, {
    on: ["tablet", "desktop", "largeDesktop"]
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: function onClick() {
      return pageChanged(selectedPage - 1);
    },
    iconLeft: /*#__PURE__*/React.createElement(ChevronLeft, null),
    type: "secondary",
    size: size,
    disabled: selectedPage <= 1
  })), /*#__PURE__*/React.createElement(Hide, {
    on: ["smallMobile", "mediumMobile", "largeMobile"]
  }, /*#__PURE__*/React.createElement(Stack, {
    direction: "row",
    spacing: "tight",
    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(Hide, {
    on: ["tablet", "desktop", "largeDesktop"]
  }, /*#__PURE__*/React.createElement(ActiveButton, {
    transparent: true,
    size: size
  }, selectedPage, " of ", pageCount)), /*#__PURE__*/React.createElement(Hide, {
    on: ["smallMobile", "mediumMobile", "largeMobile"]
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: function onClick() {
      return pageChanged(selectedPage + 1);
    },
    iconRight: !hideLabels && /*#__PURE__*/React.createElement(ChevronRight, null),
    iconLeft: hideLabels && /*#__PURE__*/React.createElement(ChevronRight, null),
    type: "secondary",
    size: size,
    disabled: pageCount <= selectedPage
  }, !hideLabels && /*#__PURE__*/React.createElement(Translate, {
    tKey: "pagination_label_next"
  }))), /*#__PURE__*/React.createElement(Hide, {
    on: ["tablet", "desktop", "largeDesktop"]
  }, /*#__PURE__*/React.createElement(ButtonLink, {
    onClick: function onClick() {
      return pageChanged(selectedPage + 1);
    },
    iconLeft: /*#__PURE__*/React.createElement(ChevronRight, null),
    type: "secondary",
    size: size,
    disabled: pageCount <= selectedPage
  })));
};

export default Pagination;