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

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

@@ -0,0 +1,430 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { Box, Input, Menu } from "@mui/material";
+import { filter, map, includes, get, isEmpty, defaultTo } from "lodash-es";
+import {
+  getMatchModeTypesMap,
+  getMatchModeMsgs
+} from "../../utils";
+const ACTION_COLUMN_IDS = [
+  "actions",
+  "row-operations",
+  "multiSelect",
+  "radioSelect",
+  "row-index"
+];
+const DEFAULT_MATCH_MODE = "anywhereignorecase";
+const DATA_TYPES = {
+  NUMBER: "number",
+  DATE: "date",
+  STRING: "string"
+};
+const MENU_POPUP_STYLES = {
+  paper: {
+    style: {
+      zIndex: 1040,
+      background: "transparent",
+      boxShadow: "none",
+      overflow: "visible"
+    }
+  }
+};
+const MENU_LIST_STYLES = {
+  style: { padding: 0 }
+};
+const getDataType = (widgetType, editInputType) => {
+  if (editInputType === DATA_TYPES.NUMBER) return DATA_TYPES.NUMBER;
+  if (includes(["date", "datetime-local", "time"], editInputType)) {
+    return DATA_TYPES.DATE;
+  }
+  if (includes(["number", "currency", "integer"], widgetType)) {
+    return DATA_TYPES.NUMBER;
+  }
+  if (includes(["date", "datetime", "time", "timestamp"], widgetType)) {
+    return DATA_TYPES.DATE;
+  }
+  return DATA_TYPES.STRING;
+};
+const 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";
+  }
+};
+const isFilterableColumn = (column) => {
+  const columnId = defaultTo(column.id, column.accessorKey);
+  const isActionColumn = includes(ACTION_COLUMN_IDS, columnId) || column.isRowIndex;
+  return !isActionColumn && column.enableColumnFilter !== false && !isEmpty(column.accessorKey);
+};
+const shallowEqual = (prev, next, keys) => {
+  return keys.every((key) => prev[key] === next[key]);
+};
+const GlobalSearchFilter = memo(
+  ({
+    value,
+    onChange,
+    selectedColumn,
+    onColumnChange,
+    columns,
+    searchLabel = "Search",
+    name,
+    filteronkeypress = false,
+    listener
+  }) => {
+    const [inputValue, setInputValue] = useState(value);
+    const [localSelectedColumn, setLocalSelectedColumn] = useState(selectedColumn);
+    useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+    useEffect(() => {
+      setLocalSelectedColumn(selectedColumn);
+    }, [selectedColumn]);
+    const clearLocalSearchControls = useCallback(() => {
+      setInputValue("");
+      setLocalSelectedColumn("");
+    }, []);
+    useEffect(() => {
+      if ((listener == null ? void 0 : listener.onChange) && name) {
+        listener.onChange(name, { clearFilter: clearLocalSearchControls });
+      }
+    }, [clearLocalSearchControls, name]);
+    const searchableColumns = useMemo(
+      () => filter(
+        defaultTo(columns, []),
+        (col) => !isEmpty(col == null ? void 0 : col.accessorKey) && !includes(ACTION_COLUMN_IDS, col == null ? void 0 : col.id)
+      ),
+      [columns]
+    );
+    const applyFilter = useCallback(
+      (value2) => {
+        onChange(value2);
+        if (localSelectedColumn !== selectedColumn) {
+          onColumnChange(localSelectedColumn);
+        }
+      },
+      [onChange, onColumnChange, localSelectedColumn, selectedColumn]
+    );
+    const handleColumnChange = useCallback(
+      (e) => {
+        const newColumn = e.target.value;
+        setLocalSelectedColumn(newColumn);
+        if (filteronkeypress && inputValue) {
+          onColumnChange(newColumn);
+          onChange(inputValue);
+        }
+      },
+      [filteronkeypress, inputValue, onColumnChange, onChange]
+    );
+    const handleSearch = useCallback(() => {
+      applyFilter(inputValue);
+    }, [applyFilter, inputValue]);
+    const handleInputChange = useCallback(
+      (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        if (filteronkeypress) {
+          applyFilter(newValue);
+        }
+      },
+      [filteronkeypress, applyFilter]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (!filteronkeypress) {
+            handleSearch();
+          }
+        }
+      },
+      [filteronkeypress, handleSearch]
+    );
+    return /* @__PURE__ */ jsxs(Box, { component: "form", className: "form-search form-inline", onSubmit: (e) => e.preventDefault(), children: [
+      /* @__PURE__ */ jsx(Box, { className: "form-group form-group-sm", children: /* @__PURE__ */ jsx(
+        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"
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { className: "input-append input-group input-group-sm", component: "div", children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "select",
+            name: "wm-datatable",
+            "data-element": "dgFilterValue",
+            className: "form-control app-select input-sm",
+            value: localSelectedColumn,
+            onChange: handleColumnChange,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", className: "placeholder", children: "Select Field" }),
+              map(searchableColumns, (column, index) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: column.accessorKey,
+                  "data-coldef-index": index,
+                  children: column.header
+                },
+                defaultTo(column.id, column.accessorKey)
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            "data-element": "dgSearchButton",
+            className: "app-search-button",
+            title: searchLabel,
+            onClick: handleSearch,
+            children: /* @__PURE__ */ jsx(Box, { component: "i", className: "wi wi-search" })
+          }
+        ) })
+      ] })
+    ] });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "value",
+    "selectedColumn",
+    "columns",
+    "searchLabel",
+    "name",
+    "filteronkeypress",
+    "onChange",
+    "onColumnChange"
+  ])
+);
+GlobalSearchFilter.displayName = "GlobalSearchFilter";
+const ColumnFilterCell = memo(
+  ({
+    columnId,
+    value,
+    onChange,
+    widgetType,
+    columnMeta,
+    columnAccessorKey,
+    listener,
+    renderFormWidget,
+    onMatchModeChange
+  }) => {
+    const [localValue, setLocalValue] = useState(value);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedMatchMode, setSelectedMatchMode] = useState(DEFAULT_MATCH_MODE);
+    const filterButtonRef = useRef(null);
+    useEffect(() => {
+      setLocalValue(value);
+    }, [value]);
+    const dataType = useMemo(
+      () => getDataType(widgetType, columnMeta.editinputtype),
+      [widgetType, columnMeta.editinputtype]
+    );
+    const matchModes = useMemo(() => {
+      const matchModeMap = getMatchModeTypesMap();
+      return get(matchModeMap, dataType, get(matchModeMap, "default", []));
+    }, [dataType]);
+    const matchModeMessages = useMemo(
+      () => getMatchModeMsgs(listener == null ? void 0 : listener.appLocale),
+      [listener == null ? void 0 : listener.appLocale]
+    );
+    const inputGroupClass = useMemo(() => getInputGroupClass(dataType), [dataType]);
+    const handleApplyFilter = useCallback(
+      (e) => {
+        const inputValue = defaultTo(e.target.value, localValue);
+        if (inputValue !== value) {
+          onChange(columnId, inputValue, selectedMatchMode);
+        }
+      },
+      [localValue, value, columnId, selectedMatchMode, onChange]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleApplyFilter(e);
+        }
+        e.stopPropagation();
+      },
+      [handleApplyFilter]
+    );
+    const handleFilterIconClick = useCallback((e) => {
+      e.stopPropagation();
+      setAnchorEl(filterButtonRef.current);
+    }, []);
+    const handleClosePopover = useCallback(() => {
+      setAnchorEl(null);
+    }, []);
+    const handleMatchModeSelect = useCallback(
+      (matchMode) => {
+        setSelectedMatchMode(matchMode);
+        onMatchModeChange == null ? void 0 : onMatchModeChange(columnId, matchMode);
+        if (localValue) {
+          onChange(columnId, localValue, matchMode);
+        }
+        handleClosePopover();
+      },
+      [columnId, localValue, onChange, onMatchModeChange, handleClosePopover]
+    );
+    const handleClearFilterIconClick = useCallback(() => {
+      onChange(columnId, "", selectedMatchMode);
+      setLocalValue("");
+    }, [columnId, selectedMatchMode, onChange]);
+    const handleLocalValueChange = useCallback((value2) => {
+      setLocalValue(value2);
+    }, []);
+    return /* @__PURE__ */ jsxs("div", { "data-col-identifier": columnAccessorKey, className: inputGroupClass, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "div",
+          tabIndex: 0,
+          onBlur: handleApplyFilter,
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation(),
+          children: renderFormWidget(columnId, widgetType, localValue, handleLocalValueChange, {
+            placeholder: "",
+            sessionKey: `filter_${columnId}`,
+            column: columnMeta
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "input-group-addon filter-clear-icon", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          hidden: isEmpty(localValue),
+          component: "button",
+          type: "button",
+          className: "btn-transparent btn app-button",
+          "aria-haspopup": "true",
+          "aria-expanded": Boolean(anchorEl),
+          onClick: handleClearFilterIconClick,
+          children: /* @__PURE__ */ jsx("i", { className: "app-icon wi wi-clear" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Box, { component: "span", className: "input-group-addon", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: filterButtonRef,
+            component: "button",
+            type: "button",
+            className: "btn-transparent btn app-button",
+            "aria-haspopup": "true",
+            "aria-expanded": Boolean(anchorEl),
+            onClick: handleFilterIconClick,
+            children: /* @__PURE__ */ jsx(Box, { component: "i", className: "app-icon wi wi-filter-list" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            anchorEl,
+            open: Boolean(anchorEl),
+            onClose: handleClosePopover,
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
+            slotProps: MENU_POPUP_STYLES,
+            MenuListProps: MENU_LIST_STYLES,
+            children: /* @__PURE__ */ jsx(Box, { className: "dropdown open show", children: /* @__PURE__ */ jsx(Box, { component: "ul", className: "matchmode-dropdown dropdown-menu", children: map(matchModes, (mode) => /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "li",
+                className: selectedMatchMode === mode ? "active" : "",
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "a",
+                    href: "javascript:void(0);",
+                    onClick: () => handleMatchModeSelect(mode),
+                    sx: { cursor: "pointer", textDecoration: "none" },
+                    children: get(matchModeMessages, mode, mode)
+                  }
+                )
+              },
+              mode
+            )) }) })
+          }
+        )
+      ] })
+    ] });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "columnId",
+    "value",
+    "widgetType",
+    "columnMeta",
+    "columnAccessorKey",
+    "onChange",
+    "renderFormWidget",
+    "onMatchModeChange"
+  ])
+);
+ColumnFilterCell.displayName = "ColumnFilterCell";
+const TableFilterRow = memo(
+  ({
+    columns,
+    columnFilters,
+    onColumnFilterChange,
+    filterMode,
+    renderFormWidget,
+    listener
+  }) => {
+    if (filterMode !== "multicolumn") {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("tr", { className: "table-filter-row", children: map(columns, (column, index) => {
+      const columnId = defaultTo(column.id, column.accessorKey);
+      if (!isFilterableColumn(column)) {
+        return /* @__PURE__ */ jsx("th", {}, columnId);
+      }
+      const columnMeta = defaultTo(column.meta, {});
+      const widgetType = defaultTo(
+        columnMeta.editWidgetType,
+        defaultTo(columnMeta.widgetType, "text")
+      );
+      return /* @__PURE__ */ jsx("th", { "data-col-id": index + 1, children: /* @__PURE__ */ jsx(
+        ColumnFilterCell,
+        {
+          columnId,
+          value: get(columnFilters, [columnId, "value"], ""),
+          onChange: onColumnFilterChange,
+          widgetType,
+          columnMeta,
+          columnAccessorKey: column.accessorKey,
+          renderFormWidget,
+          listener
+        }
+      ) }, columnId);
+    }) });
+  },
+  (prevProps, nextProps) => shallowEqual(prevProps, nextProps, [
+    "columns",
+    "columnFilters",
+    "filterMode",
+    "onColumnFilterChange",
+    "renderFormWidget"
+  ])
+);
+TableFilterRow.displayName = "TableFilterRow";
+export {
+  GlobalSearchFilter,
+  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,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { WmTableAction } from "../table-action";
+import { getButtonClasses } from "../utils";
+const TableFooterActions = ({
+  footerActions,
+  spacing = "normal",
+  isGridEditMode = false,
+  isLoading = false,
+  listener
+}) => {
+  if (footerActions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { className: "app-datagrid-actions", children: footerActions.map((action, index) => /* @__PURE__ */ jsx(
+    WmTableAction,
+    {
+      className: 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,
+      disabled: action.disabled || action.key === "addNewRow" && (isGridEditMode || isLoading),
+      show: action.show,
+      styles: action.styles,
+      children: action.children
+    },
+    `footer-action-${index}-${action.key || action.name}`
+  )) });
+};
+export {
+  TableFooterActions
+};

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>;