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

package/components/data/table/components/TableFilters.js

@@ -0,0 +1,429 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableFilterRow = exports.GlobalSearchFilter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _utils = require("@wavemaker-ai/react-runtime/components/data/utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+// Constants
+var ACTION_COLUMN_IDS = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
+var DEFAULT_MATCH_MODE = "anywhereignorecase";
+var DATA_TYPES = {
+  NUMBER: "number",
+  DATE: "date",
+  STRING: "string"
+};
+
+// Menu popup styles for Bootstrap dropdown compatibility
+var MENU_POPUP_STYLES = {
+  paper: {
+    style: {
+      zIndex: 1040,
+      background: "transparent",
+      boxShadow: "none",
+      overflow: "visible"
+    }
+  }
+};
+var MENU_LIST_STYLES = {
+  style: {
+    padding: 0
+  }
+};
+
+// Utility: Get data type from widget configuration
+var getDataType = function getDataType(widgetType, editInputType) {
+  // Check edit input type first
+  if (editInputType === DATA_TYPES.NUMBER) return DATA_TYPES.NUMBER;
+  if ((0, _lodashEs.includes)(["date", "datetime-local", "time"], editInputType)) {
+    return DATA_TYPES.DATE;
+  }
+
+  // Check widget type
+  if ((0, _lodashEs.includes)(["number", "currency", "integer"], widgetType)) {
+    return DATA_TYPES.NUMBER;
+  }
+  if ((0, _lodashEs.includes)(["date", "datetime", "time", "timestamp"], widgetType)) {
+    return DATA_TYPES.DATE;
+  }
+  return DATA_TYPES.STRING;
+};
+
+// Utility: Get input group CSS class based on data type
+var getInputGroupClass = function getInputGroupClass(dataType) {
+  switch (dataType) {
+    case DATA_TYPES.NUMBER:
+      return "input-group number input-group-sm";
+    case DATA_TYPES.DATE:
+      return "input-group date input-group-sm";
+    default:
+      return "input-group text input-group-sm";
+  }
+};
+
+// Utility: Check if column should be filtered
+var isFilterableColumn = function isFilterableColumn(column) {
+  var columnId = (0, _lodashEs.defaultTo)(column.id, column.accessorKey);
+  var isActionColumn = (0, _lodashEs.includes)(ACTION_COLUMN_IDS, columnId) || column.isRowIndex;
+  return !isActionColumn && column.enableColumnFilter !== false && !(0, _lodashEs.isEmpty)(column.accessorKey);
+};
+
+// Utility: Shallow comparison helper for memo
+var shallowEqual = function shallowEqual(prev, next, keys) {
+  return keys.every(function (key) {
+    return prev[key] === next[key];
+  });
+};
+var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    selectedColumn = _ref.selectedColumn,
+    onColumnChange = _ref.onColumnChange,
+    columns = _ref.columns,
+    _ref$searchLabel = _ref.searchLabel,
+    searchLabel = _ref$searchLabel === void 0 ? "Search" : _ref$searchLabel,
+    name = _ref.name,
+    _ref$filteronkeypress = _ref.filteronkeypress,
+    filteronkeypress = _ref$filteronkeypress === void 0 ? false : _ref$filteronkeypress,
+    listener = _ref.listener;
+  // Local state for input value
+  var _useState = (0, _react.useState)(value),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  // Local state for selected column to prevent immediate API calls
+  var _useState2 = (0, _react.useState)(selectedColumn),
+    localSelectedColumn = _useState2[0],
+    setLocalSelectedColumn = _useState2[1];
+
+  // Update local value when prop changes
+  (0, _react.useEffect)(function () {
+    setInputValue(value);
+  }, [value]);
+
+  // Update local column when prop changes
+  (0, _react.useEffect)(function () {
+    setLocalSelectedColumn(selectedColumn);
+  }, [selectedColumn]);
+  var clearLocalSearchControls = (0, _react.useCallback)(function () {
+    setInputValue("");
+    setLocalSelectedColumn("");
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (listener !== null && listener !== void 0 && listener.onChange && name) {
+      listener.onChange(name, {
+        clearFilter: clearLocalSearchControls
+      });
+    }
+  }, [clearLocalSearchControls, name]);
+
+  // Filter searchable columns - memoize to prevent recalculation
+  var searchableColumns = (0, _react.useMemo)(function () {
+    return (0, _lodashEs.filter)((0, _lodashEs.defaultTo)(columns, []), function (col) {
+      return !(0, _lodashEs.isEmpty)(col === null || col === void 0 ? void 0 : col.accessorKey) && !(0, _lodashEs.includes)(ACTION_COLUMN_IDS, col === null || col === void 0 ? void 0 : col.id);
+    });
+  }, [columns]);
+
+  // Apply filter with current column selection
+  var applyFilter = (0, _react.useCallback)(function (value) {
+    onChange(value);
+    if (localSelectedColumn !== selectedColumn) {
+      onColumnChange(localSelectedColumn);
+    }
+  }, [onChange, onColumnChange, localSelectedColumn, selectedColumn]);
+  var handleColumnChange = (0, _react.useCallback)(function (e) {
+    var newColumn = e.target.value;
+    setLocalSelectedColumn(newColumn);
+
+    // If filteronkeypress is true, apply filter immediately when column changes
+    if (filteronkeypress && inputValue) {
+      onColumnChange(newColumn);
+      onChange(inputValue);
+    }
+  }, [filteronkeypress, inputValue, onColumnChange, onChange]);
+  var handleSearch = (0, _react.useCallback)(function () {
+    applyFilter(inputValue);
+  }, [applyFilter, inputValue]);
+  var handleInputChange = (0, _react.useCallback)(function (e) {
+    var newValue = e.target.value;
+    setInputValue(newValue);
+
+    // If filteronkeypress is true, apply filter on every keystroke
+    if (filteronkeypress) {
+      applyFilter(newValue);
+    }
+  }, [filteronkeypress, applyFilter]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      // Only trigger search manually if filteronkeypress is false
+      if (!filteronkeypress) {
+        handleSearch();
+      }
+    }
+  }, [filteronkeypress, handleSearch]);
+  return __jsx(_material.Box, {
+    component: "form",
+    className: "form-search form-inline",
+    onSubmit: function onSubmit(e) {
+      return e.preventDefault();
+    }
+  }, __jsx(_material.Box, {
+    className: "form-group form-group-sm"
+  }, __jsx(_material.Input, {
+    type: "text",
+    className: "form-control app-textbox",
+    placeholder: searchLabel,
+    value: inputValue,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    size: "small",
+    sx: {
+      "& input::placeholder": {
+        color: "text.secondary",
+        opacity: 0.7,
+        fontWeight: "normal"
+      }
+    }
+  })), __jsx(_material.Box, {
+    className: "input-append input-group input-group-sm",
+    component: "div"
+  }, __jsx(_material.Box, {
+    component: "select",
+    name: "wm-datatable",
+    "data-element": "dgFilterValue",
+    className: "form-control app-select input-sm",
+    value: localSelectedColumn,
+    onChange: handleColumnChange
+  }, __jsx("option", {
+    value: "",
+    className: "placeholder"
+  }, "Select Field"), (0, _lodashEs.map)(searchableColumns, function (column, index) {
+    return __jsx("option", {
+      key: (0, _lodashEs.defaultTo)(column.id, column.accessorKey),
+      value: column.accessorKey,
+      "data-coldef-index": index
+    }, column.header);
+  })), __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-addon"
+  }, __jsx(_material.Box, {
+    component: "button",
+    type: "button",
+    "data-element": "dgSearchButton",
+    className: "app-search-button",
+    title: searchLabel,
+    onClick: handleSearch
+  }, __jsx(_material.Box, {
+    component: "i",
+    className: "wi wi-search"
+  })))));
+}, function (prevProps, nextProps) {
+  return shallowEqual(prevProps, nextProps, ["value", "selectedColumn", "columns", "searchLabel", "name", "filteronkeypress", "onChange", "onColumnChange"]);
+});
+GlobalSearchFilter.displayName = "GlobalSearchFilter";
+// Component to handle individual column filter with local state
+var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var columnId = _ref2.columnId,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    widgetType = _ref2.widgetType,
+    columnMeta = _ref2.columnMeta,
+    columnAccessorKey = _ref2.columnAccessorKey,
+    listener = _ref2.listener,
+    renderFormWidget = _ref2.renderFormWidget,
+    onMatchModeChange = _ref2.onMatchModeChange;
+  var _useState3 = (0, _react.useState)(value),
+    localValue = _useState3[0],
+    setLocalValue = _useState3[1];
+  var _useState4 = (0, _react.useState)(null),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var _useState5 = (0, _react.useState)(DEFAULT_MATCH_MODE),
+    selectedMatchMode = _useState5[0],
+    setSelectedMatchMode = _useState5[1];
+  var filterButtonRef = (0, _react.useRef)(null);
+
+  // Sync local value with prop changes
+  (0, _react.useEffect)(function () {
+    setLocalValue(value);
+  }, [value]);
+
+  // Memoize data type, match modes, and CSS classes
+  var dataType = (0, _react.useMemo)(function () {
+    return getDataType(widgetType, columnMeta.editinputtype);
+  }, [widgetType, columnMeta.editinputtype]);
+  var matchModes = (0, _react.useMemo)(function () {
+    var matchModeMap = (0, _utils.getMatchModeTypesMap)();
+    return (0, _lodashEs.get)(matchModeMap, dataType, (0, _lodashEs.get)(matchModeMap, "default", []));
+  }, [dataType]);
+  var matchModeMessages = (0, _react.useMemo)(function () {
+    return (0, _utils.getMatchModeMsgs)(listener === null || listener === void 0 ? void 0 : listener.appLocale);
+  }, [listener === null || listener === void 0 ? void 0 : listener.appLocale]);
+  var inputGroupClass = (0, _react.useMemo)(function () {
+    return getInputGroupClass(dataType);
+  }, [dataType]);
+
+  // Event handlers
+  var handleApplyFilter = (0, _react.useCallback)(function (e) {
+    var inputValue = (0, _lodashEs.defaultTo)(e.target.value, localValue);
+    if (inputValue !== value) {
+      onChange(columnId, inputValue, selectedMatchMode);
+    }
+  }, [localValue, value, columnId, selectedMatchMode, onChange]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApplyFilter(e);
+    }
+    e.stopPropagation();
+  }, [handleApplyFilter]);
+  var handleFilterIconClick = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setAnchorEl(filterButtonRef.current);
+  }, []);
+  var handleClosePopover = (0, _react.useCallback)(function () {
+    setAnchorEl(null);
+  }, []);
+  var handleMatchModeSelect = (0, _react.useCallback)(function (matchMode) {
+    setSelectedMatchMode(matchMode);
+    onMatchModeChange === null || onMatchModeChange === void 0 || onMatchModeChange(columnId, matchMode);
+    if (localValue) {
+      onChange(columnId, localValue, matchMode);
+    }
+    handleClosePopover();
+  }, [columnId, localValue, onChange, onMatchModeChange, handleClosePopover]);
+  var handleClearFilterIconClick = (0, _react.useCallback)(function () {
+    onChange(columnId, "", selectedMatchMode);
+    setLocalValue("");
+  }, [columnId, selectedMatchMode, onChange]);
+  var handleLocalValueChange = (0, _react.useCallback)(function (value) {
+    setLocalValue(value);
+  }, []);
+  return __jsx("div", {
+    "data-col-identifier": columnAccessorKey,
+    className: inputGroupClass
+  }, __jsx(_material.Box, {
+    component: "div",
+    tabIndex: 0,
+    onBlur: handleApplyFilter,
+    onKeyDown: handleKeyDown,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, renderFormWidget(columnId, widgetType, localValue, handleLocalValueChange, {
+    placeholder: "",
+    sessionKey: "filter_".concat(columnId),
+    column: columnMeta
+  })), __jsx("span", {
+    className: "input-group-addon filter-clear-icon"
+  }, __jsx(_material.Box, {
+    hidden: (0, _lodashEs.isEmpty)(localValue),
+    component: "button",
+    type: "button",
+    className: "btn-transparent btn app-button",
+    "aria-haspopup": "true",
+    "aria-expanded": Boolean(anchorEl),
+    onClick: handleClearFilterIconClick
+  }, __jsx("i", {
+    className: "app-icon wi wi-clear"
+  }))), __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-addon"
+  }, __jsx(_material.Box, {
+    ref: filterButtonRef,
+    component: "button",
+    type: "button",
+    className: "btn-transparent btn app-button",
+    "aria-haspopup": "true",
+    "aria-expanded": Boolean(anchorEl),
+    onClick: handleFilterIconClick
+  }, __jsx(_material.Box, {
+    component: "i",
+    className: "app-icon wi wi-filter-list"
+  })), __jsx(_material.Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleClosePopover,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    slotProps: MENU_POPUP_STYLES,
+    MenuListProps: MENU_LIST_STYLES
+  }, __jsx(_material.Box, {
+    className: "dropdown open show"
+  }, __jsx(_material.Box, {
+    component: "ul",
+    className: "matchmode-dropdown dropdown-menu"
+  }, (0, _lodashEs.map)(matchModes, function (mode) {
+    return __jsx(_material.Box, {
+      key: mode,
+      component: "li",
+      className: selectedMatchMode === mode ? "active" : ""
+    }, __jsx(_material.Box, {
+      component: "a",
+      href: "javascript:void(0);",
+      onClick: function onClick() {
+        return handleMatchModeSelect(mode);
+      },
+      sx: {
+        cursor: "pointer",
+        textDecoration: "none"
+      }
+    }, (0, _lodashEs.get)(matchModeMessages, mode, mode)));
+  }))))));
+}, function (prevProps, nextProps) {
+  return shallowEqual(prevProps, nextProps, ["columnId", "value", "widgetType", "columnMeta", "columnAccessorKey", "onChange", "renderFormWidget", "onMatchModeChange"]);
+});
+ColumnFilterCell.displayName = "ColumnFilterCell";
+var TableFilterRow = exports.TableFilterRow = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var columns = _ref3.columns,
+    columnFilters = _ref3.columnFilters,
+    onColumnFilterChange = _ref3.onColumnFilterChange,
+    filterMode = _ref3.filterMode,
+    renderFormWidget = _ref3.renderFormWidget,
+    listener = _ref3.listener;
+  if (filterMode !== "multicolumn") {
+    return null;
+  }
+  return __jsx("tr", {
+    className: "table-filter-row"
+  }, (0, _lodashEs.map)(columns, function (column, index) {
+    var columnId = (0, _lodashEs.defaultTo)(column.id, column.accessorKey);
+
+    // Skip non-filterable columns
+    if (!isFilterableColumn(column)) {
+      return __jsx("th", {
+        key: columnId
+      });
+    }
+    var columnMeta = (0, _lodashEs.defaultTo)(column.meta, {});
+    var widgetType = (0, _lodashEs.defaultTo)(columnMeta.editWidgetType, (0, _lodashEs.defaultTo)(columnMeta.widgetType, "text"));
+    return __jsx("th", {
+      key: columnId,
+      "data-col-id": index + 1
+    }, __jsx(ColumnFilterCell, {
+      columnId: columnId,
+      value: (0, _lodashEs.get)(columnFilters, [columnId, "value"], ""),
+      onChange: onColumnFilterChange,
+      widgetType: widgetType,
+      columnMeta: columnMeta,
+      columnAccessorKey: column.accessorKey,
+      renderFormWidget: renderFormWidget,
+      listener: listener
+    }));
+  }));
+}, function (prevProps, nextProps) {
+  return shallowEqual(prevProps, nextProps, ["columns", "columnFilters", "filterMode", "onColumnFilterChange", "renderFormWidget"]);
+});
+TableFilterRow.displayName = "TableFilterRow";

package/components/data/table/components/TableFooterActions.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TableFooterActionsProps } from "../props";
+export declare const TableFooterActions: React.FC<TableFooterActionsProps>;

package/components/data/table/components/TableFooterActions.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableFooterActions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _tableAction = require("../table-action");
+var _utils = require("../utils");
+var __jsx = _react["default"].createElement;
+var TableFooterActions = exports.TableFooterActions = function TableFooterActions(_ref) {
+  var footerActions = _ref.footerActions,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? "normal" : _ref$spacing,
+    _ref$isGridEditMode = _ref.isGridEditMode,
+    isGridEditMode = _ref$isGridEditMode === void 0 ? false : _ref$isGridEditMode,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    listener = _ref.listener;
+  if (footerActions.length === 0) {
+    return null;
+  }
+  return __jsx(_material.Box, {
+    className: "app-datagrid-actions"
+  }, footerActions.map(function (action, index) {
+    return __jsx(_tableAction.WmTableAction, {
+      key: "footer-action-".concat(index, "-").concat(action.key || action.name),
+      className: (0, _utils.getButtonClasses)(action, spacing, isGridEditMode, isLoading),
+      "data-action-key": action.key,
+      onClick: action.onClick,
+      name: action["displayName"] || action.name || "Action",
+      displayName: action["displayName"],
+      title: action.title,
+      iconclass: action.iconclass,
+      action: action.action,
+      position: action.position,
+      shortcutkey: action.shortcutkey,
+      tabindex: typeof action.tabindex === "string" ? parseInt(action.tabindex, 10) : action.tabindex,
+      widgetType: action.widgetType,
+      listener: listener,
+      disabled: action.disabled || action.key === "addNewRow" && (isGridEditMode || isLoading),
+      show: action.show,
+      styles: action.styles
+    }, action.children);
+  }));
+};

package/components/data/table/components/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TableHeaderProps } from "../props";
+export declare const TableHeaderComponent: React.FC<TableHeaderProps>;