@megha-ui/react 1.3.84 → 1.3.87

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

@@ -1,37 +1,14 @@
 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;
-    uniqueSearch: {
-        [key: string]: (string | number)[];
-    };
-    searchInput: any;
-    searchable: boolean;
+    searchOps: any | null;
     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,100 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import ReactDOM from "react-dom";
-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 GridFilterDropdown = ({ headerDropdownIndex, position, sortingOps, searchOps, columnIndex, portalTarget, }) => {
     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(--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 }))] }));
+            : 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 }), onClick: (e) => e.stopPropagation(), children: [sortingOps, searchOps] }));
     // 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);