@wavemaker-ai/react-runtime 1.0.0-rc.324 → 1.0.0-rc.328

package/components/data/table/hooks/useRowSelection.js

@@ -3,10 +3,19 @@ import {
   isInteractiveElement,
   getRowIdsFromDataset,
   rowExistsInDataset,
-  selectionStateHelpers
+  selectionStateHelpers,
+  getWidgetForCallback
 } from "../utils/selectionUtils";
 import { saveTableState, getTableState } from "../utils/table-helpers";
 import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
+const getRowFallbackId = (row) => row._wmTableRowId || String(row.id) || String(0);
+const getSelectedIndices = (selectedIds, dataset) => selectedIds.reduce((indices, rowId) => {
+  const index = dataset.findIndex((row) => row._wmTableRowId === rowId || row.id === rowId);
+  if (index >= 0) {
+    indices.push(index);
+  }
+  return indices;
+}, []);
 const useRowSelection = ({
   radioselect = false,
   multiselect = false,
@@ -21,6 +30,8 @@ const useRowSelection = ({
   onRowdeselect,
   listener,
   navigation = "Basic",
+  viewParent,
+  widgetRegistrationKey,
   onSyncSelectedItems
 }) => {
   const datasetRef = useRef(internalDataset);
@@ -31,22 +42,36 @@ const useRowSelection = ({
   const [updateTrigger, forceUpdate] = useState({});
   const useMultiSelect = multiselect;
   const useRadioSelect = radioselect && !multiselect;
-  const hasSelectionMode = useRadioSelect || useMultiSelect;
+  const prevMultiselectRef = useRef(multiselect);
+  useEffect(() => {
+    const prev = prevMultiselectRef.current;
+    prevMultiselectRef.current = multiselect;
+    if (prev === multiselect) return;
+    selectionStateHelpers.clearSelection(cellState);
+    forceUpdate({});
+    onSyncSelectedItems == null ? void 0 : onSyncSelectedItems([]);
+    if (statehandler && getTableCurrentState) {
+      saveTableState(name, statehandler, {});
+    }
+  }, [multiselect, cellState, onSyncSelectedItems, statehandler, name, getTableCurrentState]);
+  const applySelectionForMode = useCallback(
+    (rowIds) => {
+      if (rowIds.length === 0) return;
+      if (useMultiSelect) {
+        rowIds.forEach((rowId) => selectionStateHelpers.addToSelection(cellState, rowId));
+      } else {
+        selectionStateHelpers.setSelection(cellState, rowIds[0]);
+      }
+    },
+    [useMultiSelect, cellState]
+  );
   const saveStateImmediate = useCallback(() => {
     if (!statehandler || !getTableCurrentState) {
       return;
     }
     const { currentPage, currentPageSize } = getTableCurrentState();
     const selectedIds = selectionStateHelpers.getSelection(cellState);
-    const selectedIndices = [];
-    selectedIds.forEach((rowId) => {
-      const index = internalDataset.findIndex(
-        (row) => row._wmTableRowId === rowId || row.id === rowId
-      );
-      if (index >= 0) {
-        selectedIndices.push(index);
-      }
-    });
+    const selectedIndices = getSelectedIndices(selectedIds, internalDataset);
     const selectedItemsWithPage = selectedIndices.map((idx) => ({
       page: currentPage,
       index: idx
@@ -91,19 +116,35 @@ const useRowSelection = ({
     internalDataset,
     initialActualPageSize
   ]);
-  const getWidgetRef = useCallback(() => {
-    var _a;
-    return (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name];
-  }, [name]);
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const syncSelectionToWidget = useCallback(
+    (selectedIds) => {
+      const ids = selectedIds != null ? selectedIds : selectionStateHelpers.getSelection(cellState);
+      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(ids);
+    },
+    [onSyncSelectedItems, cellState]
+  );
+  const commitSelectionChange = useCallback(
+    (syncIds) => {
+      forceUpdate({});
+      saveStateImmediate();
+      syncSelectionToWidget(syncIds);
+    },
+    [saveStateImmediate, syncSelectionToWidget]
+  );
   const triggerSelectionCallback = useCallback(
     (event, rowData, callback) => {
       if (callback && rowData) {
-        onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(selectionStateHelpers.getSelection(cellState));
+        const widget = getWidgetRef();
         const cleanedRow = cleanRowData([rowData])[0];
-        callback(event, getWidgetRef(), cleanedRow);
+        callback(event, widget, cleanedRow);
       }
     },
-    [getWidgetRef, onSyncSelectedItems, cellState]
+    [getWidgetRef]
   );
   const handleRadioSelection = useCallback(
     (rowId, rowData) => {
@@ -116,8 +157,7 @@ const useRowSelection = ({
         );
       }
       selectionStateHelpers.setSelection(cellState, rowId);
-      forceUpdate({});
-      saveStateImmediate();
+      commitSelectionChange();
       if (previousRowData) {
         triggerSelectionCallback(null, previousRowData, onRowdeselect);
       }
@@ -125,7 +165,7 @@ const useRowSelection = ({
     },
     [
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       onRowselect,
       onRowdeselect,
       internalDataset,
@@ -139,11 +179,10 @@ const useRowSelection = ({
       } else {
         selectionStateHelpers.removeFromSelection(cellState, rowId);
       }
-      forceUpdate({});
-      saveStateImmediate();
+      commitSelectionChange();
       triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
     },
-    [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, triggerSelectionCallback]
   );
   const handleSelectAll = useCallback(
     (isSelected) => {
@@ -154,9 +193,7 @@ const useRowSelection = ({
       } else {
         selectionStateHelpers.clearSelection(cellState);
       }
-      forceUpdate({});
-      saveStateImmediate();
-      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(newIds);
+      commitSelectionChange(newIds);
       const rows = datasetRef.current;
       const callback = isSelected ? onRowselect : onRowdeselect;
       if (callback && rows.length > 0) {
@@ -166,7 +203,7 @@ const useRowSelection = ({
         });
       }
     },
-    [cellState, saveStateImmediate, onSyncSelectedItems, onRowselect, onRowdeselect, getWidgetRef]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, getWidgetRef]
   );
   const handleRowSelectionClick = useCallback(
     (event, rowId, rowData) => {
@@ -177,20 +214,18 @@ const useRowSelection = ({
         const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
         const willBeSelected = !isCurrentlySelected;
         selectionStateHelpers.toggleSelection(cellState, rowId);
-        forceUpdate({});
-        saveStateImmediate();
+        commitSelectionChange();
         triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
         return true;
-      } else {
-        handleRadioSelection(rowId, rowData);
-        return true;
       }
+      handleRadioSelection(rowId, rowData);
+      return true;
     },
     [
       useMultiSelect,
       handleRadioSelection,
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       triggerSelectionCallback,
       onRowselect,
       onRowdeselect
@@ -202,26 +237,22 @@ const useRowSelection = ({
     }
     if (gridfirstrowselect && internalDataset.length > 0) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      const firstRowId = getRowFallbackId(firstRowData);
       const currentSelection = selectionStateHelpers.getSelection(cellState);
       if (currentSelection.length === 0) {
-        if (useMultiSelect) {
-          selectionStateHelpers.addToSelection(cellState, firstRowId);
-        } else {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
-        }
+        applySelectionForMode([firstRowId]);
         forceUpdate({});
         initialSelectionDoneRef.current = true;
       } else if (!useMultiSelect) {
         const selectedId = currentSelection[0];
         if (!rowExistsInDataset(selectedId, internalDataset)) {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
+          applySelectionForMode([firstRowId]);
           forceUpdate({});
           initialSelectionDoneRef.current = true;
         }
       }
     }
-  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState, applySelectionForMode]);
   useEffect(() => {
     var _a;
     if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
@@ -239,12 +270,8 @@ const useRowSelection = ({
     );
     if (!hasSelectionInCurrentPage) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
-      if (useMultiSelect) {
-        selectionStateHelpers.addToSelection(cellState, firstRowId);
-      } else {
-        selectionStateHelpers.setSelection(cellState, firstRowId);
-      }
+      const firstRowId = getRowFallbackId(firstRowData);
+      applySelectionForMode([firstRowId]);
       forceUpdate({});
       if (onRowselect) {
         triggerSelectionCallback(null, firstRowData, onRowselect);
@@ -259,7 +286,8 @@ const useRowSelection = ({
     name,
     statehandler,
     onRowselect,
-    triggerSelectionCallback
+    triggerSelectionCallback,
+    applySelectionForMode
   ]);
   const isRowSelected = useCallback(
     (rowId) => {
@@ -302,23 +330,8 @@ const useRowSelection = ({
       if (!isAlreadyRestored && expectedRowIds.length > 0) {
         if (useMultiSelect) {
           selectionStateHelpers.clearSelection(cellState);
-          currentPageSelections.forEach((index) => {
-            if (index >= 0 && index < internalDataset.length) {
-              const row = internalDataset[index];
-              if (row && row._wmTableRowId) {
-                selectionStateHelpers.addToSelection(cellState, row._wmTableRowId);
-              }
-            }
-          });
-        } else {
-          const firstIndex = currentPageSelections[0];
-          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
-            const row = internalDataset[firstIndex];
-            if (row && row._wmTableRowId) {
-              selectionStateHelpers.setSelection(cellState, row._wmTableRowId);
-            }
-          }
         }
+        applySelectionForMode(expectedRowIds);
         forceUpdate({});
       }
     }
@@ -329,7 +342,8 @@ const useRowSelection = ({
     navigation,
     internalDataset,
     cellState,
-    useMultiSelect
+    useMultiSelect,
+    applySelectionForMode
   ]);
   return {
     selectedRowIds,

package/components/data/table/hooks/useServerSideSorting.js

@@ -70,7 +70,6 @@ const useServerSideSorting = ({
       onError,
       filterFields,
       logicalOp,
-      listener,
       name
     ]
   );

package/components/data/table/hooks/useTableColumns.js

@@ -39,7 +39,8 @@ import {
   createRowIndexColumn,
   createDataColumns,
   createEditingActionButtons,
-  getActionColumnSize
+  getActionColumnSize,
+  ActionCell
 } from "../utils/columnBuilder";
 import { distributeColumnWidths } from "../utils/columnWidthDistribution";
 import { useResponsiveColumns } from "./useResponsiveColumns";
@@ -210,11 +211,14 @@ const useTableColumns = ({
       const shouldRenderEditableCell = (editmode === "inline" || editmode === "quickedit") && isEditingThisRow && !wmColumn.readonly;
       return /* @__PURE__ */ jsx("span", { "data-col-identifier": wmColumn.field, children: shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : renderDisplayCell(wmColumn, row.original, listener, cellState) });
     },
-    [editmode, isRowEditing, renderEditableCell, cellState, listener]
+    [editmode, isRowEditing, renderEditableCell, cellState]
   );
   const filteredRowActions = useMemo(() => {
     if (editmode === "quickedit") {
-      return filter(rowActions, (action) => action.key === "deleterow" || action.action === "delete");
+      return filter(
+        rowActions,
+        (action) => action.key === "deleterow" || action.action === "delete" || action.key === "updaterow"
+      );
     }
     return rowActions;
   }, [rowActions, editmode]);
@@ -256,7 +260,6 @@ const useTableColumns = ({
       saveEditing,
       cancelEditing,
       deleteRowAction,
-      listener,
       selectionHandlers
     ]
   );
@@ -277,13 +280,15 @@ const useTableColumns = ({
           size: columnSize,
           minSize,
           enableResizing: true,
-          cell: renderActionCell,
+          cell: ActionCell,
           enableSorting: manualActionColumn.sortable !== false,
-          meta: __spreadValues({
+          meta: __spreadProps(__spreadValues({
             textAlign: manualActionColumn.textalignment,
             backgroundColor: manualActionColumn.backgroundcolor,
             className: manualActionColumn.colClass
-          }, manualActionColumn.styles)
+          }, manualActionColumn.styles), {
+            _actions: { renderActionCell }
+          })
         };
       } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
         return {
@@ -293,7 +298,10 @@ const useTableColumns = ({
           minSize,
           maxSize: size,
           enableResizing: false,
-          cell: renderActionCell
+          cell: ActionCell,
+          meta: {
+            _actions: { renderActionCell }
+          }
         };
       }
       return null;

package/components/data/table/hooks/useTableData.js

@@ -118,7 +118,6 @@ const useTableData = ({
     deletemessage,
     errormessage,
     isServerSidePagination,
-    listener,
     widgetName
   ]);
   const handleCancelDelete = useCallback(() => {

package/components/data/table/hooks/useTableEdit.js

@@ -586,7 +586,6 @@ const useTableEdit = ({
     cancelEditing,
     resetValidationState,
     incrementSessionKey,
-    listener,
     sessionKey,
     hasRowExpansion,
     expansionPosition

package/components/data/table/hooks/useTableState.js

@@ -1,10 +1,23 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 const useTableState = ({
   editMode = "none",
   radioselect = false,
   multiselect = false
 }) => {
   const [activeRowIds, setActiveRowIds] = useState([]);
+  const prevMultiselectRef = useRef(multiselect);
+  const prevRadioselectRef = useRef(radioselect);
+  useEffect(() => {
+    const prevMultiselect = prevMultiselectRef.current;
+    const prevRadioselect = prevRadioselectRef.current;
+    prevMultiselectRef.current = multiselect;
+    prevRadioselectRef.current = radioselect;
+    if (prevMultiselect && !multiselect) {
+      setActiveRowIds([]);
+    } else if (prevRadioselect && !radioselect && !multiselect) {
+      setActiveRowIds([]);
+    }
+  }, [multiselect, radioselect]);
   const handleRowActiveClick = useCallback(
     (rowId, isSelectionHandled, isEditingOrAdding) => {
       if (isEditingOrAdding) {
@@ -39,7 +52,6 @@ const useTableState = ({
       setActiveRowIds([]);
     }
   }, []);
-  const activeRowId = activeRowIds && activeRowIds.length > 0 ? activeRowIds[0] : null;
   return {
     activeRowIds,
     setActiveRow,