@megha-ui/react 1.3.92 → 1.3.93

package/dist/components/grid/utils/gridFilterDropdown.d.ts

@@ -1,14 +1,37 @@
 import React from "react";
+interface DropdownOption {
+    label: string;
+    value: string;
+    action: (columnKey: string, optionValue: string) => void;
+}
 interface MenuPosition {
     top: number;
     left: number;
 }
 interface GridFilterDropdownProps {
+    searchOptions: DropdownOption[];
     position: MenuPosition;
+    columnKey: string;
+    activeSearchType: string;
+    searchElement: any;
     headerDropdownIndex?: number;
+    textFilterLabel: string;
+    columnData: any[];
+    checkboxWrapper?: string;
+    onFilter: (data: {
+        [key: string]: string[];
+    }, key: string) => void;
+    setUniqueSearch: any;
     sortingOps: any;
-    searchOps: any | null;
+    uniqueSearch: {
+        [key: string]: (string | number)[];
+    };
+    searchInput: any;
+    searchable: boolean;
     columnIndex: number;
+    columnType: string;
+    locale?: string;
+    formatOptions?: any;
     portalTarget?: HTMLElement | null;
 }
 declare const GridFilterDropdown: React.FC<GridFilterDropdownProps>;

package/dist/components/grid/utils/gridFilterDropdown.js

@@ -1,24 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-const GridFilterDropdown = ({ headerDropdownIndex, position, sortingOps, searchOps, columnIndex, portalTarget, }) => {
-    const dropdownContent = (_jsx("div", { style: Object.assign(Object.assign({ position: position ? "absolute" : "absolute" }, (position
+import { FiChevronRight } from "react-icons/fi";
+import TextFilterDropdown from "./textFilterDropdown";
+import TextInput from "../../text-input";
+import Checkbox from "../../checkbox";
+import { formatValue } from "../../../services/commonService";
+const GridFilterDropdown = ({ headerDropdownIndex, searchOptions, position, columnKey, searchElement, activeSearchType, textFilterLabel, columnData, checkboxWrapper, onFilter, setUniqueSearch, uniqueSearch, sortingOps, searchable, searchInput, columnIndex, columnType, locale, formatOptions, portalTarget, }) => {
+    var _a, _b, _c, _d;
+    const [isOpen, setIsOpen] = useState(false);
+    const [filterColumnData, setFilterColumnData] = useState([]);
+    const [filterSearch, setFilterSearch] = useState("");
+    const headerDropdown = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (searchElement) {
+            const _searchElement = document.getElementById("search-input");
+            if (_searchElement) {
+                const ele = _searchElement.getElementsByTagName("input");
+                (_a = ele.item(0)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (columnData.length > 0) {
+            setFilterColumnData(columnData.filter((item) => typeof item !== "undefined" &&
+                item !== "" &&
+                `${item}`.toLowerCase().includes(filterSearch.toLowerCase())));
+        }
+    }, [columnData, filterSearch]);
+    const handleSelect = (value, columnKey) => {
+        var _a;
+        let _uniqueSeach = {};
+        if (value === "all") {
+            if (((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                uniqueSearch[columnKey].every((item) => columnData.includes(item))) {
+                _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: [] });
+            }
+            else {
+                _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: columnData });
+            }
+            setUniqueSearch(_uniqueSeach);
+        }
+        else {
+            const newValueArray = uniqueSearch[columnKey] && uniqueSearch[columnKey].includes(value)
+                ? uniqueSearch[columnKey].filter((item) => item !== value)
+                : uniqueSearch[columnKey]
+                    ? [...uniqueSearch[columnKey], value]
+                    : columnData.filter((item) => item !== value);
+            _uniqueSeach = Object.assign(Object.assign({}, uniqueSearch), { [columnKey]: newValueArray });
+            setUniqueSearch(_uniqueSeach);
+        }
+        onFilter(_uniqueSeach, columnKey);
+    };
+    const dropdownContent = (_jsxs("div", { style: Object.assign(Object.assign({ position: position ? "absolute" : "absolute" }, (position
             ? {
                 top: position.top,
                 left: position.left,
             }
-            : Object.assign({ top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })))), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--card-bg, var(--background))", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", border: "1px solid var(--divider, #eceff4)", listStyleType: "none", padding: "0.35rem 0.35rem", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.25rem",
-                minWidth: "12rem",
-            }, children: [sortingOps && (_jsx("div", { style: {
-                        padding: "0.35rem 0.5rem 0.25rem",
-                        borderBottom: searchOps
-                            ? "1px solid var(--divider, #eceff4)"
-                            : "none",
-                    }, children: sortingOps })), searchOps && (_jsx("div", { style: {
-                        padding: "0.25rem 0.5rem 0.35rem",
-                    }, children: searchOps }))] }) }));
+            : Object.assign({ top: "calc(100% + 5px)" }, (columnIndex > 1 ? { right: 0 } : { left: 0 })))), { zIndex: headerDropdownIndex ? headerDropdownIndex : 1000, backgroundColor: "var(--background)", color: "var(--foreground)", boxShadow: "0px 0.5rem 1rem 0px rgba(0,0,0,0.2)", listStyleType: "none", padding: "0.35rem 0", width: "max-content", maxWidth: "500px", borderRadius: "0.5rem", margin: 0 }), ref: headerDropdown, onClick: (e) => e.stopPropagation(), children: [searchInput && searchInput, sortingOps, _jsxs("div", { style: {
+                    padding: "0.5rem 0.75rem",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                }, onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: textFilterLabel }), _jsx(FiChevronRight, {})] }), columnData.length > 0 && (_jsxs("div", { style: {
+                    width: "100%",
+                    maxHeight: 300,
+                    overflow: "auto",
+                    padding: "0.5rem 0.75rem",
+                }, children: [_jsx("div", { className: "mb-2", children: _jsx(TextInput, { placeholder: `filter`, onChange: (e) => setFilterSearch(e.target.value), value: filterSearch, height: 32, width: "100%", className: "w-full", backgroundColor: "var(--background)" }) }), filterColumnData.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                    cursor: "pointer",
+                                    display: "flex",
+                                    alignItems: "center",
+                                }, onClick: () => handleSelect("all", columnKey), children: [_jsx(Checkbox, { id: CSS.escape(columnKey), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) !== "undefined"
+                                            ? ((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                                                filterColumnData.every((item) => uniqueSearch[columnKey].includes(item))
+                                            : true, indeterminate: ((_b = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
+                                            filterColumnData.some((item) => uniqueSearch[columnKey].includes(item)), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: "All" })] }), filterColumnData.map((item) => {
+                                var _a;
+                                return (_jsxs("div", { style: {
+                                        cursor: "pointer",
+                                        display: "flex",
+                                        alignItems: "center",
+                                    }, onClick: () => handleSelect(item, columnKey), children: [_jsx(Checkbox, { id: CSS.escape(`${columnKey}-${item}`), selected: typeof (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) !== "undefined"
+                                                ? (uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey].length) > 0 &&
+                                                    ((_a = uniqueSearch === null || uniqueSearch === void 0 ? void 0 : uniqueSearch[columnKey]) === null || _a === void 0 ? void 0 : _a.includes(item))
+                                                : true, onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }), _jsx("span", { style: { marginLeft: "0.5rem" }, children: formatValue(item, columnType, locale, formatOptions) })] }, item));
+                            })] }))] })), isOpen && (_jsx(TextFilterDropdown, { combined: true, columnIndex: columnIndex, headerDropdownIndex: headerDropdownIndex || 1001, searchOptions: searchOptions, position: position
+                    ? {
+                        top: position.top,
+                        left: ((_c = headerDropdown === null || headerDropdown === void 0 ? void 0 : headerDropdown.current) === null || _c === void 0 ? void 0 : _c.clientWidth)
+                            ? ((_d = headerDropdown === null || headerDropdown === void 0 ? void 0 : headerDropdown.current) === null || _d === void 0 ? void 0 : _d.clientWidth) + 2 + position.left
+                            : position.left,
+                    }
+                    : { top: 0, left: 0 }, columnKey: columnKey, searchElement: searchElement, activeSearchType: activeSearchType, searchable: searchable }))] }));
     // Render in a portal so the dropdown is not occluded
     // by sticky header cells or other stacking contexts.
     return ReactDOM.createPortal(dropdownContent, portalTarget || document.body);