@canonical/react-components 0.35.0 → 0.36.0

package/dist/components/MainTable/MainTable.js

@@ -19,6 +19,8 @@ var _TableHeader = _interopRequireDefault(require("../TableHeader"));
 
 var _TableCell = _interopRequireDefault(require("../TableCell"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["content", "sortKey"],
     _excluded2 = ["columns", "expanded", "expandedContent", "key", "sortData"],
     _excluded3 = ["content"],
@@ -102,10 +104,59 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
   })));
 };
 
-var generateRows = function generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction) {
-  // If the table has no rows, return empty state message
-  if (Object.entries(rows).length === 0 && emptyStateMsg) {
-    return /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg);
+var generateRows = function generateRows(_ref2) {
+  var rows = _ref2.rows,
+      headers = _ref2.headers,
+      responsive = _ref2.responsive,
+      expanding = _ref2.expanding;
+  return rows.map(function (_ref3, index) {
+    var columns = _ref3.columns,
+        expanded = _ref3.expanded,
+        expandedContent = _ref3.expandedContent,
+        key = _ref3.key,
+        sortData = _ref3.sortData,
+        rowProps = _objectWithoutProperties(_ref3, _excluded2);
+
+    var cellItems = columns === null || columns === void 0 ? void 0 : columns.map(function (_ref4, index) {
+      var content = _ref4.content,
+          cellProps = _objectWithoutProperties(_ref4, _excluded3);
+
+      var headerContent = headers && headers[index]["content"];
+      var headerReplacement = headers && headers[index]["heading"];
+
+      if (responsive) {
+        cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
+        key: index
+      }, cellProps), content);
+    }); // if key was not provided as a prop, use row's index instead
+
+    if (key === null || typeof key === "undefined") {
+      key = index;
+    } // The expanding cell is alway created to match the correct number of
+    // table cells in rows that do have expanding content.
+
+
+    return /*#__PURE__*/_react.default.createElement(_TableRow.default, _extends({
+      key: key
+    }, rowProps), cellItems, expanding && /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+      expanding: true,
+      hidden: !expanded
+    }, expandedContent));
+  });
+};
+
+var sortRows = function sortRows(_ref5) {
+  var currentSortDirection = _ref5.currentSortDirection,
+      currentSortKey = _ref5.currentSortKey,
+      rows = _ref5.rows,
+      sortable = _ref5.sortable,
+      sortFunction = _ref5.sortFunction;
+
+  if (!rows) {
+    return [];
   } // Clone the rows so we can restore the original order.
 
 
@@ -133,74 +184,23 @@ var generateRows = function generateRows(currentSortDirection, currentSortKey, e
     });
   }
 
-  var slicedRows = sortedRows;
-
-  if (paginate) {
-    var startIndex = (currentPage - 1) * paginate;
-
-    if (startIndex > rows.length) {
-      // If the rows have changed e.g. when filtering and the user is on a page
-      // that no longer exists then send them to the start.
-      setCurrentPage(1);
-    }
-
-    slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
-  }
-
-  var rowItems = slicedRows.map(function (_ref2, index) {
-    var columns = _ref2.columns,
-        expanded = _ref2.expanded,
-        expandedContent = _ref2.expandedContent,
-        key = _ref2.key,
-        sortData = _ref2.sortData,
-        rowProps = _objectWithoutProperties(_ref2, _excluded2);
-
-    var cellItems = columns.map(function (_ref3, index) {
-      var content = _ref3.content,
-          cellProps = _objectWithoutProperties(_ref3, _excluded3);
-
-      var headerContent = headers && headers[index]["content"];
-      var headerReplacement = headers && headers[index]["heading"];
-
-      if (responsive) {
-        cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
-        key: index
-      }, cellProps), content);
-    }); // if key was not provided as a prop, use row's index instead
-
-    if (key === null || typeof key === "undefined") {
-      key = index;
-    } // The expanding cell is alway created to match the correct number of
-    // table cells in rows that do have expanding content.
-
-
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, _extends({
-      key: key
-    }, rowProps), cellItems, expanding && /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      expanding: true,
-      hidden: !expanded
-    }, expandedContent));
-  });
-  return /*#__PURE__*/_react.default.createElement("tbody", null, rowItems);
+  return sortedRows;
 };
 
-var MainTable = function MainTable(_ref4) {
-  var defaultSort = _ref4.defaultSort,
-      defaultSortDirection = _ref4.defaultSortDirection,
-      _ref4$emptyStateMsg = _ref4.emptyStateMsg,
-      emptyStateMsg = _ref4$emptyStateMsg === void 0 ? "" : _ref4$emptyStateMsg,
-      expanding = _ref4.expanding,
-      headers = _ref4.headers,
-      onUpdateSort = _ref4.onUpdateSort,
-      paginate = _ref4.paginate,
-      rows = _ref4.rows,
-      responsive = _ref4.responsive,
-      sortable = _ref4.sortable,
-      sortFunction = _ref4.sortFunction,
-      props = _objectWithoutProperties(_ref4, _excluded4);
+var MainTable = function MainTable(_ref6) {
+  var defaultSort = _ref6.defaultSort,
+      defaultSortDirection = _ref6.defaultSortDirection,
+      _ref6$emptyStateMsg = _ref6.emptyStateMsg,
+      emptyStateMsg = _ref6$emptyStateMsg === void 0 ? "" : _ref6$emptyStateMsg,
+      expanding = _ref6.expanding,
+      headers = _ref6.headers,
+      onUpdateSort = _ref6.onUpdateSort,
+      paginate = _ref6.paginate,
+      rows = _ref6.rows,
+      responsive = _ref6.responsive,
+      sortable = _ref6.sortable,
+      sortFunction = _ref6.sortFunction,
+      props = _objectWithoutProperties(_ref6, _excluded4);
 
   var _useState = (0, _react.useState)(defaultSort),
       _useState2 = _slicedToArray(_useState, 2),
@@ -210,12 +210,7 @@ var MainTable = function MainTable(_ref4) {
   var _useState3 = (0, _react.useState)(defaultSortDirection),
       _useState4 = _slicedToArray(_useState3, 2),
       currentSortDirection = _useState4[0],
-      setSortDirection = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(1),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentPage = _useState6[0],
-      setCurrentPage = _useState6[1]; // Update the current sort state if the prop changes.
+      setSortDirection = _useState4[1]; // Update the current sort state if the prop changes.
 
 
   (0, _react.useEffect)(function () {
@@ -231,10 +226,34 @@ var MainTable = function MainTable(_ref4) {
     onUpdateSort && onUpdateSort(newSort);
   };
 
+  var sortedRows = (0, _react.useMemo)(function () {
+    return sortRows({
+      currentSortDirection: currentSortDirection,
+      currentSortKey: currentSortKey,
+      rows: rows,
+      sortable: sortable,
+      sortFunction: sortFunction
+    });
+  }, [currentSortDirection, currentSortKey, rows, sortable, sortFunction]);
+
+  var _usePagination = (0, _hooks.usePagination)(sortedRows, {
+    itemsPerPage: paginate,
+    autoResetPage: true
+  }),
+      finalRows = _usePagination.pageData,
+      currentPage = _usePagination.currentPage,
+      setCurrentPage = _usePagination.paginate;
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.default, _extends({
     expanding: expanding,
     responsive: responsive
-  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), !!rows && generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction)), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), // If the table has no rows, return empty state message
+  Object.entries(finalRows).length === 0 && emptyStateMsg ? /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg) : /*#__PURE__*/_react.default.createElement("tbody", null, generateRows({
+    rows: finalRows,
+    headers: headers,
+    responsive: responsive,
+    expanding: expanding
+  }))), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
     currentPage: currentPage,
     itemsPerPage: paginate,
     paginate: setCurrentPage,

package/dist/hooks/index.d.ts

@@ -3,4 +3,5 @@ export { useListener } from "./useListener";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
 export { useId } from "./useId";
+export { usePagination } from "./usePagination";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useListener", {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination.usePagination;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -42,4 +48,6 @@ var _usePrevious = require("./usePrevious");
 
 var _useThrottle = require("./useThrottle");
 
-var _useId = require("./useId");
+var _useId = require("./useId");
+
+var _usePagination = require("./usePagination");

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+export declare function usePagination<D, I = number | null>(data: Array<D>, options?: {
+    itemsPerPage: I;
+    initialPage?: number;
+    autoResetPage?: boolean;
+}): {
+    pageData: Array<D>;
+    currentPage: number;
+    paginate: (pageNumber: number) => void;
+    itemsPerPage: I;
+    totalItems: number;
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = usePagination;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+function usePagination(data, options) {
+  var _data$length;
+
+  var defaultOptions = {
+    initialPage: 1,
+    autoResetPage: false
+  };
+
+  var _Object$assign = Object.assign(defaultOptions, options),
+      itemsPerPage = _Object$assign.itemsPerPage,
+      initialPage = _Object$assign.initialPage,
+      autoResetPage = _Object$assign.autoResetPage;
+
+  var totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
+  var initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
+
+  var _useState = (0, _react.useState)(initialPageIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      pageIndex = _useState2[0],
+      setPageIndex = _useState2[1];
+
+  var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
+
+  var paginate = function paginate(pageNumber) {
+    return setPageIndex(pageNumber - 1);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (typeof itemsPerPage === "number" && startIndex >= totalItems) {
+      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ? // go to the last available page if the current page is out of bounds
+      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) : // go to the initial page if autoResetPage is true
+      setPageIndex(0);
+    }
+  }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);
+  var pageData = (0, _react.useMemo)(function () {
+    return typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data;
+  }, [startIndex, data, itemsPerPage]);
+  return {
+    pageData: pageData,
+    currentPage: pageIndex + 1,
+    paginate: paginate,
+    itemsPerPage: itemsPerPage,
+    totalItems: totalItems
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -81,7 +81,7 @@
     "ts-jest": "27.1.4",
     "tsc-alias": "1.6.5",
     "typescript": "4.6.3",
-    "vanilla-framework": "3.2.0",
+    "vanilla-framework": "3.3.0",
     "wait-on": "5.3.0"
   },
   "dependencies": {
@@ -102,7 +102,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "3.2.0"
+    "vanilla-framework": "3.3.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",