@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/Pagination/next/Pagination.js

@@ -0,0 +1,411 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var iconsReact = require('@carbon/icons-react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var Select = require('../../Select/Select.js');
+var SelectItem = require('../../SelectItem/SelectItem.js');
+var array = require('../../../tools/array.js');
+var useId = require('../../../internal/useId.js');
+var usePrefix = require('../../../internal/usePrefix.js');
+var index = require('../../IconButton/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _CaretLeft, _CaretRight;
+
+var _excluded = ["backwardText", "className", "disabled", "forwardText", "id", "isLastPage", "itemText", "itemRangeText", "itemsPerPageText", "onChange", "pageNumberText", "pageRangeText", "page", "pageInputDisabled", "pageSize", "pageSizeInputDisabled", "pageSizes", "pageText", "pagesUnknown", "size", "totalItems"];
+
+function mapPageSizesToObject(sizes) {
+  return _rollupPluginBabelHelpers["typeof"](sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
+    return {
+      text: size,
+      value: size
+    };
+  });
+}
+
+function renderSelectItems(total) {
+  var counter = 1;
+  var itemArr = [];
+
+  while (counter <= total) {
+    itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      key: counter,
+      value: counter,
+      text: String(counter)
+    }));
+    counter++;
+  }
+
+  return itemArr;
+}
+
+function getPageSize(pageSizes, pageSize) {
+  if (pageSize) {
+    var hasSize = pageSizes.find(function (size) {
+      return pageSize === size.value;
+    });
+
+    if (hasSize) {
+      return pageSize;
+    }
+  }
+
+  return pageSizes[0].value;
+}
+
+var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagination(_ref, ref) {
+  var _cx, _cx2, _cx3;
+
+  var _ref$backwardText = _ref.backwardText,
+      backwardText = _ref$backwardText === void 0 ? 'Previous page' : _ref$backwardText,
+      customClassName = _ref.className,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$forwardText = _ref.forwardText,
+      forwardText = _ref$forwardText === void 0 ? 'Next page' : _ref$forwardText,
+      id = _ref.id,
+      _ref$isLastPage = _ref.isLastPage,
+      isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
+      _ref$itemText = _ref.itemText,
+      itemText = _ref$itemText === void 0 ? function (min, max) {
+    return "".concat(min, "\u2013").concat(max, " items");
+  } : _ref$itemText,
+      _ref$itemRangeText = _ref.itemRangeText,
+      itemRangeText = _ref$itemRangeText === void 0 ? function (min, max, total) {
+    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
+  } : _ref$itemRangeText,
+      _ref$itemsPerPageText = _ref.itemsPerPageText,
+      itemsPerPageText = _ref$itemsPerPageText === void 0 ? 'Items per page:' : _ref$itemsPerPageText,
+      onChange = _ref.onChange;
+      _ref.pageNumberText;
+      var _ref$pageRangeText = _ref.pageRangeText,
+      pageRangeText = _ref$pageRangeText === void 0 ? function (_current, total) {
+    return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
+  } : _ref$pageRangeText,
+      _ref$page = _ref.page,
+      controlledPage = _ref$page === void 0 ? 1 : _ref$page,
+      pageInputDisabled = _ref.pageInputDisabled,
+      controlledPageSize = _ref.pageSize,
+      pageSizeInputDisabled = _ref.pageSizeInputDisabled,
+      controlledPageSizes = _ref.pageSizes,
+      _ref$pageText = _ref.pageText,
+      pageText = _ref$pageText === void 0 ? function (page) {
+    return "page ".concat(page);
+  } : _ref$pageText,
+      _ref$pagesUnknown = _ref.pagesUnknown,
+      pagesUnknown = _ref$pagesUnknown === void 0 ? false : _ref$pagesUnknown,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      totalItems = _ref.totalItems,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var inputId = useId.useFallbackId(id);
+
+  var _useState = React.useState(function () {
+    return mapPageSizesToObject(controlledPageSizes);
+  }),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      pageSizes = _useState2[0],
+      setPageSizes = _useState2[1];
+
+  var _useState3 = React.useState(controlledPageSizes),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevPageSizes = _useState4[0],
+      setPrevPageSizes = _useState4[1];
+
+  var _useState5 = React.useState(controlledPage),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      page = _useState6[0],
+      setPage = _useState6[1];
+
+  var _useState7 = React.useState(controlledPage),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      prevControlledPage = _useState8[0],
+      setPrevControlledPage = _useState8[1];
+
+  var _useState9 = React.useState(function () {
+    return getPageSize(pageSizes, controlledPageSize);
+  }),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      pageSize = _useState10[0],
+      setPageSize = _useState10[1];
+
+  var _useState11 = React.useState(controlledPageSize),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      prevControlledPageSize = _useState12[0],
+      setPrevControlledPageSize = _useState12[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  var backButtonDisabled = disabled || page === 1;
+  var backButtonClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--backward"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled), _cx2));
+  var forwardButtonDisabled = disabled || page === totalPages;
+  var forwardButtonClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--forward"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled), _cx3));
+  var selectItems = renderSelectItems(totalPages); // Sync state with props
+
+  if (controlledPage !== prevControlledPage) {
+    setPage(controlledPage);
+    setPrevControlledPage(controlledPage);
+  }
+
+  if (controlledPageSize !== prevControlledPageSize) {
+    setPageSize(getPageSize(pageSizes, controlledPageSize));
+    setPrevControlledPageSize(controlledPageSize);
+  }
+
+  if (!array.equals(controlledPageSizes, prevPageSizes)) {
+    var _pageSizes = mapPageSizesToObject(controlledPageSizes);
+
+    var hasPageSize = _pageSizes.find(function (size) {
+      return size.value === pageSize;
+    }); // Reset page to 1 if the current pageSize is not included in the new page
+    // sizes
+
+
+    if (!hasPageSize) {
+      setPage(1);
+    }
+
+    setPageSizes(_pageSizes);
+    setPrevPageSizes(controlledPageSizes);
+  }
+
+  function handleSizeChange(event) {
+    var pageSize = Number(event.target.value);
+    var changes = {
+      pageSize: pageSize,
+      page: 1
+    };
+    setPage(changes.page);
+    setPageSize(changes.pageSize);
+
+    if (onChange) {
+      onChange(changes);
+    }
+  }
+
+  function handlePageInputChange(event) {
+    var page = Number(event.target.value);
+
+    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+      setPage(page);
+
+      if (onChange) {
+        onChange({
+          page: page,
+          pageSize: pageSize
+        });
+      }
+    }
+  }
+
+  function incrementPage() {
+    var nextPage = page + 1;
+    setPage(nextPage);
+
+    if (onChange) {
+      onChange({
+        page: nextPage,
+        pageSize: pageSize
+      });
+    }
+  }
+
+  function decrementPage() {
+    var nextPage = page - 1;
+    setPage(nextPage);
+
+    if (onChange) {
+      onChange({
+        page: nextPage,
+        pageSize: pageSize
+      });
+    }
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__left")
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
+    className: "".concat(prefix, "--pagination__text"),
+    htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
+  }, itemsPerPageText), /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId),
+    className: "".concat(prefix, "--select__item-count"),
+    labelText: "",
+    hideLabel: true,
+    noLabel: true,
+    inline: true,
+    onChange: handleSizeChange,
+    disabled: pageSizeInputDisabled || disabled,
+    value: pageSize
+  }, pageSizes.map(function (sizeObj) {
+    return /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      key: sizeObj.value,
+      value: sizeObj.value,
+      text: String(sizeObj.text)
+    });
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
+  }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__right")
+  }, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
+    className: "".concat(prefix, "--select__page-number"),
+    labelText: "Page number, of ".concat(totalPages, " pages"),
+    inline: true,
+    hideLabel: true,
+    onChange: handlePageInputChange,
+    value: page,
+    disabled: pageInputDisabled || disabled
+  }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--pagination__text")
+  }, pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--pagination__control-buttons")
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top",
+    disabled: backButtonDisabled,
+    kind: "ghost",
+    className: backButtonClasses,
+    label: backwardText,
+    onClick: decrementPage
+  }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top-right",
+    disabled: forwardButtonDisabled || isLastPage,
+    kind: "ghost",
+    className: forwardButtonClasses,
+    label: forwardText,
+    onClick: incrementPage
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null))))));
+});
+Pagination.propTypes = {
+  /**
+   * The description for the backward icon.
+   */
+  backwardText: PropTypes__default["default"].string,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * `true` if the backward/forward buttons, as well as the page select elements,  should be disabled.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * The description for the forward icon.
+   */
+  forwardText: PropTypes__default["default"].string,
+
+  /**
+   * The unique ID of this component instance.
+   */
+  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  // TODO: remove when v9 is deprecated
+
+  /**
+   * `true` if the current page should be the last page.
+   */
+  isLastPage: PropTypes__default["default"].bool,
+
+  /**
+   * The function returning a translatable text showing where the current page is,
+   * in a manner of the range of items.
+   */
+  itemRangeText: PropTypes__default["default"].func,
+
+  /**
+   * A variant of `itemRangeText`, used if the total number of items is unknown.
+   */
+  itemText: PropTypes__default["default"].func,
+
+  /**
+   * The translatable text indicating the number of items per page.
+   */
+  itemsPerPageText: PropTypes__default["default"].string,
+
+  /**
+   * The callback function called when the current page changes.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * The current page.
+   */
+  page: PropTypes__default["default"].number,
+
+  /**
+   * `true` if the select box to change the page should be disabled.
+   */
+  pageInputDisabled: PropTypes__default["default"].bool,
+  pageNumberText: PropTypes__default["default"].string,
+
+  /**
+   * A function returning PII showing where the current page is.
+   */
+  pageRangeText: PropTypes__default["default"].func,
+
+  /**
+   * The number dictating how many items a page contains.
+   */
+  pageSize: PropTypes__default["default"].number,
+
+  /**
+   * `true` if the select box to change the items per page should be disabled.
+   */
+  pageSizeInputDisabled: PropTypes__default["default"].bool,
+
+  /**
+   * The choices for `pageSize`.
+   */
+  pageSizes: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    text: PropTypes__default["default"].text,
+    value: PropTypes__default["default"].number
+  }))]).isRequired,
+
+  /**
+   * The translatable text showing the current page.
+   */
+  pageText: PropTypes__default["default"].func,
+
+  /**
+   * `true` if the total number of items is unknown.
+   */
+  pagesUnknown: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the size of the Pagination.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * The total number of items.
+   */
+  totalItems: PropTypes__default["default"].number
+};
+var PaginationNext = Pagination;
+
+exports["default"] = PaginationNext;