@eztrak/shared 0.6.9 → 0.7.0

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   Modal: () => Modal,
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
+  SearchInput: () => SearchInput,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   capitalizeText: () => capitalizeText,
   checkIfExistsInArray: () => checkIfExistsInArray,
@@ -999,17 +1000,132 @@ function ResetFiltersButton({
   );
 }
 
+// src/components/search-filters/SearchInput.tsx
+var import_react4 = require("react");
+var import_fi = require("react-icons/fi");
+var import_react_router_dom3 = require("react-router-dom");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SearchInput({
+  placeholder = "Search...",
+  searchBtn = "",
+  searchClassName = "",
+  searchWrapperClass = "",
+  searchIconClassName = "",
+  defaultParam = "query",
+  showIcon = true,
+  name = "search",
+  type = "search",
+  liveSearch = false,
+  debounceDelay = 500,
+  customIcon = null,
+  defaultValue,
+  ...props
+}) {
+  const [searchParams, setSearchParams] = (0, import_react_router_dom3.useSearchParams)();
+  const queryParam = searchParams.get(defaultParam) || defaultValue || "";
+  const [inputValue, setInputValue] = (0, import_react4.useState)(queryParam);
+  const debounceTimerRef = (0, import_react4.useRef)(null);
+  const updateSearchParams = (searchQuery) => {
+    if (searchQuery?.trim()) {
+      setSearchParams((prev) => {
+        prev.set(defaultParam, searchQuery.trim());
+        return prev;
+      });
+    } else {
+      setSearchParams((prev) => {
+        prev.delete(defaultParam);
+        return prev;
+      });
+    }
+  };
+  const handleSearch = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const searchQuery = formData.get(name);
+    updateSearchParams(String(searchQuery ?? ""));
+  };
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setInputValue(value);
+    if (liveSearch) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        updateSearchParams(value);
+      }, debounceDelay);
+    }
+    if (value === "") {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      setInputValue("");
+      updateSearchParams("");
+    }
+  };
+  (0, import_react4.useEffect)(() => {
+    setInputValue(queryParam);
+  }, [queryParam]);
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "form",
+    {
+      onSubmit: handleSearch,
+      className: cn(
+        "flex items-center justify-between bg-white rounded-md px-2 h-11",
+        searchWrapperClass
+      ),
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "submit",
+            className: cn(
+              "bg-white text-secondary rounded-full flex items-center justify-center w-10 h-10",
+              searchBtn
+            ),
+            children: customIcon ? customIcon : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_fi.FiSearch,
+              {
+                className: cn("h-5 w-5 text-gray-400", searchIconClassName)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            value: inputValue,
+            onChange: handleInputChange,
+            name,
+            type,
+            className: cn("outline-none text-sm w-96", searchClassName),
+            placeholder,
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/modal/Modal.tsx
 var import_framer_motion = require("framer-motion");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
 var import_fa = require("react-icons/fa");
 var import_io5 = require("react-icons/io5");
 
 // src/components/Loader/Loader.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `loader`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       className: `spinner ${className}`,
@@ -1026,7 +1142,7 @@ var Loader = ({ className, color = "#F54C00", size = "50px", speed = "1s" }) =>
 };
 
 // src/components/modal/Modal.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Modal({
   isOpen,
   onClose,
@@ -1046,13 +1162,13 @@ function Modal({
   customLoader = null,
   footerClassName
 }) {
-  const modalRef = (0, import_react4.useRef)(null);
+  const modalRef = (0, import_react5.useRef)(null);
   const handleBackdropClick = (e) => {
     if (e.target === e.currentTarget && closeOnBackdropClick) {
       onClose();
     }
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen && closeOnEscape) {
         onClose();
@@ -1067,7 +1183,7 @@ function Modal({
       document.body.style.overflow = "unset";
     };
   }, [isOpen, onClose, closeOnEscape]);
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-1000 p-4",
@@ -1086,7 +1202,7 @@ function Modal({
         zIndex
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           import_framer_motion.motion.div,
           {
             ref: modalRef,
@@ -1107,7 +1223,7 @@ function Modal({
               // Ensure modal doesn't exceed viewport height
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                 "div",
                 {
                   style: {
@@ -1115,43 +1231,43 @@ function Modal({
                   },
                   className: "sticky top-0 z-10 flex justify-between items-center bg-white text-2xl p-8 pb-4 rounded-t-3xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "font-semibold", children: title }),
-                    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center space-x-4", children: [
-                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "font-semibold", children: title }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center space-x-4", children: [
+                      onPrint && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         "button",
                         {
                           onClick: onPrint,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Print" })
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaPrint, { name: "FaPrint" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Print" })
                           ]
                         }
                       ),
-                      onExport && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                      onExport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                         "button",
                         {
                           onClick: onExport,
                           className: "flex items-center gap-1 hover:text-gray-300 text-sm border p-1 rounded",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fa.FaFileExport, {}),
-                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Export" })
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fa.FaFileExport, {}),
+                            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Export" })
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         "button",
                         {
                           onClick: onClose,
                           className: "px-2 hover:opacity-70 transition-opacity",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_io5.IoCloseCircleOutline, { color: "#8898AA", size: 25 })
                         }
                       )
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   className: cn(
@@ -1161,7 +1277,7 @@ function Modal({
                   children
                 }
               ),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "div",
                 {
                   className: cn("sticky bottom-0 flex justify-end p-4 space-x-4 border-t bg-white ", footerClassName),
@@ -1175,7 +1291,7 @@ function Modal({
             ]
           }
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: "fixed inset-0 flex items-center justify-center bg-gray-200/60",
@@ -1184,7 +1300,7 @@ function Modal({
             "aria-live": "polite",
             role: "status",
             onClick: (e) => e.stopPropagation(),
-            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loader, { size: "48px" })
+            children: customLoader ? customLoader : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader, { size: "48px" })
           }
         )
       ]
@@ -1206,6 +1322,7 @@ function Modal({
   Modal,
   ResetColumnsButton,
   ResetFiltersButton,
+  SearchInput,
   TableLayoutToolbarControls,
   capitalizeText,
   checkIfExistsInArray,