@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,348 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  isInteractiveElement,
+  getRowIdsFromDataset,
+  rowExistsInDataset,
+  selectionStateHelpers
+} from "../utils/selectionUtils";
+import { saveTableState, getTableState } from "../utils/table-helpers";
+import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
+const useRowSelection = ({
+  radioselect = false,
+  multiselect = false,
+  gridfirstrowselect = false,
+  internalDataset,
+  cellState,
+  name,
+  statehandler,
+  initialActualPageSize,
+  getTableState: getTableCurrentState,
+  onRowselect,
+  onRowdeselect,
+  listener,
+  navigation = "Basic",
+  onSyncSelectedItems
+}) => {
+  const datasetRef = useRef(internalDataset);
+  useEffect(() => {
+    datasetRef.current = internalDataset;
+  }, [internalDataset]);
+  const initialSelectionDoneRef = useRef(false);
+  const [updateTrigger, forceUpdate] = useState({});
+  const useMultiSelect = multiselect;
+  const useRadioSelect = radioselect && !multiselect;
+  const hasSelectionMode = useRadioSelect || useMultiSelect;
+  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 selectedItemsWithPage = selectedIndices.map((idx) => ({
+      page: currentPage,
+      index: idx
+    }));
+    const stateToSave = {
+      pagination: currentPage,
+      selectedItem: selectedItemsWithPage
+    };
+    if (initialActualPageSize !== void 0) {
+      stateToSave.actualpagesize = initialActualPageSize;
+    }
+    const isDefaultState = currentPage === 1 && selectedIds.length === 0;
+    if (isDefaultState) {
+      saveTableState(name, statehandler, {});
+    } else {
+      const existingState = getTableState(name, statehandler);
+      if (useRadioSelect) {
+        stateToSave.selectedItem = selectedItemsWithPage;
+      } else if (useMultiSelect) {
+        if (existingState && existingState.selectedItem) {
+          const otherPageSelections = existingState.selectedItem.filter(
+            (item) => item.page !== currentPage
+          );
+          stateToSave.selectedItem = [...otherPageSelections, ...selectedItemsWithPage];
+        }
+      }
+      if (existingState == null ? void 0 : existingState.pagesize) {
+        stateToSave.pagesize = existingState.pagesize;
+      }
+      if (!stateToSave.actualpagesize && (existingState == null ? void 0 : existingState.actualpagesize)) {
+        stateToSave.actualpagesize = existingState.actualpagesize;
+      }
+      saveTableState(name, statehandler, stateToSave);
+    }
+  }, [
+    statehandler,
+    getTableCurrentState,
+    name,
+    useMultiSelect,
+    useRadioSelect,
+    cellState,
+    internalDataset,
+    initialActualPageSize
+  ]);
+  const getWidgetRef = useCallback(() => {
+    var _a;
+    return (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name];
+  }, [name]);
+  const triggerSelectionCallback = useCallback(
+    (event, rowData, callback) => {
+      if (callback && rowData) {
+        onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(selectionStateHelpers.getSelection(cellState));
+        const cleanedRow = cleanRowData([rowData])[0];
+        callback(event, getWidgetRef(), cleanedRow);
+      }
+    },
+    [getWidgetRef, onSyncSelectedItems, cellState]
+  );
+  const handleRadioSelection = useCallback(
+    (rowId, rowData) => {
+      const previousSelection = selectionStateHelpers.getSelection(cellState);
+      const previousRowId = previousSelection.length > 0 ? previousSelection[0] : null;
+      let previousRowData = null;
+      if (previousRowId && previousRowId !== rowId && onRowdeselect) {
+        previousRowData = internalDataset.find(
+          (row) => row._wmTableRowId === previousRowId || row.id === previousRowId
+        );
+      }
+      selectionStateHelpers.setSelection(cellState, rowId);
+      forceUpdate({});
+      saveStateImmediate();
+      if (previousRowData) {
+        triggerSelectionCallback(null, previousRowData, onRowdeselect);
+      }
+      triggerSelectionCallback(null, rowData, onRowselect);
+    },
+    [
+      cellState,
+      saveStateImmediate,
+      onRowselect,
+      onRowdeselect,
+      internalDataset,
+      triggerSelectionCallback
+    ]
+  );
+  const handleMultiSelection = useCallback(
+    (rowId, rowData, isSelected) => {
+      if (isSelected) {
+        selectionStateHelpers.addToSelection(cellState, rowId);
+      } else {
+        selectionStateHelpers.removeFromSelection(cellState, rowId);
+      }
+      forceUpdate({});
+      saveStateImmediate();
+      triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
+    },
+    [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]
+  );
+  const handleSelectAll = useCallback(
+    (isSelected) => {
+      let newIds = [];
+      if (isSelected) {
+        newIds = getRowIdsFromDataset(datasetRef.current);
+        selectionStateHelpers.setAllSelection(cellState, newIds);
+      } else {
+        selectionStateHelpers.clearSelection(cellState);
+      }
+      forceUpdate({});
+      saveStateImmediate();
+      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(newIds);
+      const rows = datasetRef.current;
+      const callback = isSelected ? onRowselect : onRowdeselect;
+      if (callback && rows.length > 0) {
+        rows.forEach((row) => {
+          const cleanedRow = cleanRowData([row])[0];
+          callback(null, getWidgetRef(), cleanedRow);
+        });
+      }
+    },
+    [cellState, saveStateImmediate, onSyncSelectedItems, onRowselect, onRowdeselect, getWidgetRef]
+  );
+  const handleRowSelectionClick = useCallback(
+    (event, rowId, rowData) => {
+      if (isInteractiveElement(event)) {
+        return false;
+      }
+      if (useMultiSelect) {
+        const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
+        const willBeSelected = !isCurrentlySelected;
+        selectionStateHelpers.toggleSelection(cellState, rowId);
+        forceUpdate({});
+        saveStateImmediate();
+        triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
+        return true;
+      } else {
+        handleRadioSelection(rowId, rowData);
+        return true;
+      }
+    },
+    [
+      useMultiSelect,
+      handleRadioSelection,
+      cellState,
+      saveStateImmediate,
+      triggerSelectionCallback,
+      onRowselect,
+      onRowdeselect
+    ]
+  );
+  useEffect(() => {
+    if (initialSelectionDoneRef.current) {
+      return;
+    }
+    if (gridfirstrowselect && internalDataset.length > 0) {
+      const firstRowData = internalDataset[0];
+      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      const currentSelection = selectionStateHelpers.getSelection(cellState);
+      if (currentSelection.length === 0) {
+        if (useMultiSelect) {
+          selectionStateHelpers.addToSelection(cellState, firstRowId);
+        } else {
+          selectionStateHelpers.setSelection(cellState, firstRowId);
+        }
+        forceUpdate({});
+        initialSelectionDoneRef.current = true;
+      } else if (!useMultiSelect) {
+        const selectedId = currentSelection[0];
+        if (!rowExistsInDataset(selectedId, internalDataset)) {
+          selectionStateHelpers.setSelection(cellState, firstRowId);
+          forceUpdate({});
+          initialSelectionDoneRef.current = true;
+        }
+      }
+    }
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+  useEffect(() => {
+    var _a;
+    if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
+      return;
+    }
+    const currentPage = (getTableCurrentState == null ? void 0 : getTableCurrentState().currentPage) || 1;
+    const savedState = getTableState(name, statehandler);
+    const selectedIdsInCurrentPage = ((_a = savedState == null ? void 0 : savedState.selectedItem) == null ? void 0 : _a.filter((item) => item.page === currentPage).map((item) => item.index)) || [];
+    if (selectedIdsInCurrentPage.length > 0) {
+      return;
+    }
+    const currentSelection = selectionStateHelpers.getSelection(cellState);
+    const hasSelectionInCurrentPage = currentSelection.some(
+      (selectedId) => rowExistsInDataset(selectedId, internalDataset)
+    );
+    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);
+      }
+      forceUpdate({});
+      if (onRowselect) {
+        triggerSelectionCallback(null, firstRowData, onRowselect);
+      }
+    }
+  }, [
+    gridfirstrowselect,
+    internalDataset,
+    useMultiSelect,
+    cellState,
+    getTableCurrentState,
+    name,
+    statehandler,
+    onRowselect,
+    triggerSelectionCallback
+  ]);
+  const isRowSelected = useCallback(
+    (rowId) => {
+      return selectionStateHelpers.isRowSelected(cellState, rowId);
+    },
+    [cellState]
+  );
+  const selectedRowIds = useMemo(() => {
+    return selectionStateHelpers.getSelection(cellState);
+  }, [cellState, updateTrigger]);
+  useEffect(() => {
+    if (!statehandler || UNSUPPORTED_STATE_PERSISTENCE_TYPES.includes(navigation)) {
+      return;
+    }
+    if (!initialSelectionDoneRef.current) {
+      return;
+    }
+    const currentPage = (getTableCurrentState == null ? void 0 : getTableCurrentState().currentPage) || 1;
+    const savedState = getTableState(name, statehandler);
+    if (!savedState || !savedState.selectedItem || savedState.selectedItem.length === 0) {
+      return;
+    }
+    const hasActiveFilter = savedState.search && savedState.search.length > 0;
+    if (hasActiveFilter) {
+      return;
+    }
+    const currentPageSelections = savedState.selectedItem.filter((item) => item.page === currentPage).map((item) => item.index);
+    if (currentPageSelections.length > 0 && internalDataset.length > 0) {
+      const currentSelection = selectionStateHelpers.getSelection(cellState);
+      const expectedRowIds = [];
+      currentPageSelections.forEach((index) => {
+        if (index >= 0 && index < internalDataset.length) {
+          const row = internalDataset[index];
+          if (row && row._wmTableRowId) {
+            expectedRowIds.push(row._wmTableRowId);
+          }
+        }
+      });
+      const isAlreadyRestored = expectedRowIds.length === currentSelection.length && expectedRowIds.every((id) => currentSelection.includes(id));
+      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);
+            }
+          }
+        }
+        forceUpdate({});
+      }
+    }
+  }, [
+    getTableCurrentState,
+    name,
+    statehandler,
+    navigation,
+    internalDataset,
+    cellState,
+    useMultiSelect
+  ]);
+  return {
+    selectedRowIds,
+    useMultiSelect,
+    useRadioSelect,
+    handleRadioSelection,
+    handleMultiSelection,
+    handleSelectAll,
+    handleRowSelectionClick,
+    isRowSelected,
+    isInteractiveElement
+  };
+};
+export {
+  useRowSelection
+};

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { SortingState } from "@tanstack/react-table";
+import { ToastType } from "../props";
+import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+export interface UseServerSideSortingProps {
+    datasource?: LiveVariableConfig;
+    sorting: SortingState;
+    setInternalDataset: React.Dispatch<React.SetStateAction<any[]>>;
+    showToast?: (message: string, type: ToastType) => void;
+    isServerSidePagination: boolean;
+    pageIndex: number;
+    onError?: (event: any, widget: any, data: any, operation: string) => void;
+    onBeforefilter?: (widget: any, filterFields: any) => void | boolean | Promise<void | boolean>;
+    filterFields?: Record<string, any>;
+    logicalOp?: string;
+    listener?: any;
+    name?: string;
+}
+export interface UseServerSideSortingReturn {
+    handleSortingChange: (updaterOrValue: React.SetStateAction<SortingState>) => void;
+    isServerSideSorting: boolean;
+}
+/**
+ * Hook to handle server-side sorting for table data
+ */
+export declare const useServerSideSorting: ({ datasource, sorting, setInternalDataset, showToast, isServerSidePagination, pageIndex, onError, onBeforefilter, filterFields, logicalOp, listener, name, }: UseServerSideSortingProps) => UseServerSideSortingReturn;

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

@@ -0,0 +1,136 @@
+import { useEffect, useRef, useCallback } from "react";
+import { refreshDataSource } from "../utils/crud-handlers";
+import { addUniqueRowIds } from "../utils";
+import { useDebounceCallback } from "../../../../hooks/useDebounce";
+const useServerSideSorting = ({
+  datasource,
+  sorting,
+  setInternalDataset,
+  showToast,
+  isServerSidePagination,
+  pageIndex,
+  onError,
+  onBeforefilter,
+  filterFields,
+  logicalOp,
+  listener,
+  name
+}) => {
+  const prevSortingRef = useRef(sorting);
+  const prevPageRef = useRef(pageIndex);
+  const prevFilterRef = useRef("");
+  const isMountedRef = useRef(false);
+  const isServerSideSorting = !!(datasource && isServerSidePagination);
+  const convertSortingToOrderBy = useCallback((sortingState) => {
+    if (!sortingState || sortingState.length === 0) {
+      return "";
+    }
+    return sortingState.map((sort) => `${sort.id} ${sort.desc ? "desc" : "asc"}`).join(", ");
+  }, []);
+  const fetchSortedDataImpl = useCallback(
+    async (forcePage) => {
+      var _a;
+      if (!datasource || !isServerSideSorting) {
+        return;
+      }
+      try {
+        const orderBy = convertSortingToOrderBy(sorting);
+        const currentPage = forcePage !== void 0 ? forcePage : pageIndex + 1;
+        const response = await refreshDataSource(datasource, {
+          orderBy,
+          page: currentPage || 1,
+          filterFields: filterFields || {},
+          condition: logicalOp || ""
+        });
+        let responseData = [];
+        if (response && response.data) {
+          responseData = Array.isArray(response.data) ? response.data : [];
+        }
+        const dataWithIds = addUniqueRowIds(responseData);
+        setInternalDataset(dataWithIds);
+      } catch (error) {
+        console.error("Error fetching sorted data:", error);
+        if (showToast) {
+          showToast("Failed to sort data", "Error");
+        }
+        if (onError) {
+          const widget = name ? (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name] : void 0;
+          onError(null, widget, error, "sort");
+        }
+      }
+    },
+    [
+      datasource,
+      isServerSideSorting,
+      sorting,
+      pageIndex,
+      convertSortingToOrderBy,
+      setInternalDataset,
+      showToast,
+      onError,
+      filterFields,
+      logicalOp,
+      name
+    ]
+  );
+  const fetchSortedData = useDebounceCallback(fetchSortedDataImpl, 100);
+  useEffect(() => {
+    if (!isServerSideSorting) {
+      return;
+    }
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      prevSortingRef.current = sorting;
+      prevPageRef.current = pageIndex;
+      prevFilterRef.current = JSON.stringify({ filterFields, logicalOp });
+      return;
+    }
+    const sortingString = JSON.stringify(sorting);
+    const prevSortingString = JSON.stringify(prevSortingRef.current);
+    const filterString = JSON.stringify({ filterFields, logicalOp });
+    const sortingChanged = sortingString !== prevSortingString;
+    const filterChanged = filterString !== prevFilterRef.current;
+    if (sortingChanged || filterChanged) {
+      if (filterChanged && onBeforefilter) {
+        const handleFilterChange = async () => {
+          var _a;
+          const widget = name ? (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name] : void 0;
+          const result = await onBeforefilter(widget, filterFields);
+          if (result === false) {
+            return;
+          }
+          prevSortingRef.current = sorting;
+          prevPageRef.current = pageIndex;
+          prevFilterRef.current = filterString;
+          fetchSortedData(1);
+        };
+        handleFilterChange();
+      } else {
+        prevSortingRef.current = sorting;
+        prevPageRef.current = pageIndex;
+        prevFilterRef.current = filterString;
+        fetchSortedData(1);
+      }
+    }
+  }, [
+    sorting,
+    pageIndex,
+    filterFields,
+    logicalOp,
+    isServerSideSorting,
+    fetchSortedData,
+    onBeforefilter,
+    listener,
+    name
+  ]);
+  const handleSortingChange = useCallback((updaterOrValue) => {
+    return updaterOrValue;
+  }, []);
+  return {
+    handleSortingChange,
+    isServerSideSorting
+  };
+};
+export {
+  useServerSideSorting
+};

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

@@ -0,0 +1,2 @@
+import { UseTableColumnsProps, UseTableColumnsReturn } from "../props";
+export declare const useTableColumns: ({ wmTableColumns, columnsVersion, rowActions, listener, deleteRecord, showrowindex, editmode, isDynamicTable, renderEditableCell, isRowEditing, editingRowId, startEditing, cancelEditing, saveEditing, cellState, isResizing, handleRowClick, handleRadioSelection, handleMultiSelection, useRadioSelect, useMultiSelect, isRowSelected, }: UseTableColumnsProps) => UseTableColumnsReturn;