update

src/components/ReactTable4/GlobalFilter.js

@@ -58,46 +58,46 @@ export const GlobalFilter = ({ filter, setFilter }) => {
 
 // ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم
 
-import React, { useState } from "react";
-import { useAsyncDebounce } from "react-table";
+// import React, { useState } from "react";
+// import { useAsyncDebounce } from "react-table";
 
-import search from "./search-normal.svg";
-import cancleIcon from "./zarbedar-icon.svg";
+// import search from "./search-normal.svg";
+// import cancleIcon from "./zarbedar-icon.svg";
 
-export const GlobalFilter = ({ filter, setFilter }) => {
-  const [activeSearchBox, setActiveSearchBox] = useState(false);
+// export const GlobalFilter = ({ filter, setFilter }) => {
+//   const [activeSearchBox, setActiveSearchBox] = useState(false);
 
-  const [value, setValue] = useState(filter);
+//   const [value, setValue] = useState(filter);
 
-  const onChange = useAsyncDebounce((value) => {
-    setFilter(value || undefined);
-  }, 400);
+//   const onChange = useAsyncDebounce((value) => {
+//     setFilter(value || undefined);
+//   }, 400);
 
-  return (
-    <div className="flex flex-row-reverse items-center relative ml-2 ">
-      {activeSearchBox === true ? (
-        <img
-          src={cancleIcon}
-          alt=""
-          className="w-3 h-3 absolute left-2 cursor-pointer"
-        />
-      ) : (
-        <img
-          src={search}
-          alt=""
-          className="w-4 h-4 absolute left-2 cursor-pointer"
-        />
-      )}
-      <input
-        value={filter || ""}
-        onChange={(e) => setFilter(e.target.value)}
-        onFocus={() => setActiveSearchBox(true)}
-        onBlur={() => setActiveSearchBox(false)}
-        type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
-        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
-      />
-      {console.log(activeSearchBox)}{" "}
-    </div>
-  );
-};
+//   return (
+//     <div className="flex flex-row-reverse items-center relative ml-2 ">
+//       {activeSearchBox === true ? (
+//         <img
+//           src={cancleIcon}
+//           alt=""
+//           className="w-3 h-3 absolute left-2 cursor-pointer"
+//         />
+//       ) : (
+//         <img
+//           src={search}
+//           alt=""
+//           className="w-4 h-4 absolute left-2 cursor-pointer"
+//         />
+//       )}
+//       <input
+//         value={filter || ""}
+//         onChange={(e) => setFilter(e.target.value)}
+//         onFocus={() => setActiveSearchBox(true)}
+//         onBlur={() => setActiveSearchBox(false)}
+//         type="text"
+//         className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
+//         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
+//       />
+//       {console.log(activeSearchBox)}{" "}
+//     </div>
+//   );
+// };