@carbon/react 0.17.0 → 1.0.1

package/lib/components/Pagination/experimental/Pagination.js

@@ -0,0 +1,310 @@
+/**
+ * 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 React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var Button = require('../../Button/Button.js');
+var Select = require('../../Select/Select.js');
+var SelectItem = require('../../SelectItem/SelectItem.js');
+var index = require('../../IconButton/index.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var usePrefix = require('../../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _CaretLeft, _CaretRight;
+
+var _excluded = ["backwardText", "children", "className", "disabled", "forwardText", "id", "initialPage", "itemsPerPageText", "itemRangeText", "itemText", "onChange", "pageRangeText", "pageSize", "pageSizes", "pageText", "pagesUnknown", "totalItems"];
+
+function Pagination(_ref) {
+  var backwardText = _ref.backwardText,
+      children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      forwardText = _ref.forwardText,
+      id = _ref.id,
+      initialPage = _ref.initialPage,
+      itemsPerPageText = _ref.itemsPerPageText,
+      itemRangeText = _ref.itemRangeText,
+      itemText = _ref.itemText,
+      onChange = _ref.onChange,
+      pageRangeText = _ref.pageRangeText,
+      pageSize = _ref.pageSize,
+      pageSizes = _ref.pageSizes,
+      pageText = _ref.pageText,
+      pagesUnknown = _ref.pagesUnknown,
+      totalItems = _ref.totalItems,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(initialPage),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      currentPage = _useState2[0],
+      setCurrentPage = _useState2[1];
+
+  var _useState3 = React.useState(pageSize),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      currentPageSize = _useState4[0],
+      setCurrentPageSize = _useState4[1];
+
+  var prefix = usePrefix.usePrefix();
+  var totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : undefined;
+  var backButtonDisabled = disabled || currentPage === 1;
+  var forwardButtonDisabled = disabled || currentPage === totalPages;
+
+  function onSetPage(newPage) {
+    setCurrentPage(Number(newPage));
+  }
+
+  function incrementPage() {
+    var page = currentPage + 1;
+    setCurrentPage(page);
+    onChange({
+      page: page,
+      pageSize: currentPageSize
+    });
+  }
+
+  function decrementPage() {
+    var page = currentPage - 1;
+    setCurrentPage(page);
+    onChange({
+      page: page,
+      pageSize: currentPageSize
+    });
+  }
+
+  var namespace = "".concat(prefix, "--unstable-pagination");
+  return /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"](namespace, className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(namespace, "__left")
+  }, pageSizes && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", {
+    id: "".concat(namespace, "__page-sizer__counter-").concat(id),
+    className: "".concat(namespace, "__text"),
+    htmlFor: "".concat(namespace, "__page-sizer__input-").concat(id)
+  }, itemsPerPageText), /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    id: "".concat(namespace, "__page-sizer__input-").concat(id),
+    className: "".concat(namespace, "__page-sizer"),
+    labelText: "",
+    hideLabel: true,
+    noLabel: true,
+    inline: true,
+    onChange: function onChange(event) {
+      return setCurrentPageSize(Number(event.target.value));
+    },
+    value: currentPageSize
+  }, pageSizes.map(function (size) {
+    return /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+      key: size,
+      value: size,
+      text: String(size)
+    });
+  }))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(namespace, "__text")
+  }, totalItems && !pagesUnknown && itemRangeText(Math.min(currentPageSize * (currentPage - 1) + 1, totalItems), Math.min(currentPage * currentPageSize, totalItems), totalItems), totalItems && pagesUnknown && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize), !totalItems && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(namespace, "__right")
+  }, children && totalItems && children({
+    currentPage: currentPage,
+    currentPageSize: currentPageSize,
+    onSetPage: onSetPage,
+    totalPages: totalPages
+  }), children && totalItems && !pagesUnknown && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(namespace, "__text")
+  }, pageRangeText('', totalPages)), children && !totalItems && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(namespace, "__text")
+  }, pageText(currentPage)), !children && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(namespace, "__text")
+  }, !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)), FeatureFlags__namespace.enabled('enable-v11-release') ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top",
+    disabled: backButtonDisabled,
+    kind: "ghost",
+    className: cx__default["default"]("".concat(namespace, "__button"), "".concat(namespace, "__button--backward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(namespace, "__button--no-index"), backButtonDisabled)),
+    label: backwardText,
+    onClick: function onClick() {
+      return decrementPage();
+    }
+  }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    align: "top-right",
+    disabled: forwardButtonDisabled,
+    kind: "ghost",
+    className: cx__default["default"]("".concat(namespace, "__button"), "".concat(namespace, "__button--forward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(namespace, "__button--no-index"), forwardButtonDisabled)),
+    label: forwardText,
+    onClick: function onClick() {
+      return incrementPage();
+    }
+  }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    className: cx__default["default"]("".concat(namespace, "__button"), "".concat(namespace, "__button--backward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(namespace, "__button--no-index"), backButtonDisabled)),
+    onClick: function onClick() {
+      return decrementPage();
+    },
+    disabled: backButtonDisabled,
+    hasIconOnly: true,
+    renderIcon: iconsReact.CaretLeft,
+    tooltipAlignment: "center",
+    tooltipPosition: "top",
+    iconDescription: backwardText
+  }), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
+    className: cx__default["default"]("".concat(namespace, "__button"), "".concat(namespace, "__button--forward"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(namespace, "__button--no-index"), forwardButtonDisabled)),
+    onClick: function onClick() {
+      return incrementPage();
+    },
+    disabled: forwardButtonDisabled,
+    hasIconOnly: true,
+    renderIcon: iconsReact.CaretRight,
+    tooltipAlignment: "center",
+    tooltipPosition: "top",
+    iconDescription: forwardText
+  }))));
+}
+
+Pagination.propTypes = {
+  /**
+   * The description for the backward icon.
+   */
+  backwardText: PropTypes__default["default"].string,
+
+  /**
+   * The children of the pagination component.
+   */
+  children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
+
+  /**
+   * Extra classes to add.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * `true` if the backward/forward buttons 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]),
+
+  /**
+   * The initial active page when the component is first mounted.
+   */
+  initialPage: PropTypes__default["default"].number,
+
+  /**
+   * 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 function returning a translatable text showing where the current page is,
+   * in a manner of the total number of pages.
+   */
+  pageRangeText: PropTypes__default["default"].func,
+
+  /**
+   * The number dictating how many items a page contains.
+   */
+  pageSize: PropTypes__default["default"].number,
+
+  /**
+   * The choices for `pageSize`.
+   */
+  pageSizes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
+
+  /**
+   * The translatable text showing the current page.
+   */
+  pageText: PropTypes__default["default"].func,
+
+  /**
+   * `true` if total number of pages is unknown.
+   */
+  pagesUnknown: PropTypes__default["default"].bool,
+
+  /**
+   * The total number of items.
+   * You need to provide total items to calculate total page,
+   * which is required by a child like the `PageSelector`
+   * to know how many pages to display.
+   */
+  totalItems: PropTypes__default["default"].number
+};
+Pagination.defaultProps = {
+  backwardText: 'Previous page',
+  className: null,
+  children: undefined,
+  disabled: false,
+  forwardText: 'Next page',
+  id: 1,
+  itemsPerPageText: 'Items per page:',
+  itemRangeText: function itemRangeText(min, max, total) {
+    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
+  },
+  itemText: function itemText(min, max) {
+    return "".concat(min, "\u2013").concat(max, " items");
+  },
+  initialPage: 1,
+  pageRangeText: function pageRangeText(current, total) {
+    return "".concat(current, " of ").concat(total, " pages");
+  },
+  pageSize: 10,
+  pageSizes: undefined,
+  pageText: function pageText(page) {
+    return "page ".concat(page);
+  },
+  pagesUnknown: false,
+  totalItems: undefined
+};
+
+exports["default"] = Pagination;

package/lib/components/Pagination/index.js

@@ -0,0 +1,38 @@
+/**
+ * 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 FeatureFlags = require('@carbon/feature-flags');
+var Pagination$1 = require('./Pagination.js');
+var Pagination = require('./next/Pagination.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var index = FeatureFlags__namespace.enabled('enable-v11-release') ? Pagination["default"] : Pagination$1["default"];
+
+exports["default"] = index;