@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableInitialization = void 0;
+var _react = require("react");
+var _lodashEs = require("lodash-es");
+/**
+ * Hook to handle table initialization and active row synchronization logic
+ */
+var useTableInitialization = exports.useTableInitialization = function useTableInitialization(_ref) {
+  var internalDataset = _ref.internalDataset,
+    wmTableColumns = _ref.wmTableColumns,
+    cellState = _ref.cellState,
+    gridfirstrowselect = _ref.gridfirstrowselect,
+    useRadioSelect = _ref.useRadioSelect,
+    useMultiSelect = _ref.useMultiSelect,
+    setActiveRow = _ref.setActiveRow,
+    selectedRowIds = _ref.selectedRowIds,
+    activeRowIds = _ref.activeRowIds,
+    formName = _ref.formName,
+    editmode = _ref.editmode,
+    listener = _ref.listener;
+  // Initialize cell state with dataset values for editable columns
+  (0, _react.useEffect)(function () {
+    if (!internalDataset || internalDataset.length === 0) return;
+
+    // Find columns that have edit widgets (they might have cell state)
+    var editableColumns = wmTableColumns.filter(function (col) {
+      return col.editWidgetType && !col.readonly;
+    });
+
+    // Initialize cell state for each row and editable column
+    internalDataset.forEach(function (row) {
+      var rowId = row._wmTableRowId || String(row.id) || "";
+      editableColumns.forEach(function (column) {
+        var fieldName = column.field;
+        var currentValue = (0, _lodashEs.get)(row, fieldName);
+        cellState.setValue(["cells", rowId, fieldName], currentValue);
+      });
+    });
+  }, [internalDataset, wmTableColumns, cellState]);
+
+  // First row active logic (when no selection mode is active)
+  (0, _react.useEffect)(function () {
+    if (gridfirstrowselect && !useRadioSelect && !useMultiSelect && internalDataset.length > 0) {
+      var firstRowData = internalDataset[0];
+      var firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      setActiveRow(firstRowId);
+    }
+  }, [gridfirstrowselect, useRadioSelect, useMultiSelect, internalDataset, setActiveRow]);
+
+  /**
+   * Sync active rows with selected rows
+   * Works for both radio select (single item) and multiselect (multiple items)
+   */
+  (0, _react.useEffect)(function () {
+    if ((useMultiSelect || useRadioSelect) && selectedRowIds.length > 0) {
+      // Set all selected rows as active (for radio select, this will be just one)
+      setActiveRow(selectedRowIds);
+    }
+  }, [selectedRowIds, useMultiSelect, useRadioSelect, setActiveRow]);
+
+  // Monitor when there are no active rows
+  (0, _react.useEffect)(function () {
+    // Check if there are no active rows
+    var hasNoActiveRows = !activeRowIds || activeRowIds.length === 0;
+    if (hasNoActiveRows) {
+      // Handle the case when there are no active rows
+      // You can customize this logic based on your requirements
+      if (listener && (editmode === "form" || editmode === "none") && formName) {
+        setTimeout(function () {
+          var _listener$Widgets$for;
+          (_listener$Widgets$for = listener.Widgets[formName]) === null || _listener$Widgets$for === void 0 || _listener$Widgets$for.setShowViewMode(true);
+        }, 10);
+      }
+    } else {
+      if (activeRowIds.length > 0 && listener && formName) {
+        setTimeout(function () {
+          var formWidget = listener.Widgets[formName];
+          var getRow = internalDataset.find(function (row) {
+            if (row._wmTableRowId === activeRowIds[0]) return true;
+          });
+
+          // For readonly mode (editmode === "none"), always show view mode
+          // For form mode (editmode === "form"), only update form data without changing view/edit state
+          // Edit mode should only be triggered by clicking the edit icon (via editRow method)
+          if (editmode === "none") {
+            var _formWidget$setFormDa;
+            formWidget === null || formWidget === void 0 || (_formWidget$setFormDa = formWidget.setFormData) === null || _formWidget$setFormDa === void 0 || _formWidget$setFormDa.call(formWidget, getRow);
+            formWidget === null || formWidget === void 0 || formWidget.setShowViewMode(true);
+          } else if (editmode === "form") {
+            var _formWidget$setFormDa2;
+            // Only update form data, preserve current view/edit mode
+            formWidget === null || formWidget === void 0 || (_formWidget$setFormDa2 = formWidget.setFormData) === null || _formWidget$setFormDa2 === void 0 || _formWidget$setFormDa2.call(formWidget, getRow);
+          } else {
+            var _formWidget$edit;
+            formWidget === null || formWidget === void 0 || (_formWidget$edit = formWidget.edit) === null || _formWidget$edit === void 0 || _formWidget$edit.call(formWidget, getRow);
+          }
+        }, 10);
+      }
+    }
+  }, [activeRowIds, internalDataset, gridfirstrowselect]);
+};

package/components/data/table/hooks/useTableState.d.ts

@@ -0,0 +1,2 @@
+import { UseTableStateProps, UseTableStateReturn } from "../props";
+export declare const useTableState: ({ editMode, radioselect, multiselect, }: UseTableStateProps) => UseTableStateReturn;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableState = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var useTableState = exports.useTableState = function useTableState(_ref) {
+  var _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? "none" : _ref$editMode,
+    _ref$radioselect = _ref.radioselect,
+    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
+    _ref$multiselect = _ref.multiselect,
+    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect;
+  // State to track active rows - now supports multiple rows
+  var _useState = (0, _react.useState)([]),
+    activeRowIds = _useState[0],
+    setActiveRowIds = _useState[1];
+
+  // Handle row click for active state
+  var handleRowActiveClick = (0, _react.useCallback)(function (rowId, isSelectionHandled, isEditingOrAdding) {
+    // Don't change active row if currently editing a row or adding new row
+    if (isEditingOrAdding) {
+      return;
+    }
+
+    // For multiselect, active state is synced with selection state
+    // so we don't need to manually toggle here
+    if (multiselect) {
+      // Active state will be synced via the useEffect in the main table component
+      return;
+    } else {
+      // For single selection or no selection, replace with single row
+      setActiveRowIds([rowId]);
+    }
+  }, [multiselect]);
+
+  // Check if a row is active
+  var isRowActive = (0, _react.useCallback)(function (rowId, isSelected) {
+    // Check if the row is in the active rows array
+    return activeRowIds && Array.isArray(activeRowIds) && activeRowIds.includes(rowId);
+  }, [activeRowIds]);
+
+  // Clear active rows
+  var clearActiveRow = (0, _react.useCallback)(function () {
+    setActiveRowIds([]);
+  }, []);
+
+  // Set active rows directly - now accepts string, array, or null
+  var setActiveRow = (0, _react.useCallback)(function (rowIds) {
+    if (rowIds === null) {
+      setActiveRowIds([]);
+    } else if (typeof rowIds === "string" || typeof rowIds === "number") {
+      setActiveRowIds([String(rowIds)]);
+    } else if (Array.isArray(rowIds)) {
+      setActiveRowIds(rowIds);
+    } else {
+      // Fallback for unexpected types
+      console.warn("Unexpected type for rowIds:", (0, _typeof2["default"])(rowIds), rowIds);
+      setActiveRowIds([]);
+    }
+  }, []);
+
+  // For backwards compatibility, provide activeRowId as the first active row
+  var activeRowId = activeRowIds && activeRowIds.length > 0 ? activeRowIds[0] : null;
+  return {
+    activeRowIds: activeRowIds,
+    setActiveRow: setActiveRow,
+    clearActiveRow: clearActiveRow,
+    handleRowActiveClick: handleRowActiveClick,
+    isRowActive: isRowActive
+  };
+};

package/components/data/table/hooks/useTableStateManager.d.ts

@@ -0,0 +1,38 @@
+import { TableStateData, TableSearchFilter, TableSortState } from "../utils/table-helpers";
+import { StorageType } from "@wavemaker-ai/react-runtime/utils/state-persistance";
+import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+interface UseTableStateManagerProps {
+    name: string;
+    storage: StorageType;
+    currentPage: number;
+    currentPageSize: number;
+    selectedRowIds?: string[];
+    internalDataset: Array<Record<string, unknown> & {
+        _wmRowId?: string;
+    }>;
+    initialActualPageSize?: number;
+    datasource?: LiveVariableConfig | {
+        loading?: boolean;
+    };
+    multiselect: boolean;
+    filterData?: TableSearchFilter[];
+    sortData?: TableSortState;
+    navigation?: string;
+    isStateConfigured?: boolean;
+    defaultPageSize?: number;
+    initialSortState?: TableSortState;
+    initialFilterState?: TableSearchFilter[];
+}
+export interface UseTableStateManagerReturn {
+    currentState: Partial<TableStateData>;
+    getStateForPageSizeChange: (newPageSize: number, existingSelectedItems?: Array<{
+        page: number;
+        index: number;
+    }>, oldPageSize?: number) => Partial<TableStateData>;
+    isDefaultState: () => boolean;
+    mergeWithExisting: (newState: Partial<TableStateData>, existingState: TableStateData | null) => Partial<TableStateData>;
+    handleFilterStateChange: () => void;
+    handleSortStateChange: () => void;
+}
+export declare const useTableStateManager: (props: UseTableStateManagerProps) => UseTableStateManagerReturn;
+export {};