@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,174 +1,136 @@
-"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 _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
-var _widgetInstanceUtils = require("../utils/widget-instance-utils");
-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,
-    _props$standalone = props.standalone,
-    standalone = _props$standalone === void 0 ? false : _props$standalone;
-  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
-  // Track page size changes
-  var _useState = (0, _react.useState)(paginationState.currentPageSize),
-    lastPageSize = _useState[0],
-    setLastPageSize = _useState[1];
-  var rafRef1 = (0, _react.useRef)(null);
-  var rafRef2 = (0, _react.useRef)(null);
-  var hasInitialWidgetUpdateRun = (0, _react.useRef)(false);
-  var widgetMethodsRef = (0, _react.useRef)(widgetMethods);
+import { useEffect, useState, useRef } from "react";
+import { LIST_NAVIGATION_TYPES } from "../utils/constants";
+import {
+  saveListState,
+  clearListState,
+  getListState,
+  getSelectedItemWidgets
+} from "../utils/list-helpers";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { setWidgetIndexWithContext } from "../utils/widget-instance-utils";
+const useListEffects = (props) => {
+  const {
+    name,
+    navigation,
+    datasource,
+    safeDataset,
+    items,
+    orderedDataset,
+    groupedData,
+    groupby,
+    orderby,
+    selectfirstitem,
+    statehandler,
+    accumulatedData,
+    lastLoadedPage,
+    isFirstLoad,
+    onDemandCurrentPage,
+    hasBeenReordered,
+    initialRender,
+    initialPage,
+    initialPageSize,
+    initialSelectedItems,
+    initialActualPageSize,
+    setAccumulatedData,
+    setLastLoadedPage,
+    setIsFirstLoad,
+    setOnDemandCurrentPage,
+    setinitialRender,
+    listState,
+    paginationState,
+    widgetMethods,
+    onSelect,
+    widgetInstance,
+    listener,
+    userInitiatedSelectionRef,
+    restoredPageNumber,
+    setRestoredPageNumber,
+    showNavigation,
+    stateManager,
+    standalone = false
+  } = props;
+  const Widgets = useWidgetProxy(void 0, standalone);
+  const [lastPageSize, setLastPageSize] = useState(paginationState.currentPageSize);
+  const rafRef1 = useRef(null);
+  const rafRef2 = useRef(null);
+  const hasInitialWidgetUpdateRun = useRef(false);
+  const widgetMethodsRef = useRef(widgetMethods);
   widgetMethodsRef.current = widgetMethods;
-
-  // 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;
+  useEffect(() => {
+    var _a, _b;
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND && datasource && safeDataset.length > 0) {
+      const currentPageFromMeta = (_b = (_a = datasource.pagination) == null ? void 0 : _a.number) != null ? _b : 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));
-        });
+        setAccumulatedData((prev) => [...prev, ...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 (On-Demand and Scroll)
-  (0, _react.useEffect)(function () {
-    if ((navigation === _constants.LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === _constants.LIST_NAVIGATION_TYPES.SCROLL) && datasource) {
-      // Reset accumulated data when query parameters change
+  }, [
+    navigation,
+    datasource,
+    safeDataset,
+    isFirstLoad,
+    lastLoadedPage,
+    onDemandCurrentPage,
+    accumulatedData.length
+  ]);
+  useEffect(() => {
+    if ((navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL) && datasource) {
       setAccumulatedData([]);
       setLastLoadedPage(-1);
       setIsFirstLoad(true);
-      setOnDemandCurrentPage(0); // Reset to page 0 (0-indexed)
+      setOnDemandCurrentPage(0);
     }
-  }, [orderby]); // Reset when sorting changes
-
-  // Effect 3: Expose methods through widget instance
-  // Uses wrapper functions that delegate to ref to avoid stale closures and infinite re-renders
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange) {
+  }, [orderby]);
+  useEffect(() => {
+    if (listener == null ? void 0 : listener.onChange) {
       listener.onChange(name, {
-        selectItem: function selectItem(val) {
-          return widgetMethodsRef.current.selectItem(val);
-        },
-        deselectItem: function deselectItem(val) {
-          return widgetMethodsRef.current.deselectItem(val);
-        },
-        getItem: function getItem(index) {
-          return widgetMethodsRef.current.getItem(index);
-        },
-        getIndex: function getIndex(item) {
-          return widgetMethodsRef.current.getIndex(item);
-        },
-        clear: function clear() {
-          return widgetMethodsRef.current.clear();
-        },
-        getWidgets: function getWidgets(widgetName, index) {
-          return widgetMethodsRef.current.getWidgets(widgetName, index);
-        },
+        selectItem: (val) => widgetMethodsRef.current.selectItem(val),
+        deselectItem: (val) => widgetMethodsRef.current.deselectItem(val),
+        getItem: (index) => widgetMethodsRef.current.getItem(index),
+        getIndex: (item) => widgetMethodsRef.current.getIndex(item),
+        clear: () => widgetMethodsRef.current.clear(),
+        getWidgets: (widgetName, index) => widgetMethodsRef.current.getWidgets(widgetName, index),
         listItems: {
           first: items[0],
           last: items[items.length - 1],
           length: items.length
         },
-        showNavigation: showNavigation,
-        selectPageSize: function selectPageSize(size) {
-          return widgetMethodsRef.current.selectPageSize(size);
-        }
+        showNavigation,
+        selectPageSize: (size) => widgetMethodsRef.current.selectPageSize(size)
       });
     }
   }, [name, showNavigation, items]);
-
-  // Effect 3: Expose methods through widget instance
-  (0, _react.useEffect)(function () {
-    if (listener !== null && listener !== void 0 && listener.onChange && props.navigation !== _constants.LIST_NAVIGATION_TYPES.NONE) {
+  useEffect(() => {
+    if ((listener == null ? void 0 : listener.onChange) && props.navigation !== LIST_NAVIGATION_TYPES.NONE) {
       listener.onChange(name, {
         selecteditem: listState.selectedItems[0]
       });
     }
   }, [listState.selectedItems]);
-
-  // Effect 3b: Update selected item widgets for state restoration (not selectfirstitem)
-
-  (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) {
+  useEffect(() => {
+    if (hasInitialWidgetUpdateRun.current || !(listener == null ? 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
-    rafRef1.current = requestAnimationFrame(function () {
-      // getSelectedItemWidgets(null, listener, name);
-      rafRef2.current = requestAnimationFrame(function () {
-        (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, listState.selectedItems[0] || null, Widgets);
+    rafRef1.current = requestAnimationFrame(() => {
+      rafRef2.current = requestAnimationFrame(() => {
+        getSelectedItemWidgets(null, listener, name, listState.selectedItems[0] || null, Widgets);
       });
     });
-    return function () {
+    return () => {
       if (rafRef1.current) {
         cancelAnimationFrame(rafRef1.current);
       }
@@ -177,57 +139,39 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
       }
     };
   }, [name, listState.selectedItems.length, initialRender, selectfirstitem]);
-
-  // Effect 5: Handle selectfirstitem with onSelect
-  // Use setTimeout to ensure onSelect fires after onRender (which is called synchronously in ListItems)
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     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) {
-          // Delay onSelect to ensure it fires after onRender
-          // onRender is called synchronously in the ListItems component
-          var timer = setTimeout(function () {
-            var selectedItem = listState.selectedItems[0];
-
-            // Attach context information to widget instance
+          const timer = setTimeout(() => {
+            const selectedItem = listState.selectedItems[0];
             if (selectedItem) {
-              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, selectedItem);
+              setWidgetIndexWithContext(widgetInstance, items, selectedItem);
             }
             onSelect(widgetInstance, selectedItem);
           }, 0);
-          return function () {
-            return clearTimeout(timer);
-          };
+          return () => clearTimeout(timer);
         }
       }
     }
   }, [selectfirstitem, listState.selectedItems, items]);
-  // Effect 6: Handle selectfirstitem for grouped data
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (selectfirstitem && groupby && groupedData && groupedData.length > 0) {
-      var firstGroup = groupedData[0];
+      const firstGroup = groupedData[0];
       if (firstGroup && firstGroup.data && firstGroup.data.length > 0) {
-        var firstItemInGroup = firstGroup.data[0];
-        var setFirstItem = function setFirstItem() {
+        const firstItemInGroup = firstGroup.data[0];
+        const setFirstItem = () => {
           listState.setSelectedItems([firstItemInGroup]);
-          listState.setActiveItems(new Set([firstItemInGroup]));
+          listState.setActiveItems(/* @__PURE__ */ 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) {
-            // Delay onSelect to ensure it fires after onRender
-            // onRender is called synchronously in the ListItems component
-            var timer = setTimeout(function () {
-              (0, _widgetInstanceUtils.setWidgetIndexWithContext)(widgetInstance, items, firstItemInGroup);
+            const timer = setTimeout(() => {
+              setWidgetIndexWithContext(widgetInstance, items, firstItemInGroup);
               onSelect(widgetInstance, firstItemInGroup);
             }, 0);
-            return function () {
-              return clearTimeout(timer);
-            };
+            return () => clearTimeout(timer);
           }
         };
-
-        // 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) {
@@ -236,79 +180,59 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
       }
     }
   }, [groupby, groupedData, selectfirstitem, listState]);
-
-  // Effect 7: Reset user-initiated flag after selectedItems change
-  (0, _react.useEffect)(function () {
-    var timer = setTimeout(function () {
+  useEffect(() => {
+    const timer = setTimeout(() => {
       userInitiatedSelectionRef.current = false;
     }, 0);
-    return function () {
-      return clearTimeout(timer);
-    };
+    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
+  useEffect(() => {
     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);
+        const selectedItems = initialSelectedItems.map((idx) => 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) {
+      if (navigation === 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) {
+  }, [
+    items,
+    initialRender,
+    initialPage,
+    initialSelectedItems,
+    paginationState.currentPageSize,
+    paginationState.setVisibleItems,
+    paginationState.setCurrentPage,
+    navigation,
+    datasource,
+    listState.setSelectedItems,
+    listState.setActiveItems,
+    listState.setFirstSelectedItem
+  ]);
+  useEffect(() => {
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND) {
       return;
     }
     if (hasBeenReordered) {
-      // Clear the persisted state
-      (0, _listHelpers.clearListState)(name, statehandler);
+      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) {
+  useEffect(() => {
+    if (navigation === LIST_NAVIGATION_TYPES.ON_DEMAND) {
       return;
     }
-
-    // Check if page size has changed and we have items
-    var pageSizeChanged = lastPageSize !== paginationState.currentPageSize;
+    const 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);
+      const savedState = getListState(name, statehandler);
+      if ((savedState == null ? void 0 : savedState.selectedItem) && savedState.selectedItem.length > 0) {
+        const currentPageSelections = savedState.selectedItem.filter((item) => item.page === paginationState.currentPage).map((item) => item.index);
+        const selectedItems = currentPageSelections.map((idx) => idx >= 0 && idx < items.length ? items[idx] : null).filter(Boolean);
         if (selectedItems.length > 0) {
           listState.setSelectedItems(selectedItems);
           listState.setActiveItems(new Set(selectedItems));
@@ -317,39 +241,46 @@ var useListEffects = exports.useListEffects = function useListEffects(props) {
       }
       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) {
+  }, [
+    items,
+    paginationState.currentPageSize,
+    paginationState.currentPage,
+    lastPageSize,
+    navigation,
+    statehandler,
+    name,
+    listState
+  ]);
+  useEffect(() => {
+    if (navigation === 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);
-
-      // Compare state content, not object references
-      var existingStateStr = JSON.stringify(existingState);
-      var stateToSaveStr = JSON.stringify(stateToSave);
-      var statesAreEqual = existingStateStr === stateToSaveStr;
-
-      // Save the state only if content has actually changed
+      const existingState = getListState(name, statehandler);
+      const stateToSave = stateManager.mergeWithExisting(stateManager.currentState, existingState);
+      const existingStateStr = JSON.stringify(existingState);
+      const stateToSaveStr = JSON.stringify(stateToSave);
+      const statesAreEqual = existingStateStr === stateToSaveStr;
       if (!statesAreEqual) {
-        (0, _listHelpers.saveListState)(name, statehandler, stateToSave);
+        saveListState(name, statehandler, stateToSave);
       }
     }
-  }, [listState.selectedItems, paginationState.currentPage, items, name, navigation, hasBeenReordered, statehandler]);
-  (0, _react.useEffect)(function () {
+  }, [
+    listState.selectedItems,
+    paginationState.currentPage,
+    items,
+    name,
+    navigation,
+    hasBeenReordered,
+    statehandler
+  ]);
+  useEffect(() => {
     if (restoredPageNumber !== null && paginationState) {
       paginationState.setCurrentPage(restoredPageNumber);
-      // Clear the restored page number after applying
       setRestoredPageNumber(null);
     }
   }, [restoredPageNumber, paginationState]);
-};
+};
+export {
+  useListEffects
+};