@mirrormedia/lilith-draft-editor/lib/website/mirrortv/selector/pagination.js

## Installation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pagination = Pagination;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const PaginationWrapper = _styledComponents.default.div`
  display: flex;
  justify-content: end;
`;
const Arrows = _styledComponents.default.div`
  display: flex;
`;
const ArrowButtonWrapper = _styledComponents.default.a`
  color: #415269;
  cursor: pointer;
  ${({
  disable
}) => {
  if (disable) {
    return `
        pointer-events: none;
        opacity: 0.65;
        cursor: unset;
      `;
  }
}}
`;

function Pagination({
  currentPage,
  total,
  pageSize,
  onChange
}) {
  const minPage = 1;
  const limit = Math.ceil(total / pageSize);
  const nextPage = currentPage + 1;
  const prevPage = currentPage - 1; // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.

  if (total <= pageSize) return null;
  return /*#__PURE__*/_react.default.createElement(PaginationWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/_react.default.createElement(Arrows, null, /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
    onClick: () => {
      onChange(prevPage);
    },
    disable: prevPage < minPage
  }, /*#__PURE__*/_react.default.createElement("svg", {
    "aria-hidden": "true",
    focusable: "false",
    height: "24px",
    width: "24px",
    role: "img",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    className: "css-bztyua"
  }, /*#__PURE__*/_react.default.createElement("polyline", {
    points: "15 18 9 12 15 6"
  }), ' ')), /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
    onClick: () => {
      onChange(nextPage);
    },
    disable: nextPage > limit
  }, /*#__PURE__*/_react.default.createElement("svg", {
    "aria-hidden": "true",
    focusable: "false",
    height: "24px",
    width: "24px",
    role: "img",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
    className: "css-bztyua"
  }, /*#__PURE__*/_react.default.createElement("polyline", {
    points: "9 18 15 12 9 6"
  })))));
}