@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

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

@@ -8,9 +8,78 @@ exports.TableFilterRow = exports.GlobalSearchFilter = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _lodashEs = require("lodash-es");
-var _utils = require("../../utils");
+var _utils = require("@wavemaker/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,
@@ -18,7 +87,11 @@ var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.me
     onColumnChange = _ref.onColumnChange,
     columns = _ref.columns,
     _ref$searchLabel = _ref.searchLabel,
-    searchLabel = _ref$searchLabel === void 0 ? "Search" : _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],
@@ -37,27 +110,63 @@ var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.me
   (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 out non-data columns for the dropdown using lodash
-  var actionColumnIds = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
-  var searchableColumns = (0, _lodashEs.filter)(columns || [], function (col) {
-    return (col === null || col === void 0 ? void 0 : col.accessorKey) && !(0, _lodashEs.includes)(actionColumnIds, col === null || col === void 0 ? void 0 : col.id);
-  });
-  var handleSearch = function handleSearch() {
-    // Always update the value when search is triggered
-    onChange(inputValue);
+  // 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]);
 
-    // Update column selection if it changed
+  // Apply filter with current column selection
+  var applyFilter = (0, _react.useCallback)(function (value) {
+    onChange(value);
     if (localSelectedColumn !== selectedColumn) {
       onColumnChange(localSelectedColumn);
     }
-  };
-  var handleKeyDown = function handleKeyDown(e) {
+  }, [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();
-      handleSearch();
+      // Only trigger search manually if filteronkeypress is false
+      if (!filteronkeypress) {
+        handleSearch();
+      }
     }
-  };
+  }, [filteronkeypress, handleSearch]);
   return __jsx(_material.Box, {
     component: "form",
     className: "form-search form-inline",
@@ -71,11 +180,16 @@ var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.me
     className: "form-control app-textbox",
     placeholder: searchLabel,
     value: inputValue,
-    onChange: function onChange(e) {
-      return setInputValue(e.target.value);
-    },
+    onChange: handleInputChange,
     onKeyDown: handleKeyDown,
-    size: "small"
+    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"
@@ -85,15 +199,13 @@ var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.me
     "data-element": "dgFilterValue",
     className: "form-control app-select input-sm",
     value: localSelectedColumn,
-    onChange: function onChange(e) {
-      return setLocalSelectedColumn(e.target.value);
-    }
+    onChange: handleColumnChange
   }, __jsx("option", {
     value: "",
     className: "placeholder"
   }, "Select Field"), (0, _lodashEs.map)(searchableColumns, function (column, index) {
     return __jsx("option", {
-      key: column.id || column.accessorKey,
+      key: (0, _lodashEs.defaultTo)(column.id, column.accessorKey),
       value: column.accessorKey,
       "data-coldef-index": index
     }, column.header);
@@ -111,6 +223,8 @@ var GlobalSearchFilter = exports.GlobalSearchFilter = /*#__PURE__*/(0, _react.me
     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
@@ -130,110 +244,95 @@ var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var _useState4 = (0, _react.useState)(null),
     anchorEl = _useState4[0],
     setAnchorEl = _useState4[1];
-  var _useState5 = (0, _react.useState)("anywhereignorecase"),
+  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]);
-  var handleApplyFilter = function handleApplyFilter() {
-    // Only trigger onChange if the value has actually changed
-    if (localValue !== value) {
-      onChange(columnId, localValue, selectedMatchMode);
+
+  // 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);
     }
-  };
-  var handleKeyDown = function handleKeyDown(e) {
+  }, [localValue, value, columnId, selectedMatchMode, onChange]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === "Enter") {
       e.preventDefault();
-      handleApplyFilter();
+      handleApplyFilter(e);
     }
-    e.stopPropagation(); // Prevent table keyboard shortcuts
-  };
-  var handleFilterIconClick = function handleFilterIconClick(e) {
+    e.stopPropagation();
+  }, [handleApplyFilter]);
+  var handleFilterIconClick = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setAnchorEl(filterButtonRef.current);
-  };
-  var handleClosePopover = function handleClosePopover() {
+  }, []);
+  var handleClosePopover = (0, _react.useCallback)(function () {
     setAnchorEl(null);
-  };
-  var handleMatchModeSelect = function handleMatchModeSelect(matchMode) {
+  }, []);
+  var handleMatchModeSelect = (0, _react.useCallback)(function (matchMode) {
     setSelectedMatchMode(matchMode);
-    if (onMatchModeChange) {
-      onMatchModeChange(columnId, matchMode);
-    }
-    // Apply the filter with new match mode if there's a value
+    onMatchModeChange === null || onMatchModeChange === void 0 || onMatchModeChange(columnId, matchMode);
     if (localValue) {
       onChange(columnId, localValue, matchMode);
     }
     handleClosePopover();
-  };
-
-  // Get the data type from widget type
-  var getDataTypeFromWidget = function getDataTypeFromWidget(widget) {
-    var editType = columnMeta.editinputtype;
-
-    // Check edit input type first
-    if (editType === "number") return "number";
-    if (editType === "date" || editType === "datetime-local" || editType === "time") return "date";
-
-    // Check widget type
-    switch (widget) {
-      case "number":
-      case "currency":
-      case "integer":
-        return "number";
-      case "date":
-      case "datetime":
-      case "time":
-      case "timestamp":
-        return "date";
-      case "text":
-      case "textarea":
-      case "string":
-      default:
-        return "string";
-    }
-  };
-
-  // Get available match modes for the column type
-  var getMatchModes = function getMatchModes() {
-    var dataType = getDataTypeFromWidget(widgetType);
-    var matchModeMap = (0, _utils.getMatchModeTypesMap)();
-    return matchModeMap[dataType] || matchModeMap["default"] || [];
-  };
-  var matchModes = getMatchModes();
-  var matchModeMessages = (0, _utils.getMatchModeMsgs)(listener === null || listener === void 0 ? void 0 : listener.appLocale);
-
-  // Get CSS class based on widget type
-  var getInputGroupClass = function getInputGroupClass() {
-    var dataType = getDataTypeFromWidget(widgetType);
-    switch (dataType) {
-      case "number":
-        return "input-group number input-group-sm";
-      case "date":
-        return "input-group date input-group-sm";
-      default:
-        return "input-group text input-group-sm";
-    }
-  };
-  return __jsx(_material.Box, {
-    component: "div",
+  }, [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: getInputGroupClass()
+    className: inputGroupClass
   }, __jsx(_material.Box, {
+    component: "div",
+    tabIndex: 0,
     onBlur: handleApplyFilter,
     onKeyDown: handleKeyDown,
     onClick: function onClick(e) {
       return e.stopPropagation();
     }
-  }, renderFormWidget(columnId, widgetType, localValue, function (value) {
-    return setLocalValue(value);
-  }, {
+  }, renderFormWidget(columnId, widgetType, localValue, handleLocalValueChange, {
     placeholder: "",
     sessionKey: "filter_".concat(columnId),
     column: columnMeta
-  })), __jsx(_material.Box, {
+  })), __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, {
@@ -247,16 +346,22 @@ var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   }, __jsx(_material.Box, {
     component: "i",
     className: "app-icon wi wi-filter-list"
-  })), Boolean(anchorEl) && __jsx(_material.ClickAwayListener, {
-    onClickAway: handleClosePopover
+  })), __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",
-    style: {
-      position: "absolute",
-      top: "100%",
-      right: 0,
-      zIndex: 1000
-    }
+    className: "dropdown open show"
   }, __jsx(_material.Box, {
     component: "ul",
     className: "matchmode-dropdown dropdown-menu"
@@ -267,6 +372,7 @@ var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       className: selectedMatchMode === mode ? "active" : ""
     }, __jsx(_material.Box, {
       component: "a",
+      href: "javascript:void(0);",
       onClick: function onClick() {
         return handleMatchModeSelect(mode);
       },
@@ -274,8 +380,10 @@ var ColumnFilterCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
         cursor: "pointer",
         textDecoration: "none"
       }
-    }, matchModeMessages[mode] || mode));
+    }, (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) {
@@ -291,28 +399,22 @@ var TableFilterRow = exports.TableFilterRow = /*#__PURE__*/(0, _react.memo)(func
   return __jsx("tr", {
     className: "table-filter-row"
   }, (0, _lodashEs.map)(columns, function (column, index) {
-    var _columnFilters$column;
-    // Use accessorKey as the column ID if id is not present
-    var columnId = column.id || column.accessorKey;
+    var columnId = (0, _lodashEs.defaultTo)(column.id, column.accessorKey);
 
-    // Skip filter for action columns or columns that are not filterable
-    var actionColumnIds = ["actions", "row-operations", "multiSelect", "radioSelect", "row-index"];
-    var isActionColumn = (0, _lodashEs.includes)(actionColumnIds, columnId) || column.isRowIndex;
-    if (isActionColumn || column.enableColumnFilter === false || !column.accessorKey) {
+    // Skip non-filterable columns
+    if (!isFilterableColumn(column)) {
       return __jsx("th", {
         key: columnId
       });
     }
-
-    // Get the original column metadata if available
-    var columnMeta = column.meta || {};
-    var widgetType = columnMeta.editWidgetType || columnMeta.widgetType || "text";
+    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: ((_columnFilters$column = columnFilters[columnId]) === null || _columnFilters$column === void 0 ? void 0 : _columnFilters$column.value) || "",
+      value: (0, _lodashEs.get)(columnFilters, [columnId, "value"], ""),
       onChange: onColumnFilterChange,
       widgetType: widgetType,
       columnMeta: columnMeta,
@@ -321,5 +423,7 @@ var TableFilterRow = exports.TableFilterRow = /*#__PURE__*/(0, _react.memo)(func
       listener: listener
     }));
   }));
+}, function (prevProps, nextProps) {
+  return shallowEqual(prevProps, nextProps, ["columns", "columnFilters", "filterMode", "onColumnFilterChange", "renderFormWidget"]);
 });
 TableFilterRow.displayName = "TableFilterRow";