@shopify/polaris/dist/esm/components/Pagination/Pagination.js

Shopify’s product component library

import React$1, { createRef } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { ChevronLeftMinor, ChevronRightMinor, ArrowLeftMinor, ArrowRightMinor } from '@shopify/polaris-icons';
import { handleMouseUpByBlurring } from '../../utilities/focus.js';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { ConditionalWrapper } from '../../utilities/components.js';
import { KeypressListener as KeypressListener$1 } from '../KeypressListener/KeypressListener.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';
import { TextStyle as TextStyle$1 } from '../TextStyle/TextStyle.js';
import { Button as Button$1 } from '../Button/Button.js';
import { ButtonGroup as ButtonGroup$1 } from '../ButtonGroup/ButtonGroup.js';
import { isInputFocused as isInputFocused$1 } from '../../utilities/is-input-focused.js';
import { Tooltip as Tooltip$1 } from '../Tooltip/Tooltip.js';
import styles from './Pagination.scss.js';

var _ref = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: ArrowLeftMinor
});

var _ref2 = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: ArrowLeftMinor
});

var _ref3 = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: ArrowRightMinor
});

var _ref4 = /*#__PURE__*/React$1.createElement(Icon$1, {
  source: ArrowRightMinor
});

function Pagination({
  hasNext,
  hasPrevious,
  nextURL,
  previousURL,
  onNext,
  onPrevious,
  nextTooltip,
  previousTooltip,
  nextKeys,
  previousKeys,
  plain,
  accessibilityLabel,
  label
}) {
  var i18n = useI18n();
  var {
    newDesignLanguage
  } = useFeatures();
  var node = /*#__PURE__*/createRef();
  var navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
  var className = classNames(styles.Pagination, plain && styles.plain);
  var previousClassName = classNames(styles.Button, !label && styles.PreviousButton);
  var nextClassName = classNames(styles.Button, !label && styles.NextButton);
  var previousButton = previousURL ? /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
    className: previousClassName,
    url: previousURL,
    onMouseUp: handleMouseUpByBlurring,
    "aria-label": i18n.translate('Polaris.Pagination.previous'),
    id: "previousURL"
  }, _ref) : /*#__PURE__*/React$1.createElement("button", {
    onClick: onPrevious,
    type: "button",
    onMouseUp: handleMouseUpByBlurring,
    className: previousClassName,
    "aria-label": i18n.translate('Polaris.Pagination.previous'),
    disabled: !hasPrevious
  }, _ref2);
  var nextButton = nextURL ? /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
    className: nextClassName,
    url: nextURL,
    onMouseUp: handleMouseUpByBlurring,
    "aria-label": i18n.translate('Polaris.Pagination.next'),
    id: "nextURL"
  }, _ref3) : /*#__PURE__*/React$1.createElement("button", {
    onClick: onNext,
    type: "button",
    onMouseUp: handleMouseUpByBlurring,
    className: nextClassName,
    "aria-label": i18n.translate('Polaris.Pagination.next'),
    disabled: !hasNext
  }, _ref4);
  var prev = newDesignLanguage ? /*#__PURE__*/React$1.createElement(Button$1, {
    outline: true,
    icon: ChevronLeftMinor,
    accessibilityLabel: i18n.translate('Polaris.Pagination.previous'),
    url: previousURL,
    onClick: onPrevious,
    disabled: !hasPrevious
  }) : previousButton;
  var constructedPrevious = previousTooltip && hasPrevious ? /*#__PURE__*/React$1.createElement(Tooltip$1, {
    activatorWrapper: "span",
    content: previousTooltip
  }, prev) : prev;
  var next = newDesignLanguage ? /*#__PURE__*/React$1.createElement(Button$1, {
    outline: true,
    icon: ChevronRightMinor,
    accessibilityLabel: i18n.translate('Polaris.Pagination.next'),
    url: nextURL,
    onClick: onNext,
    disabled: !hasNext
  }) : nextButton;
  var constructedNext = nextTooltip && hasNext ? /*#__PURE__*/React$1.createElement(Tooltip$1, {
    activatorWrapper: "span",
    content: nextTooltip
  }, next) : next;
  var previousHandler = onPrevious || noop;
  var previousButtonEvents = previousKeys && (previousURL || onPrevious) && hasPrevious && previousKeys.map(key => /*#__PURE__*/React$1.createElement(KeypressListener$1, {
    key: key,
    keyCode: key,
    handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(previousHandler)
  }));
  var nextHandler = onNext || noop;
  var nextButtonEvents = nextKeys && (nextURL || onNext) && hasNext && nextKeys.map(key => /*#__PURE__*/React$1.createElement(KeypressListener$1, {
    key: key,
    keyCode: key,
    handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(nextHandler)
  }));
  var labelTextMarkup = hasNext && hasPrevious ? /*#__PURE__*/React$1.createElement(TextStyle$1, null, label) : /*#__PURE__*/React$1.createElement(TextStyle$1, {
    variation: "subdued"
  }, label);
  var labelMarkup = label ? /*#__PURE__*/React$1.createElement("div", {
    className: newDesignLanguage ? undefined : styles.Label,
    "aria-live": "polite"
  }, labelTextMarkup) : null;
  return /*#__PURE__*/React$1.createElement("nav", {
    className: newDesignLanguage ? undefined : className,
    "aria-label": navLabel,
    ref: node
  }, previousButtonEvents, nextButtonEvents, /*#__PURE__*/React$1.createElement(ConditionalWrapper, {
    condition: Boolean(newDesignLanguage),
    wrapper: children => /*#__PURE__*/React$1.createElement(ButtonGroup$1, {
      segmented: !label
    }, children)
  }, constructedPrevious, labelMarkup, constructedNext));
}

function clickPaginationLink(id, node) {
  return () => {
    if (node.current == null) {
      return;
    }

    var link = node.current.querySelector("#".concat(id));

    if (link) {
      link.click();
    }
  };
}

function handleCallback(fn) {
  return () => {
    if (isInputFocused$1()) {
      return;
    }

    fn();
  };
}

function noop() {}

export { Pagination };