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>
+  );
+};