@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/list/hooks/useListStateManager.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListStateManager = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useListStateManager = exports.useListStateManager = function useListStateManager(props) {
+  var currentPage = props.currentPage,
+    selectedItems = props.selectedItems,
+    items = props.items,
+    initialActualPageSize = props.initialActualPageSize,
+    multiselect = props.multiselect,
+    datasource = props.datasource;
+
+  // Track previous state to return when loading
+  var prevStateRef = (0, _react.useRef)({});
+
+  // Track if we've already calculated state after loading
+  var hasCalculatedAfterLoadingRef = (0, _react.useRef)(false);
+
+  // Track the previous loading state
+  var wasLoadingRef = (0, _react.useRef)(false);
+
+  // Build the current state object
+  var currentState = (0, _react.useMemo)(function () {
+    var isLoading = datasource === null || datasource === void 0 ? void 0 : datasource.loading;
+    // Detect first calculation after loading becomes false
+    var isFirstCalculationAfterLoading = wasLoadingRef.current && !isLoading && !hasCalculatedAfterLoadingRef.current;
+
+    // If loading just started, reset the flag for next time
+    if (isLoading && !wasLoadingRef.current) {
+      hasCalculatedAfterLoadingRef.current = false;
+    }
+
+    // Update the loading state tracker
+    wasLoadingRef.current = isLoading;
+
+    // If datasource is loading, return the previous state without any calculations
+    if (isLoading) {
+      return prevStateRef.current;
+    }
+
+    // If this is the first calculation after loading, mark as calculated and return minimal state
+    if (isFirstCalculationAfterLoading) {
+      hasCalculatedAfterLoadingRef.current = true;
+      // Return minimal state for first calculation after loading to avoid stale data
+      return {
+        pagination: currentPage
+      };
+    }
+
+    // Otherwise, calculate the new state
+    var state = {
+      pagination: currentPage
+    };
+
+    // Include actualPageSize if available
+    if (initialActualPageSize !== undefined) {
+      state.actualpagesize = initialActualPageSize;
+    }
+
+    // Find selected indices in current items
+    var selectedIndices = [];
+
+    // For single select, ensure we only process one item
+    var itemsToProcess = multiselect ? selectedItems : selectedItems.slice(0, 1);
+    itemsToProcess.forEach(function (selectedItem) {
+      // For SSP, we need to match by unique ID since object references change between pages
+      // Use _wmListItemId which is unique for each item
+      var index = items.findIndex(function (item) {
+        // First try to match by _wmListItemId for SSP
+        if (item._wmListItemId && selectedItem._wmListItemId) {
+          return item._wmListItemId === selectedItem._wmListItemId;
+        }
+        // Fallback to object reference for non-SSP cases
+        return item === selectedItem;
+      });
+      if (index >= 0) {
+        selectedIndices.push(index);
+      }
+    });
+
+    // Build selected items with page info
+    var selectedItemsWithPage = selectedIndices.map(function (idx) {
+      return {
+        page: currentPage,
+        index: idx
+      };
+    });
+    state.selectedItem = selectedItemsWithPage;
+
+    // Save the calculated state for next time
+    prevStateRef.current = state;
+    return state;
+  }, [currentPage, selectedItems, items, initialActualPageSize, multiselect, datasource === null || datasource === void 0 ? void 0 : datasource.loading]);
+
+  // Get state for page size change
+  var getStateForPageSizeChange = (0, _react.useCallback)(function (newPageSize, existingSelectedItems, oldPageSize) {
+    var recalculatedItems = [];
+    if (existingSelectedItems && existingSelectedItems.length > 0 && oldPageSize) {
+      // Recalculate selected items positions based on new page size
+      recalculatedItems = existingSelectedItems.map(function (_ref) {
+        var page = _ref.page,
+          index = _ref.index;
+        // Calculate absolute position using the OLD page size
+        var absoluteIndex = (page - 1) * oldPageSize + index;
+
+        // Calculate new page and index with the NEW page size
+        var newPage = Math.floor(absoluteIndex / newPageSize) + 1;
+        var newIndex = absoluteIndex % newPageSize;
+        return {
+          page: newPage,
+          index: newIndex
+        };
+      });
+    }
+    var state = {
+      pagination: 1,
+      // Reset to first page
+      pagesize: newPageSize,
+      selectedItem: recalculatedItems
+    };
+
+    // Always include actualPageSize if available
+    if (initialActualPageSize !== undefined) {
+      state.actualpagesize = initialActualPageSize;
+    }
+    return state;
+  }, [initialActualPageSize]);
+
+  // Check if current state is default (no need to persist)
+  var isDefaultState = (0, _react.useCallback)(function () {
+    return currentPage === 1 && selectedItems.length === 0;
+  }, [currentPage, selectedItems]);
+
+  // Merge with existing state
+  var mergeWithExisting = (0, _react.useCallback)(function (newState, existingState) {
+    if (!existingState) {
+      return newState;
+    }
+    var merged = _objectSpread({}, newState);
+
+    // Handle selected items based on multiselect mode
+    if (existingState.selectedItem && newState.selectedItem !== undefined) {
+      if (multiselect) {
+        // For multiselect: check if this is a single selection (normal click)
+        // If we have exactly one selection on the current page, it means the user
+        // did a normal click (not Ctrl+click), so we should clear all other selections
+        if (newState.selectedItem.length === 1) {
+          // Single click in multiselect mode - replace all selections
+          merged.selectedItem = newState.selectedItem;
+        } else {
+          // Multiple selections or no selections - merge from different pages
+          var currentPageSelections = newState.selectedItem;
+          var otherPageSelections = existingState.selectedItem.filter(function (item) {
+            return item.page !== newState.pagination;
+          });
+          merged.selectedItem = [].concat((0, _toConsumableArray2["default"])(otherPageSelections), (0, _toConsumableArray2["default"])(currentPageSelections));
+        }
+      } else {
+        // For single select:
+        // If current page has selections, use only those
+        // If current page has no selections, keep existing selection
+        if (newState.selectedItem.length > 0) {
+          merged.selectedItem = newState.selectedItem;
+        } else {
+          merged.selectedItem = existingState.selectedItem;
+        }
+      }
+    }
+
+    // Preserve pagesize if not in new state
+    if (!merged.pagesize && existingState.pagesize) {
+      merged.pagesize = existingState.pagesize;
+    }
+
+    // Preserve actualpagesize if not in new state
+    if (!merged.actualpagesize && existingState.actualpagesize) {
+      merged.actualpagesize = existingState.actualpagesize;
+    }
+    return merged;
+  }, [multiselect]);
+  return {
+    currentState: currentState,
+    getStateForPageSizeChange: getStateForPageSizeChange,
+    isDefaultState: isDefaultState,
+    mergeWithExisting: mergeWithExisting
+  };
+};

package/components/data/list/hooks/usePaginatedGroupedData.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginatedGroupedData = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+var _constants = require("../utils/constants");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Hook for calculating paginated grouped data based on navigation type and pagination
+ */
+var usePaginatedGroupedData = exports.usePaginatedGroupedData = function usePaginatedGroupedData(_ref) {
+  var groupedData = _ref.groupedData,
+    navigation = _ref.navigation,
+    currentPage = _ref.currentPage,
+    pagesize = _ref.pagesize,
+    visibleItems = _ref.visibleItems;
+  return (0, _react.useMemo)(function () {
+    if (!groupedData || !(0, _lodashEs.isArray)(groupedData) || groupedData.length === 0) {
+      return [];
+    }
+
+    // For on-demand navigation, show all items up to visibleItems
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      var itemCount = 0;
+      var paginatedGroups = [];
+      var _iterator = _createForOfIteratorHelper(groupedData),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var group = _step.value;
+          var remainingItems = visibleItems - itemCount;
+          if (remainingItems <= 0) break;
+          var groupItems = (0, _lodashEs.slice)(group.data, 0, (0, _lodashEs.min)([group.data.length, remainingItems]));
+          if (groupItems.length > 0) {
+            paginatedGroups.push(_objectSpread(_objectSpread({}, group), {}, {
+              data: groupItems,
+              startIndexInGroup: 0
+            }));
+            itemCount += groupItems.length;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return paginatedGroups;
+    }
+
+    // For regular pagination
+    var startIndex = (currentPage - 1) * pagesize;
+    var endIndex = currentPage * pagesize;
+
+    // Flatten all items with their group information
+
+    var globalIndexCounter = 0;
+    var flattenedItems = (0, _lodashEs.flatMap)(groupedData, function (group) {
+      var groupStartIndex = globalIndexCounter;
+      var items = group.data.map(function (item, indexInGroup) {
+        return {
+          item: item,
+          groupKey: group.key,
+          indexInGroup: indexInGroup,
+          globalIndex: groupStartIndex + indexInGroup
+        };
+      });
+      globalIndexCounter += group.data.length;
+      return items;
+    });
+
+    // Get items for current page
+    var pageItems = (0, _lodashEs.slice)(flattenedItems, startIndex, endIndex);
+
+    // Reconstruct groups with only the items on the current page
+    var groupsMap = new Map();
+    (0, _lodashEs.forEach)(pageItems, function (_ref2) {
+      var item = _ref2.item,
+        groupKey = _ref2.groupKey,
+        indexInGroup = _ref2.indexInGroup;
+      if (!groupsMap.has(groupKey)) {
+        var originalGroup = (0, _lodashEs.find)(groupedData, function (g) {
+          return g.key === groupKey;
+        });
+        groupsMap.set(groupKey, {
+          key: groupKey,
+          data: [],
+          originalDataLength: (originalGroup === null || originalGroup === void 0 ? void 0 : originalGroup.data.length) || 0,
+          startIndexInGroup: indexInGroup
+        });
+      }
+      groupsMap.get(groupKey).data.push(item);
+    });
+
+    // Convert map to array and maintain original group order
+    var result = [];
+    var _iterator2 = _createForOfIteratorHelper(groupedData),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _group = _step2.value;
+        if (groupsMap.has(_group.key)) {
+          result.push(groupsMap.get(_group.key));
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return result;
+  }, [groupedData, navigation, currentPage, pagesize, visibleItems]);
+};