@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.314

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

@@ -1,195 +1,140 @@
-"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
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { useMemo, useCallback, useRef } from "react";
+const useListStateManager = (props) => {
+  const { currentPage, selectedItems, items, initialActualPageSize, multiselect, datasource } = props;
+  const prevStateRef = useRef({});
+  const hasCalculatedAfterLoadingRef = useRef(false);
+  const wasLoadingRef = useRef(false);
+  const currentState = useMemo(() => {
+    const isLoading = datasource == null ? void 0 : datasource.loading;
+    const isFirstCalculationAfterLoading = wasLoadingRef.current && !isLoading && !hasCalculatedAfterLoadingRef.current;
     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 = {
+    const state = {
       pagination: currentPage
     };
-
-    // Include actualPageSize if available
-    if (initialActualPageSize !== undefined) {
+    if (initialActualPageSize !== void 0) {
       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
+    const selectedIndices = [];
+    const itemsToProcess = multiselect ? selectedItems : selectedItems.slice(0, 1);
+    itemsToProcess.forEach((selectedItem) => {
+      const index = items.findIndex((item) => {
         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
-      };
-    });
+    const selectedItemsWithPage = selectedIndices.map((idx) => ({
+      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 () {
+  }, [currentPage, selectedItems, items, initialActualPageSize, multiselect, datasource == null ? void 0 : datasource.loading]);
+  const getStateForPageSizeChange = useCallback(
+    (newPageSize, existingSelectedItems, oldPageSize) => {
+      let recalculatedItems = [];
+      if (existingSelectedItems && existingSelectedItems.length > 0 && oldPageSize) {
+        recalculatedItems = existingSelectedItems.map(({ page, index }) => {
+          const absoluteIndex = (page - 1) * oldPageSize + index;
+          const newPage = Math.floor(absoluteIndex / newPageSize) + 1;
+          const newIndex = absoluteIndex % newPageSize;
+          return {
+            page: newPage,
+            index: newIndex
+          };
+        });
+      }
+      const state = {
+        pagination: 1,
+        // Reset to first page
+        pagesize: newPageSize,
+        selectedItem: recalculatedItems
+      };
+      if (initialActualPageSize !== void 0) {
+        state.actualpagesize = initialActualPageSize;
+      }
+      return state;
+    },
+    [initialActualPageSize]
+  );
+  const isDefaultState = useCallback(() => {
     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;
+  const mergeWithExisting = useCallback(
+    (newState, existingState) => {
+      if (!existingState) {
+        return newState;
+      }
+      const merged = __spreadValues({}, newState);
+      if (existingState.selectedItem && newState.selectedItem !== void 0) {
+        if (multiselect) {
+          if (newState.selectedItem.length === 1) {
+            merged.selectedItem = newState.selectedItem;
+          } else {
+            const currentPageSelections = newState.selectedItem;
+            const otherPageSelections = existingState.selectedItem.filter(
+              (item) => item.page !== newState.pagination
+            );
+            merged.selectedItem = [...otherPageSelections, ...currentPageSelections];
+          }
         } else {
-          merged.selectedItem = existingState.selectedItem;
+          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]);
+      if (!merged.pagesize && existingState.pagesize) {
+        merged.pagesize = existingState.pagesize;
+      }
+      if (!merged.actualpagesize && existingState.actualpagesize) {
+        merged.actualpagesize = existingState.actualpagesize;
+      }
+      return merged;
+    },
+    [multiselect]
+  );
   return {
-    currentState: currentState,
-    getStateForPageSizeChange: getStateForPageSizeChange,
-    isDefaultState: isDefaultState,
-    mergeWithExisting: mergeWithExisting
+    currentState,
+    getStateForPageSizeChange,
+    isDefaultState,
+    mergeWithExisting
   };
-};
+};
+export {
+  useListStateManager
+};

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

@@ -1,134 +1,98 @@
-"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 _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; }
-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; }
-/**
- * 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,
-    isServerSidePagination = _ref.isServerSidePagination;
-  return (0, _react.useMemo)(function () {
-    if (!groupedData || !(0, _lodashEs.isArray)(groupedData) || groupedData.length === 0) {
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useMemo } from "react";
+import { isArray, slice, min, find, forEach, flatMap } from "lodash-es";
+import { LIST_NAVIGATION_TYPES } from "../utils/constants";
+const usePaginatedGroupedData = ({
+  groupedData,
+  navigation,
+  currentPage,
+  pagesize,
+  visibleItems,
+  isServerSidePagination
+}) => {
+  return useMemo(() => {
+    if (!groupedData || !isArray(groupedData) || groupedData.length === 0) {
       return [];
     }
-
-    // For server-side pagination, the data is already paginated by the server
-    // Just return all grouped data without additional client-side pagination
     if (isServerSidePagination) {
-      return groupedData.map(function (group) {
-        return _objectSpread(_objectSpread({}, group), {}, {
-          data: group.data,
-          startIndexInGroup: 0,
-          originalDataLength: group.data.length
-        });
-      });
+      return groupedData.map((group) => __spreadProps(__spreadValues({}, group), {
+        data: group.data,
+        startIndexInGroup: 0,
+        originalDataLength: group.data.length
+      }));
     }
-
-    // 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;
-          }
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      let itemCount = 0;
+      const paginatedGroups = [];
+      for (const group of groupedData) {
+        const remainingItems = visibleItems - itemCount;
+        if (remainingItems <= 0) break;
+        const groupItems = slice(group.data, 0, min([group.data.length, remainingItems]));
+        if (groupItems.length > 0) {
+          paginatedGroups.push(__spreadProps(__spreadValues({}, group), {
+            data: groupItems,
+            startIndexInGroup: 0
+          }));
+          itemCount += groupItems.length;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
       return paginatedGroups;
     }
-
-    // For regular client-side 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
-        };
-      });
+    const startIndex = (currentPage - 1) * pagesize;
+    const endIndex = currentPage * pagesize;
+    let globalIndexCounter = 0;
+    const flattenedItems = flatMap(groupedData, (group) => {
+      const groupStartIndex = globalIndexCounter;
+      const items = group.data.map((item, indexInGroup) => ({
+        item,
+        groupKey: group.key,
+        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;
+    const pageItems = slice(flattenedItems, startIndex, endIndex);
+    const groupsMap = /* @__PURE__ */ new Map();
+    forEach(pageItems, ({ item, groupKey, indexInGroup }) => {
       if (!groupsMap.has(groupKey)) {
-        var originalGroup = (0, _lodashEs.find)(groupedData, function (g) {
-          return g.key === groupKey;
-        });
+        const originalGroup = find(groupedData, (g) => g.key === groupKey);
         groupsMap.set(groupKey, {
           key: groupKey,
           data: [],
-          originalDataLength: (originalGroup === null || originalGroup === void 0 ? void 0 : originalGroup.data.length) || 0,
+          originalDataLength: (originalGroup == null ? 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));
-        }
+    const result = [];
+    for (const group of groupedData) {
+      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, isServerSidePagination]);
-};
+};
+export {
+  usePaginatedGroupedData
+};

package/components/data/list/index.d.ts

@@ -30,6 +30,7 @@ declare const WmListStandalone: React.ComponentType<{
     paginationclass?: string;
     pagesize?: number;
     selectfirstitem?: boolean;
+    selecteditem?: ListItemData | ListItemData[];
     selectionlimit?: number;
     showcount?: boolean;
     showrecordcount?: boolean;