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

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

@@ -0,0 +1,359 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { Box } from "@mui/material";
+import { filter, map } from "lodash-es";
+import { getActionButtonClass, parseWidth } from "../utils";
+import { renderDisplayCell } from "../utils/renderDisplayCell";
+import {
+  createRowIndexColumn,
+  createDataColumns,
+  createEditingActionButtons,
+  getActionColumnSize,
+  ActionCell
+} from "../utils/columnBuilder";
+import { distributeColumnWidths } from "../utils/columnWidthDistribution";
+import { useResponsiveColumns } from "./useResponsiveColumns";
+import WmTableRowAction from "../table-row-action";
+const handleActionSelection = (rowId, rowData, handlers) => {
+  const {
+    useMultiSelect,
+    handleMultiSelection,
+    isRowSelected,
+    useRadioSelect,
+    handleRadioSelection
+  } = handlers;
+  if (useMultiSelect && handleMultiSelection && isRowSelected) {
+    const currentlySelected = isRowSelected(rowId);
+    handleMultiSelection(rowId, rowData, !currentlySelected);
+  } else if (useRadioSelect && handleRadioSelection) {
+    handleRadioSelection(rowId, rowData);
+  }
+};
+const createActionClickHandler = (rowData, rowId, handlers, actionOnClick) => {
+  return (event, widget, newVal) => {
+    if (handlers.handleRowClick && event) {
+      handlers.handleRowClick(event, rowData, rowId);
+    }
+    handleActionSelection(rowId, rowData, handlers);
+    actionOnClick == null ? void 0 : actionOnClick(event, widget, newVal);
+  };
+};
+const ActionButton = React.memo((_a) => {
+  var _b = _a, { action, index, rowData, rowIndex, rowId, listener } = _b, selectionHandlers = __objRest(_b, ["action", "index", "rowData", "rowIndex", "rowId", "listener"]);
+  const actionKey = action.key || action.name;
+  const btnClass = getActionButtonClass(action);
+  const handleClick = createActionClickHandler(rowData, rowId, selectionHandlers, action.onClick);
+  return /* @__PURE__ */ jsx(
+    WmTableRowAction,
+    {
+      name: action.name || `table-row-action-${index}-${actionKey}`,
+      className: btnClass,
+      "data-action-key": actionKey,
+      displayName: action.displayName || "",
+      title: action.title,
+      iconclass: action.iconclass,
+      action: action.action,
+      row: rowData,
+      rowIndex,
+      listener,
+      show: action.show,
+      onClick: handleClick,
+      widgettype: action.widgettype
+    },
+    `row-action-${index}-${actionKey}`
+  );
+});
+ActionButton.displayName = "ActionButton";
+const EditingActionButtons = React.memo(
+  (_c) => {
+    var _d = _c, {
+      onSave,
+      onCancel,
+      rowData,
+      rowIndex,
+      rowId,
+      listener,
+      deleteRowAction
+    } = _d, selectionHandlers = __objRest(_d, [
+      "onSave",
+      "onCancel",
+      "rowData",
+      "rowIndex",
+      "rowId",
+      "listener",
+      "deleteRowAction"
+    ]);
+    const buttons = createEditingActionButtons();
+    const handleButtonClick = useCallback(
+      (button, event, widget) => {
+        var _a, _b;
+        event == null ? void 0 : event.preventDefault();
+        event == null ? void 0 : event.stopPropagation();
+        const isDeleteButton = button.key === "delete-edit";
+        if (isDeleteButton && event) {
+          (_a = selectionHandlers.handleRowClick) == null ? void 0 : _a.call(selectionHandlers, event, rowData, rowId);
+          handleActionSelection(rowId, rowData, selectionHandlers);
+        }
+        switch (button.key) {
+          case "save-edit":
+            onSave();
+            break;
+          case "delete-edit":
+            (_b = deleteRowAction == null ? void 0 : deleteRowAction.onClick) == null ? void 0 : _b.call(deleteRowAction, event, rowData);
+            break;
+          default:
+            onCancel();
+        }
+      },
+      [onSave, onCancel, deleteRowAction, rowData, rowId, selectionHandlers]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: buttons.map((button) => /* @__PURE__ */ jsx(
+      WmTableRowAction,
+      {
+        name: button.name,
+        className: button.className,
+        "data-action-key": button.dataActionKey,
+        displayName: button.displayName,
+        title: button.title,
+        iconclass: button.iconclass,
+        action: button.action,
+        row: rowData,
+        rowIndex,
+        listener,
+        show: button.show,
+        onClick: (event, widget) => handleButtonClick(button, event, widget),
+        widgettype: button.widgettype
+      },
+      button.key
+    )) });
+  }
+);
+EditingActionButtons.displayName = "EditingActionButtons";
+const useTableColumns = ({
+  wmTableColumns,
+  columnsVersion = 0,
+  rowActions,
+  listener,
+  deleteRecord,
+  showrowindex,
+  editmode,
+  isDynamicTable = false,
+  renderEditableCell,
+  isRowEditing,
+  editingRowId,
+  startEditing,
+  cancelEditing,
+  saveEditing,
+  cellState,
+  isResizing,
+  handleRowClick,
+  handleRadioSelection,
+  handleMultiSelection,
+  useRadioSelect,
+  useMultiSelect,
+  isRowSelected
+}) => {
+  const visibleColumns = useResponsiveColumns(wmTableColumns);
+  const selectionHandlers = useMemo(
+    () => ({
+      handleRowClick,
+      handleRadioSelection,
+      handleMultiSelection,
+      useRadioSelect,
+      useMultiSelect,
+      isRowSelected
+    }),
+    [
+      handleRowClick,
+      handleRadioSelection,
+      handleMultiSelection,
+      useRadioSelect,
+      useMultiSelect,
+      isRowSelected
+    ]
+  );
+  const renderCell = useCallback(
+    (wmColumn, row) => {
+      var _a;
+      const rowId = ((_a = row == null ? void 0 : row.original) == null ? void 0 : _a._wmTableRowId) || (row == null ? void 0 : row.id);
+      const isEditingThisRow = isRowEditing(rowId);
+      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]
+  );
+  const filteredRowActions = useMemo(() => {
+    if (editmode === "quickedit") {
+      return filter(
+        rowActions,
+        (action) => action.key === "deleterow" || action.action === "delete" || action.key === "updaterow"
+      );
+    }
+    return rowActions;
+  }, [rowActions, editmode]);
+  const deleteRowAction = useMemo(
+    () => filteredRowActions.find((action) => action.key === "deleterow" || action.action === "delete"),
+    [filteredRowActions]
+  );
+  const renderActionCell = useCallback(
+    ({ row }) => {
+      var _a, _b;
+      const rowId = (_b = (_a = row == null ? void 0 : row.original) == null ? void 0 : _a._wmTableRowId) != null ? _b : row == null ? void 0 : row.id;
+      const isEditing = isRowEditing(rowId);
+      const commonProps = __spreadValues({
+        rowData: row.original,
+        rowIndex: row.index,
+        rowId,
+        listener
+      }, selectionHandlers);
+      return /* @__PURE__ */ jsx(Box, { component: "span", className: "actions-column", "data-identifier": "actionButtons", children: isEditing && editmode !== "quickedit" ? /* @__PURE__ */ jsx(
+        EditingActionButtons,
+        __spreadProps(__spreadValues({}, commonProps), {
+          onSave: saveEditing,
+          onCancel: cancelEditing,
+          deleteRowAction
+        })
+      ) : map(filteredRowActions, (action, index) => /* @__PURE__ */ jsx(
+        ActionButton,
+        __spreadProps(__spreadValues({}, commonProps), {
+          action,
+          index
+        }),
+        `${row.id}-${index}`
+      )) });
+    },
+    [
+      isRowEditing,
+      editmode,
+      filteredRowActions,
+      saveEditing,
+      cancelEditing,
+      deleteRowAction,
+      selectionHandlers
+    ]
+  );
+  const createActionColumnDef = useCallback(
+    (manualActionColumn) => {
+      var _a;
+      const { size, minSize } = getActionColumnSize(editmode);
+      if (manualActionColumn) {
+        let columnSize = size;
+        if (manualActionColumn.width) {
+          columnSize = parseInt(manualActionColumn.width);
+        } else if ((_a = manualActionColumn.styles) == null ? void 0 : _a.width) {
+          columnSize = parseWidth(manualActionColumn.styles.width);
+        }
+        return {
+          id: "actions",
+          header: manualActionColumn.caption || "Actions",
+          size: columnSize,
+          minSize,
+          enableResizing: true,
+          cell: ActionCell,
+          enableSorting: manualActionColumn.sortable !== false,
+          meta: __spreadProps(__spreadValues({
+            textAlign: manualActionColumn.textalignment,
+            backgroundColor: manualActionColumn.backgroundcolor,
+            className: manualActionColumn.colClass
+          }, manualActionColumn.styles), {
+            _actions: { renderActionCell }
+          })
+        };
+      } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
+        return {
+          id: "actions",
+          header: "Actions",
+          size,
+          minSize,
+          maxSize: size,
+          enableResizing: false,
+          cell: ActionCell,
+          meta: {
+            _actions: { renderActionCell }
+          }
+        };
+      }
+      return null;
+    },
+    [editmode, isDynamicTable, rowActions.length, renderActionCell]
+  );
+  const insertActionColumnAtPosition = useCallback(
+    (columnDefs, dataColumns, actionColumnDef, position) => {
+      if (position === 0) {
+        columnDefs.push(actionColumnDef);
+        columnDefs.push(...createDataColumns(dataColumns, renderCell));
+      } else if (position > 0 && position <= dataColumns.length) {
+        columnDefs.push(...createDataColumns(dataColumns.slice(0, position), renderCell));
+        columnDefs.push(actionColumnDef);
+        columnDefs.push(...createDataColumns(dataColumns.slice(position), renderCell));
+      } else {
+        columnDefs.push(...createDataColumns(dataColumns, renderCell));
+        columnDefs.push(actionColumnDef);
+      }
+    },
+    [renderCell]
+  );
+  const columns = useMemo(() => {
+    const columnDefs = [];
+    const manualActionColumn = visibleColumns.find((col) => col.binding === "rowOperations");
+    const dataColumns = visibleColumns.filter((col) => col.binding !== "rowOperations");
+    if (showrowindex) {
+      columnDefs.push(createRowIndexColumn());
+    }
+    const actionColumnDef = createActionColumnDef(manualActionColumn);
+    if (actionColumnDef) {
+      const position = (manualActionColumn == null ? void 0 : manualActionColumn.rowactionsposition) !== void 0 ? Number(manualActionColumn.rowactionsposition) : -1;
+      insertActionColumnAtPosition(columnDefs, dataColumns, actionColumnDef, position);
+    } else {
+      columnDefs.push(...createDataColumns(dataColumns, renderCell));
+    }
+    return isResizing ? columnDefs : distributeColumnWidths(columnDefs);
+  }, [
+    visibleColumns,
+    columnsVersion,
+    showrowindex,
+    createActionColumnDef,
+    insertActionColumnAtPosition,
+    renderCell,
+    isResizing
+  ]);
+  return {
+    columns,
+    wmTableColumns,
+    rowActions
+  };
+};
+export {
+  useTableColumns
+};

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

@@ -0,0 +1,2 @@
+import { UseTableDataProps, UseTableDataReturn } from "../props";
+export declare const useTableData: ({ dataset, onRowDelete, deleteoktext, deletecanceltext, confirmdelete, deletemessage, errormessage, showToast, datasource, binddataset, onSuccess, onError, onRowdelete, isServerSidePagination, listener, widgetName, }: UseTableDataProps) => UseTableDataReturn;

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

@@ -0,0 +1,172 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { isEqual } from "lodash-es";
+import { addUniqueRowIds, extractDataArray, TABLE_MESSAGES, INTERNAL_PROPERTIES } from "../utils";
+import WmConfirmDialog from "../../../dialogs/confirm-dialog";
+import { handleDeleteOperation } from "../utils/crud-handlers";
+const isEmptyRecord = (record) => {
+  if (!record || typeof record !== "object") {
+    return true;
+  }
+  const properties = Object.keys(record).filter(
+    (prop) => !INTERNAL_PROPERTIES.includes(prop) && !prop.startsWith("_wm")
+  );
+  return properties.every((prop) => {
+    const data = record[prop];
+    return data === null || data === void 0 || data === "";
+  });
+};
+const removeEmptyRecords = (records) => {
+  if (!records || !records.length) {
+    return [];
+  }
+  return records.filter((record) => record && !isEmptyRecord(record));
+};
+const useTableData = ({
+  dataset,
+  onRowDelete,
+  deleteoktext = TABLE_MESSAGES.deleteOkText,
+  deletecanceltext = TABLE_MESSAGES.deleteCancelText,
+  confirmdelete = TABLE_MESSAGES.deleteConfirmMessage,
+  deletemessage = TABLE_MESSAGES.deleteSuccess,
+  errormessage = TABLE_MESSAGES.deleteError,
+  showToast,
+  datasource,
+  binddataset,
+  onSuccess,
+  onError,
+  onRowdelete,
+  isServerSidePagination,
+  listener,
+  widgetName
+}) => {
+  const rowIdCacheRef = useRef([]);
+  const processedDataset = useMemo(() => {
+    const extracted = extractDataArray(dataset);
+    const cachedIds = rowIdCacheRef.current;
+    const prestamped = extracted.map((item, i) => {
+      if (!item || typeof item !== "object" || item._wmTableRowId || item.id || item.ID || item.Id || !cachedIds[i]) {
+        return item;
+      }
+      return __spreadProps(__spreadValues({}, item), { _wmTableRowId: cachedIds[i] });
+    });
+    const withIds = addUniqueRowIds(prestamped);
+    rowIdCacheRef.current = withIds.map((r) => r == null ? void 0 : r._wmTableRowId);
+    return removeEmptyRecords(withIds);
+  }, [dataset]);
+  const [internalDataset, setInternalDataset] = useState(processedDataset);
+  useEffect(() => {
+    if (!isEqual(internalDataset, processedDataset)) {
+      setInternalDataset(processedDataset);
+    }
+  }, [processedDataset]);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const pendingDeleteRef = useRef(null);
+  const handleConfirmDelete = useCallback(async () => {
+    if (pendingDeleteRef.current) {
+      const { rowData, tableInstance, resolve } = pendingDeleteRef.current;
+      const result = await handleDeleteOperation({
+        rowData,
+        tableInstance,
+        internalDataset,
+        setInternalDataset,
+        datasource,
+        binddataset,
+        onRowDelete,
+        showToast,
+        onSuccess,
+        onError,
+        onRowdelete,
+        deletemessage,
+        errormessage,
+        isServerSidePagination,
+        listener,
+        widgetName
+      });
+      resolve(result);
+      pendingDeleteRef.current = null;
+    }
+    setShowDeleteConfirm(false);
+  }, [
+    internalDataset,
+    setInternalDataset,
+    datasource,
+    binddataset,
+    onRowDelete,
+    showToast,
+    onSuccess,
+    onError,
+    onRowdelete,
+    deletemessage,
+    errormessage,
+    isServerSidePagination,
+    widgetName
+  ]);
+  const handleCancelDelete = useCallback(() => {
+    if (pendingDeleteRef.current) {
+      pendingDeleteRef.current.resolve(false);
+      pendingDeleteRef.current = null;
+    }
+    setShowDeleteConfirm(false);
+  }, []);
+  const deleteRecord = useCallback(async (rowData, tableInstance) => {
+    return new Promise((resolve) => {
+      pendingDeleteRef.current = {
+        rowData,
+        tableInstance,
+        resolve
+      };
+      setShowDeleteConfirm(true);
+    });
+  }, []);
+  const renderConfirmDialog = useCallback(() => {
+    if (!showDeleteConfirm) return null;
+    return React.createElement(WmConfirmDialog, {
+      name: "delete-row-confirm",
+      isopen: showDeleteConfirm,
+      title: TABLE_MESSAGES.deleteConfirmTitle,
+      message: confirmdelete,
+      iconclass: "wi wi-delete",
+      oktext: deleteoktext,
+      canceltext: deletecanceltext,
+      onOk: handleConfirmDelete,
+      onCancel: handleCancelDelete,
+      onClose: handleCancelDelete,
+      listener: {}
+    });
+  }, [
+    showDeleteConfirm,
+    handleConfirmDelete,
+    handleCancelDelete,
+    confirmdelete,
+    deleteoktext,
+    deletecanceltext
+  ]);
+  return {
+    internalDataset,
+    setInternalDataset,
+    deleteRecord,
+    renderConfirmDialog
+  };
+};
+export {
+  useTableData
+};

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

@@ -0,0 +1,4 @@
+import { UseFormWidgetReturn, UseTableEditProps, UseTableEditReturn } from "../props";
+export declare const useTableEdit: ({ editMode, internalDataset, setInternalDataset, wmTableColumns, cellState, renderFormWidget, listener, onRowUpdate, onRowDelete, onNewRowAdded, showrowindex, radioselect, multiselect, rowActions, formposition, insertmessage, updatemessage, errormessage, showToast, hasRowExpansion, expansionPosition, datasource, binddataset, onSuccess, onError, onRowinsert, onRowupdate, tableRef, isServerSidePagination, tableName, }: UseTableEditProps & {
+    renderFormWidget: UseFormWidgetReturn["renderFormWidget"];
+}) => UseTableEditReturn;