@wavemaker/react-runtime 11.14.1-rc.236

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useCurrentPageItems", {
+  enumerable: true,
+  get: function get() {
+    return _useCurrentPageItems.useCurrentPageItems;
+  }
+});
+Object.defineProperty(exports, "useDataSourceSubscription", {
+  enumerable: true,
+  get: function get() {
+    return _useDataSourceSubscription.useDataSourceSubscription;
+  }
+});
+Object.defineProperty(exports, "useGroupedData", {
+  enumerable: true,
+  get: function get() {
+    return _useGroupedData.useGroupedData;
+  }
+});
+Object.defineProperty(exports, "useListData", {
+  enumerable: true,
+  get: function get() {
+    return _useListData.useListData;
+  }
+});
+Object.defineProperty(exports, "useListEffects", {
+  enumerable: true,
+  get: function get() {
+    return _useListEffects.useListEffects;
+  }
+});
+Object.defineProperty(exports, "useListEventHandlers", {
+  enumerable: true,
+  get: function get() {
+    return _useListEventHandlers.useListEventHandlers;
+  }
+});
+Object.defineProperty(exports, "useListPagination", {
+  enumerable: true,
+  get: function get() {
+    return _useListPagination.useListPagination;
+  }
+});
+Object.defineProperty(exports, "useListState", {
+  enumerable: true,
+  get: function get() {
+    return _useListState.useListState;
+  }
+});
+Object.defineProperty(exports, "useListStateManager", {
+  enumerable: true,
+  get: function get() {
+    return _useListStateManager.useListStateManager;
+  }
+});
+Object.defineProperty(exports, "usePaginatedGroupedData", {
+  enumerable: true,
+  get: function get() {
+    return _usePaginatedGroupedData.usePaginatedGroupedData;
+  }
+});
+var _useListData = require("./useListData");
+var _useListState = require("./useListState");
+var _useGroupedData = require("./useGroupedData");
+var _useListEventHandlers = require("./useListEventHandlers");
+var _useListPagination = require("./useListPagination");
+var _useCurrentPageItems = require("./useCurrentPageItems");
+var _usePaginatedGroupedData = require("./usePaginatedGroupedData");
+var _useListEffects = require("./useListEffects");
+var _useDataSourceSubscription = require("../../../../hooks/useDataSourceSubscription");
+var _useListStateManager = require("./useListStateManager");

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentPageItems = void 0;
+var _react = require("react");
+var _constants = require("../utils/constants");
+/**
+ * Hook for calculating current page items based on navigation type and pagination
+ */
+var useCurrentPageItems = exports.useCurrentPageItems = function useCurrentPageItems(_ref) {
+  var items = _ref.items,
+    navigation = _ref.navigation,
+    currentPage = _ref.currentPage,
+    pagesize = _ref.pagesize,
+    visibleItems = _ref.visibleItems,
+    _ref$isServerPaginate = _ref.isServerPaginated,
+    isServerPaginated = _ref$isServerPaginate === void 0 ? false : _ref$isServerPaginate;
+  return (0, _react.useMemo)(function () {
+    if (!items || !Array.isArray(items) || items.length === 0) {
+      return {
+        currentItems: [],
+        startIndex: 0,
+        endIndex: 0
+      };
+    }
+
+    // For server-paginated data, use all items as-is since the server has already paginated the data
+    if (isServerPaginated) {
+      return {
+        currentItems: items,
+        startIndex: 0,
+        endIndex: items.length
+      };
+    }
+
+    // For client-side pagination, calculate the slice indexes
+    var startIndex = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND ? 0 : (currentPage - 1) * pagesize;
+    var endIndex = navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND ? visibleItems : currentPage * pagesize;
+    var currentItems = items.slice(startIndex, endIndex);
+    return {
+      currentItems: currentItems,
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  }, [items, navigation, currentPage, pagesize, visibleItems, isServerPaginated]);
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGroupedData = void 0;
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+/**
+ * Custom hook for grouping data
+ * @param orderedDataset - The dataset to group
+ * @param groupby - The field to group by (supports dot notation for nested properties)
+ * @returns Grouped data array
+ */
+var useGroupedData = exports.useGroupedData = function useGroupedData(orderedDataset, groupby) {
+  return (0, _react.useMemo)(function () {
+    // Ensure orderedDataset is a valid array
+    var validDataset = Array.isArray(orderedDataset) ? orderedDataset : [];
+    if (!groupby || !validDataset.length) return [];
+
+    // Group data using lodash groupBy with safe property access
+    var grouped = (0, _lodashEs.groupBy)(validDataset, function (item) {
+      var value = (0, _lodashEs.get)(item, groupby);
+      // If the nested value doesn't exist, group under "Others"
+      return value !== undefined ? String(value || "None") : "Others";
+    });
+
+    // Convert to sorted array format expected by the component
+    return (0, _lodashEs.sortBy)((0, _lodashEs.map)(grouped, function (data, key) {
+      return {
+        key: key,
+        data: data,
+        originalDataLength: data.length
+      };
+    }), "key");
+  }, [orderedDataset, groupby]);
+};

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListData = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+/**
+ * Custom hook for processing and ordering list data
+ * @param dataset - The dataset to process
+ * @param config - Configuration options for data processing
+ * @returns Processed and ordered dataset
+ */
+var useListData = exports.useListData = function useListData(dataset, config) {
+  var orderby = config.orderby,
+    groupby = config.groupby;
+  return (0, _react.useMemo)(function () {
+    // Ensure dataset is a valid array
+    var validDataset = Array.isArray(dataset) ? dataset : [];
+    if (!validDataset.length) return [];
+
+    // If no ordering or grouping is required, return as-is
+    if (!orderby && !groupby) {
+      return validDataset;
+    }
+
+    // Apply ordering if specified
+    if (orderby) {
+      // Parse orderby string to extract fields and directions
+      var orderFields = orderby.split(",").map(function (field) {
+        var _field$trim$split = field.trim().split(":"),
+          _field$trim$split2 = (0, _slicedToArray2["default"])(_field$trim$split, 2),
+          fieldName = _field$trim$split2[0],
+          _field$trim$split2$ = _field$trim$split2[1],
+          direction = _field$trim$split2$ === void 0 ? "asc" : _field$trim$split2$;
+        return {
+          field: fieldName.trim(),
+          direction: direction.trim().toLowerCase()
+        };
+      });
+
+      // Extract field names and directions for lodash orderBy
+      var fields = orderFields.map(function (_ref) {
+        var field = _ref.field;
+        return function (item) {
+          return (0, _lodashEs.get)(item, field);
+        };
+      });
+      var directions = orderFields.map(function (_ref2) {
+        var direction = _ref2.direction;
+        return direction;
+      });
+      return (0, _lodashEs.orderBy)(validDataset, fields, directions);
+    }
+    return validDataset;
+  }, [dataset, orderby, groupby]);
+};

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

@@ -0,0 +1,285 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListEffects = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _constants = require("../utils/constants");
+var _listHelpers = require("../utils/list-helpers");
+var useListEffects = exports.useListEffects = function useListEffects(props) {
+  var name = props.name,
+    navigation = props.navigation,
+    datasource = props.datasource,
+    safeDataset = props.safeDataset,
+    items = props.items,
+    orderedDataset = props.orderedDataset,
+    groupedData = props.groupedData,
+    groupby = props.groupby,
+    orderby = props.orderby,
+    selectfirstitem = props.selectfirstitem,
+    statehandler = props.statehandler,
+    accumulatedData = props.accumulatedData,
+    lastLoadedPage = props.lastLoadedPage,
+    isFirstLoad = props.isFirstLoad,
+    onDemandCurrentPage = props.onDemandCurrentPage,
+    hasBeenReordered = props.hasBeenReordered,
+    initialRender = props.initialRender,
+    initialPage = props.initialPage,
+    initialPageSize = props.initialPageSize,
+    initialSelectedItems = props.initialSelectedItems,
+    initialActualPageSize = props.initialActualPageSize,
+    setAccumulatedData = props.setAccumulatedData,
+    setLastLoadedPage = props.setLastLoadedPage,
+    setIsFirstLoad = props.setIsFirstLoad,
+    setOnDemandCurrentPage = props.setOnDemandCurrentPage,
+    setinitialRender = props.setinitialRender,
+    listState = props.listState,
+    paginationState = props.paginationState,
+    widgetMethods = props.widgetMethods,
+    onSelect = props.onSelect,
+    widgetInstance = props.widgetInstance,
+    listener = props.listener,
+    userInitiatedSelectionRef = props.userInitiatedSelectionRef,
+    restoredPageNumber = props.restoredPageNumber,
+    setRestoredPageNumber = props.setRestoredPageNumber,
+    showNavigation = props.showNavigation,
+    stateManager = props.stateManager;
+
+  // Track page size changes
+  var _useState = (0, _react.useState)(paginationState.currentPageSize),
+    lastPageSize = _useState[0],
+    setLastPageSize = _useState[1];
+
+  // Effect 1: Accumulate data for On-Demand navigation
+  (0, _react.useEffect)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && safeDataset.length > 0) {
+      var _datasource$paginatio, _datasource$paginatio2;
+      // Get the current page from pagination metadata (0-indexed: 0 = page 1)
+      var currentPageFromMeta = (_datasource$paginatio = (_datasource$paginatio2 = datasource.pagination) === null || _datasource$paginatio2 === void 0 ? void 0 : _datasource$paginatio2.number) !== null && _datasource$paginatio !== void 0 ? _datasource$paginatio : 0;
+      if (isFirstLoad) {
+        // Initial load - just set the data
+        setAccumulatedData(safeDataset);
+        setLastLoadedPage(currentPageFromMeta);
+        setIsFirstLoad(false);
+        // Sync the onDemandCurrentPage with the actual loaded page
+        if (currentPageFromMeta !== onDemandCurrentPage) {
+          setOnDemandCurrentPage(currentPageFromMeta);
+        }
+      } else if (currentPageFromMeta > lastLoadedPage) {
+        // This is a new page - append the data
+        setAccumulatedData(function (prev) {
+          return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(safeDataset));
+        });
+        setLastLoadedPage(currentPageFromMeta);
+      } else if (currentPageFromMeta === 0 && lastLoadedPage > 0) {
+        // Data was reset (e.g., filter changed), start fresh
+        setAccumulatedData(safeDataset);
+        setLastLoadedPage(0);
+        setIsFirstLoad(false);
+        setOnDemandCurrentPage(0);
+      }
+    }
+  }, [navigation, datasource, safeDataset, isFirstLoad, lastLoadedPage, onDemandCurrentPage, accumulatedData.length]);
+
+  // Effect 2: Reset accumulated data when orderby changes
+  (0, _react.useEffect)(function () {
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && datasource) {
+      // Reset accumulated data when query parameters change
+      setAccumulatedData([]);
+      setLastLoadedPage(-1);
+      setIsFirstLoad(true);
+      setOnDemandCurrentPage(0); // Reset to page 0 (0-indexed)
+    }
+  }, [orderby]); // Reset when sorting changes
+
+  // Effect 3: Expose methods through widget instance
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        selectItem: widgetMethods.selectItem,
+        deselectItem: widgetMethods.deselectItem,
+        getItem: widgetMethods.getItem,
+        getIndex: widgetMethods.getIndex,
+        clear: widgetMethods.clear,
+        getWidgets: widgetMethods.getWidgets,
+        showNavigation: showNavigation,
+        selecteditem: listState.selectedItems[0]
+      });
+    }
+  }, [widgetMethods.selectItem, widgetMethods.deselectItem, widgetMethods.getItem, widgetMethods.getIndex, widgetMethods.clear, widgetMethods.getWidgets, listState.selectedItems, listState.activeItems]);
+
+  // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
+  var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    // Only run once on initial load when there are selected items from state restoration
+    // Skip if selectfirstitem is true (handled in useListState)
+    if (hasInitialWidgetUpdateRun.current || !(listener !== null && listener !== void 0 && listener.onChange) || listState.selectedItems.length === 0 || initialRender || selectfirstitem) {
+      return;
+    }
+
+    // Mark as run
+    hasInitialWidgetUpdateRun.current = true;
+
+    // Use double RAF to ensure DOM is fully updated
+    requestAnimationFrame(function () {
+      (0, _listHelpers.getSelectedItemWidgets)(null, listener, name);
+    });
+  }, [name, listState.selectedItems.length, initialRender, selectfirstitem]);
+
+  // Effect 4: Handle widgetInstance.selecteditem
+  (0, _react.useEffect)(function () {
+    if ((widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.selecteditem) != undefined) {
+      widgetMethods.selectItem(widgetInstance.selecteditem);
+    }
+  }, [widgetInstance === null || widgetInstance === void 0 ? void 0 : widgetInstance.selecteditem]);
+
+  // Effect 5: Handle selectfirstitem with onSelect
+  (0, _react.useEffect)(function () {
+    if (selectfirstitem && widgetInstance && onSelect && listState.selectedItems.length > 0) {
+      // Only trigger onSelect for selectfirstitem if it's the initial selection and not user-initiated
+      if (listState.selectedItems.length === 1 && items.length > 0 && listState.selectedItems[0] === items[0]) {
+        if (!userInitiatedSelectionRef.current) {
+          onSelect(widgetInstance, listState.selectedItems[0]); // Pass the first selected item
+        }
+      }
+    }
+  }, [selectfirstitem, listState.selectedItems]);
+
+  // Effect 6: Handle selectfirstitem for grouped data
+  (0, _react.useEffect)(function () {
+    if (selectfirstitem && groupby && groupedData && groupedData.length > 0) {
+      var firstGroup = groupedData[0];
+      if (firstGroup && firstGroup.data && firstGroup.data.length > 0) {
+        var firstItemInGroup = firstGroup.data[0];
+        var setFirstItem = function setFirstItem() {
+          listState.setSelectedItems([firstItemInGroup]);
+          listState.setActiveItems(new Set([firstItemInGroup]));
+          listState.setFirstSelectedItem(firstItemInGroup);
+          // Trigger onSelect for the initial selection of first item in grouped data only if not user-initiated
+          if (onSelect && widgetInstance && !userInitiatedSelectionRef.current) {
+            onSelect(widgetInstance, firstItemInGroup); // Pass the first item in group
+          }
+        };
+
+        // Check if the currently selected first item is different from the grouped first item
+        if (listState.selectedItems.length && listState.selectedItems[0] !== firstItemInGroup) {
+          setFirstItem();
+        } else if (listState.selectedItems.length === 0) {
+          setFirstItem();
+        }
+      }
+    }
+  }, [groupby, groupedData, selectfirstitem, listState]);
+
+  // Effect 7: Reset user-initiated flag after selectedItems change
+  (0, _react.useEffect)(function () {
+    var timer = setTimeout(function () {
+      userInitiatedSelectionRef.current = false;
+    }, 0);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [listState.selectedItems]);
+
+  // Effect 8: Load persisted state when items are available
+  (0, _react.useEffect)(function () {
+    // Only run this effect once when items become available
+    if (items.length > 0 && initialRender) {
+      // Restore selected items from our parsed initial state
+      if (initialSelectedItems.length > 0) {
+        // Map indexes to actual items
+        var selectedItems = initialSelectedItems.map(function (idx) {
+          return idx >= 0 && idx < items.length ? items[idx] : null;
+        }).filter(Boolean);
+        if (selectedItems.length > 0) {
+          listState.setSelectedItems(selectedItems);
+          listState.setActiveItems(new Set(selectedItems));
+          listState.setFirstSelectedItem(selectedItems[0]);
+        }
+      }
+
+      // For on-demand navigation, update visible items to show items up to the restored page
+      if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND && initialPage > 1) {
+        paginationState.setVisibleItems(initialPage * paginationState.currentPageSize);
+      }
+
+      // Mark initialization as complete
+      setinitialRender(false);
+    }
+  }, [items, initialRender, initialPage, initialSelectedItems, paginationState.currentPageSize, paginationState.setVisibleItems, paginationState.setCurrentPage, navigation, datasource, listState.setSelectedItems, listState.setActiveItems, listState.setFirstSelectedItem]);
+
+  // Effect 9: Clear persisted state when items are reordered
+  (0, _react.useEffect)(function () {
+    // Skip state clearing for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+    if (hasBeenReordered) {
+      // Clear the persisted state
+      (0, _listHelpers.clearListState)(name, statehandler);
+    }
+  }, [hasBeenReordered, navigation]);
+
+  // Effect 10: Restore selections when page size changes
+  (0, _react.useEffect)(function () {
+    // Skip for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+
+    // Check if page size has changed and we have items
+    var pageSizeChanged = lastPageSize !== paginationState.currentPageSize;
+    if (pageSizeChanged && items.length > 0 && statehandler) {
+      var savedState = (0, _listHelpers.getListState)(name, statehandler);
+      if (savedState !== null && savedState !== void 0 && savedState.selectedItem && savedState.selectedItem.length > 0) {
+        // Filter selections for the current page (should be page 1 after size change)
+        var currentPageSelections = savedState.selectedItem.filter(function (item) {
+          return item.page === paginationState.currentPage;
+        }).map(function (item) {
+          return item.index;
+        });
+
+        // Map indexes to actual items
+        var selectedItems = currentPageSelections.map(function (idx) {
+          return idx >= 0 && idx < items.length ? items[idx] : null;
+        }).filter(Boolean);
+        if (selectedItems.length > 0) {
+          listState.setSelectedItems(selectedItems);
+          listState.setActiveItems(new Set(selectedItems));
+          listState.setFirstSelectedItem(selectedItems[0]);
+        }
+      }
+      setLastPageSize(paginationState.currentPageSize);
+    }
+  }, [items, paginationState.currentPageSize, paginationState.currentPage, lastPageSize, navigation, statehandler, name, listState]);
+
+  // Effect 11: Persist state on changes
+  (0, _react.useEffect)(function () {
+    // Skip state persistence for On-Demand navigation
+    if (navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+      return;
+    }
+
+    // Check if we're in default state
+    if (items.length > 0 && !hasBeenReordered && !stateManager.isDefaultState()) {
+      // Get existing persisted state
+      var existingState = (0, _listHelpers.getListState)(name, statehandler);
+
+      // Merge current state with existing state
+      var stateToSave = stateManager.mergeWithExisting(stateManager.currentState, existingState);
+
+      // Save the state
+      (0, _listHelpers.saveListState)(name, statehandler, stateToSave);
+    }
+  }, [listState.selectedItems, paginationState.currentPage, items, name, navigation, hasBeenReordered, statehandler]);
+  (0, _react.useEffect)(function () {
+    if (restoredPageNumber !== null && paginationState) {
+      paginationState.setCurrentPage(restoredPageNumber);
+      // Clear the restored page number after applying
+      setRestoredPageNumber(null);
+    }
+  }, [restoredPageNumber, paginationState]);
+};