@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/Pagination/Pagination.js

@@ -0,0 +1,420 @@
+/**
+ * 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.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, typeof as _typeof, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { Component } from 'react';
+import cx from 'classnames';
+import { CaretLeft, CaretRight } from '@carbon/icons-react';
+import Select from '../Select/Select.js';
+import SelectItem from '../SelectItem/SelectItem.js';
+import { equals } from '../../tools/array.js';
+import Button from '../Button/Button.js';
+import { PrefixContext } from '../../internal/usePrefix.js';
+
+var _excluded = ["backwardText", "className", "forwardText", "id", "itemsPerPageText", "itemRangeText", "pageRangeText", "pageSize", "pageSizes", "itemText", "pageText", "pageNumberText", "pagesUnknown", "isLastPage", "disabled", "pageInputDisabled", "pageSizeInputDisabled", "totalItems", "onChange", "page", "size", "forwardedRef"];
+var instanceId = 0;
+
+var mapPageSizesToObject = function mapPageSizesToObject(sizes) {
+  return _typeof(sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
+    return {
+      text: size,
+      value: size
+    };
+  });
+};
+
+var Pagination = /*#__PURE__*/function (_Component) {
+  _inherits(Pagination, _Component);
+
+  var _super = _createSuper(Pagination);
+
+  function Pagination(props) {
+    var _this;
+
+    _classCallCheck(this, Pagination);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleSizeChange", function (evt) {
+      var pageSize = Number(evt.target.value);
+
+      _this.setState({
+        pageSize: pageSize,
+        page: 1
+      });
+
+      _this.props.onChange({
+        page: 1,
+        pageSize: pageSize
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePageChange", function (evt) {
+      _this.setState({
+        page: evt.target.value
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePageInputChange", function (evt) {
+      var page = Number(evt.target.value);
+
+      if (page > 0 && page <= Math.max(Math.ceil(_this.props.totalItems / _this.state.pageSize), 1)) {
+        _this.setState({
+          page: page
+        });
+
+        _this.props.onChange({
+          page: page,
+          pageSize: _this.state.pageSize
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "incrementPage", function () {
+      var page = _this.state.page + 1;
+
+      _this.setState({
+        page: page
+      });
+
+      _this.props.onChange({
+        page: page,
+        pageSize: _this.state.pageSize
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "decrementPage", function () {
+      var page = _this.state.page - 1;
+
+      _this.setState({
+        page: page
+      });
+
+      _this.props.onChange({
+        page: page,
+        pageSize: _this.state.pageSize
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderSelectItems", function (total) {
+      var counter = 1;
+      var itemArr = [];
+
+      while (counter <= total) {
+        itemArr.push( /*#__PURE__*/React__default.createElement(SelectItem, {
+          key: counter,
+          value: counter,
+          text: String(counter)
+        }));
+        counter++;
+      }
+
+      return itemArr;
+    });
+
+    var _this$props = _this.props,
+        _pageSizes = _this$props.pageSizes,
+        _page = _this$props.page,
+        _pageSize = _this$props.pageSize;
+    var pageSizes = mapPageSizesToObject(_pageSizes);
+    _this.state = {
+      page: _page,
+      pageSize: _pageSize && pageSizes.some(function (sizeObj) {
+        return _pageSize === sizeObj.value;
+      }) ? _pageSize : pageSizes[0].value,
+      prevPageSizes: pageSizes,
+      prevPage: _page,
+      prevPageSize: _pageSize
+    };
+    _this.uniqueId = ++instanceId;
+    return _this;
+  }
+
+  _createClass(Pagination, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          backwardText = _this$props2.backwardText,
+          className = _this$props2.className,
+          forwardText = _this$props2.forwardText,
+          id = _this$props2.id,
+          itemsPerPageText = _this$props2.itemsPerPageText,
+          itemRangeText = _this$props2.itemRangeText,
+          pageRangeText = _this$props2.pageRangeText;
+          _this$props2.pageSize;
+          var _pageSizes = _this$props2.pageSizes,
+          itemText = _this$props2.itemText,
+          pageText = _this$props2.pageText;
+          _this$props2.pageNumberText;
+          var pagesUnknown = _this$props2.pagesUnknown,
+          isLastPage = _this$props2.isLastPage,
+          disabled = _this$props2.disabled,
+          pageInputDisabled = _this$props2.pageInputDisabled,
+          pageSizeInputDisabled = _this$props2.pageSizeInputDisabled,
+          totalItems = _this$props2.totalItems;
+          _this$props2.onChange;
+          _this$props2.page;
+          var size = _this$props2.size,
+          forwardedRef = _this$props2.forwardedRef,
+          other = _objectWithoutProperties(_this$props2, _excluded);
+
+      return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
+        var classNames = cx("".concat(prefix, "--pagination"), className, _defineProperty({}, "".concat(prefix, "--pagination--").concat(size), size));
+        var inputId = id || _this2.uniqueId;
+        var _this2$state = _this2.state,
+            statePage = _this2$state.page,
+            statePageSize = _this2$state.pageSize;
+        var totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1);
+        var backButtonDisabled = disabled || statePage === 1;
+        var backButtonClasses = cx("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--backward"), _defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled));
+        var forwardButtonDisabled = disabled || statePage === totalPages;
+        var forwardButtonClasses = cx("".concat(prefix, "--pagination__button"), "".concat(prefix, "--pagination__button--forward"), _defineProperty({}, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled));
+
+        var selectItems = _this2.renderSelectItems(totalPages);
+
+        var pageSizes = mapPageSizesToObject(_pageSizes);
+        return /*#__PURE__*/React__default.createElement("div", _extends({
+          className: classNames,
+          ref: forwardedRef
+        }, other), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(prefix, "--pagination__left")
+        }, /*#__PURE__*/React__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.createElement(Select, {
+          id: "".concat(prefix, "-pagination-select-").concat(inputId),
+          className: "".concat(prefix, "--select__item-count"),
+          labelText: "",
+          hideLabel: true,
+          noLabel: true,
+          inline: true,
+          onChange: _this2.handleSizeChange,
+          disabled: pageSizeInputDisabled || disabled,
+          value: statePageSize
+        }, pageSizes.map(function (sizeObj) {
+          return /*#__PURE__*/React__default.createElement(SelectItem, {
+            key: sizeObj.value,
+            value: sizeObj.value,
+            text: String(sizeObj.text)
+          });
+        })), /*#__PURE__*/React__default.createElement("span", {
+          className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
+        }, pagesUnknown ? itemText(statePageSize * (statePage - 1) + 1, statePage * statePageSize) : itemRangeText(Math.min(statePageSize * (statePage - 1) + 1, totalItems), Math.min(statePage * statePageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(prefix, "--pagination__right")
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          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: _this2.handlePageInputChange,
+          value: statePage,
+          disabled: pageInputDisabled || disabled
+        }, selectItems), /*#__PURE__*/React__default.createElement("span", {
+          className: "".concat(prefix, "--pagination__text")
+        }, pagesUnknown ? pageText(statePage) : pageRangeText(statePage, totalPages)), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(prefix, "--pagination__control-buttons")
+        }, /*#__PURE__*/React__default.createElement(Button, {
+          kind: "ghost",
+          className: backButtonClasses,
+          hasIconOnly: true,
+          renderIcon: CaretLeft,
+          iconDescription: backwardText,
+          tooltipAlignment: "center",
+          tooltipPosition: "top",
+          onClick: _this2.decrementPage,
+          disabled: backButtonDisabled
+        }), /*#__PURE__*/React__default.createElement(Button, {
+          kind: "ghost",
+          className: forwardButtonClasses,
+          hasIconOnly: true,
+          renderIcon: CaretRight,
+          iconDescription: forwardText,
+          tooltipAlignment: "end",
+          tooltipPosition: "top",
+          onClick: _this2.incrementPage,
+          disabled: forwardButtonDisabled || isLastPage
+        }))));
+      });
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref, state) {
+      var _pageSizes = _ref.pageSizes,
+          page = _ref.page,
+          pageSize = _ref.pageSize;
+      var prevPageSizes = state.prevPageSizes,
+          prevPage = state.prevPage,
+          prevPageSize = state.prevPageSize,
+          currentPage = state.page,
+          currentPageSize = state.pageSize;
+      var pageSizes = mapPageSizesToObject(_pageSizes);
+      var pageSizesValues = pageSizes.map(function (sizeObj) {
+        return sizeObj.value;
+      });
+      var prevPageSizesValues = prevPageSizes.map(function (sizeObj) {
+        return sizeObj.value;
+      });
+      var pageSizesChanged = !equals(pageSizesValues, prevPageSizesValues);
+
+      if (pageSizesChanged && !pageSizes.some(function (sizeObj) {
+        return pageSize === sizeObj.value;
+      })) {
+        pageSize = pageSizes[0].value;
+      }
+
+      var pageChanged = page !== prevPage;
+      var pageSizeChanged = pageSize !== prevPageSize;
+      return !pageSizesChanged && !pageChanged && !pageSizeChanged ? null : {
+        page: pageSizeChanged && 1 || pageChanged && page || currentPage,
+        pageSize: pageSizeChanged ? pageSize : currentPageSize,
+        prevPageSizes: pageSizes,
+        prevPage: page,
+        prevPageSize: pageSize
+      };
+    }
+  }]);
+
+  return Pagination;
+}(Component);
+
+_defineProperty(Pagination, "propTypes", {
+  /**
+   * The description for the backward icon.
+   */
+  backwardText: PropTypes.string,
+
+  /**
+   * The CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * `true` if the backward/forward buttons, as well as the page select elements,  should be disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * The description for the forward icon.
+   */
+  forwardText: PropTypes.string,
+
+  /**
+   * The unique ID of this component instance.
+   */
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  // TODO: remove when v9 is deprecated
+
+  /**
+   * `true` if the current page should be the last page.
+   */
+  isLastPage: PropTypes.bool,
+
+  /**
+   * The function returning a translatable text showing where the current page is,
+   * in a manner of the range of items.
+   */
+  itemRangeText: PropTypes.func,
+
+  /**
+   * A variant of `itemRangeText`, used if the total number of items is unknown.
+   */
+  itemText: PropTypes.func,
+
+  /**
+   * The translatable text indicating the number of items per page.
+   */
+  itemsPerPageText: PropTypes.string,
+
+  /**
+   * The callback function called when the current page changes.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * The current page.
+   */
+  page: PropTypes.number,
+
+  /**
+   * `true` if the select box to change the page should be disabled.
+   */
+  pageInputDisabled: PropTypes.bool,
+  pageNumberText: PropTypes.string,
+
+  /**
+   * A function returning PII showing where the current page is.
+   */
+  pageRangeText: PropTypes.func,
+
+  /**
+   * The number dictating how many items a page contains.
+   */
+  pageSize: PropTypes.number,
+
+  /**
+   * `true` if the select box to change the items per page should be disabled.
+   */
+  pageSizeInputDisabled: PropTypes.bool,
+
+  /**
+   * The choices for `pageSize`.
+   */
+  pageSizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.text,
+    value: PropTypes.number
+  }))]).isRequired,
+
+  /**
+   * The translatable text showing the current page.
+   */
+  pageText: PropTypes.func,
+
+  /**
+   * `true` if the total number of items is unknown.
+   */
+  pagesUnknown: PropTypes.bool,
+
+  /**
+   * Specify the size of the Pagination. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * The total number of items.
+   */
+  totalItems: PropTypes.number
+});
+
+_defineProperty(Pagination, "defaultProps", {
+  backwardText: 'Previous page',
+  itemRangeText: function itemRangeText(min, max, total) {
+    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
+  },
+  forwardText: 'Next page',
+  itemsPerPageText: 'Items per page:',
+  pageNumberText: 'Page Number',
+  pageRangeText: function pageRangeText(current, total) {
+    return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
+  },
+  disabled: false,
+  page: 1,
+  pagesUnknown: false,
+  isLastPage: false,
+  itemText: function itemText(min, max) {
+    return "".concat(min, "\u2013").concat(max, " items");
+  },
+  pageText: function pageText(page) {
+    return "page ".concat(page);
+  }
+});
+
+export { Pagination as default };

package/es/components/Pagination/experimental/PageSelector.js

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
+import Select from '../../Select/Select.js';
+import SelectItem from '../../SelectItem/SelectItem.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
+
+var _excluded = ["className", "currentPage", "id", "labelText", "totalPages"];
+var getInstanceId = setupGetInstanceId();
+
+function PageSelector(_ref) {
+  var className = _ref.className,
+      currentPage = _ref.currentPage,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      totalPages = _ref.totalPages,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var namespace = "".concat(prefix, "--unstable-pagination__page-selector");
+  var instanceId = "".concat(namespace, "__select-").concat(getInstanceId());
+
+  var renderPages = function renderPages(total) {
+    var pages = [];
+
+    for (var counter = 1; counter <= total; counter += 1) {
+      pages.push( /*#__PURE__*/React__default.createElement(SelectItem, {
+        key: counter,
+        value: counter,
+        text: String(counter)
+      }));
+    }
+
+    return pages;
+  };
+
+  return /*#__PURE__*/React__default.createElement(Select, _extends({
+    className: cx(namespace, className),
+    hideLabel: true,
+    id: instanceId || id,
+    inline: true,
+    labelText: labelText,
+    value: currentPage
+  }, other), renderPages(totalPages));
+}
+
+PageSelector.propTypes = {
+  /** Extra class names to add. */
+  className: PropTypes.string,
+
+  /** The current page. */
+  currentPage: PropTypes.number.isRequired,
+
+  /** The unique ID of this component instance. */
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Translatable string to label the page selector element. */
+  labelText: PropTypes.string,
+
+  /**
+   * Total number of pages.
+   * This value is calculated using a valid `totalItems` prop passed to the parent `Unstable_Pagination`.
+   */
+  totalPages: PropTypes.number.isRequired
+};
+PageSelector.defaultProps = {
+  className: null,
+  id: 1,
+  labelText: 'Current page number'
+};
+
+export { PageSelector as default };