update

src/components/ReactTable5/BasicTable.js

@@ -10,6 +10,7 @@ import { COLUMNS } from "./COLUMNS";
 
 import grid from "./grid.svg";
 import list from "./list.svg";
+import graySearchIcon from "./gray-search-icon.svg";
 
 import RenderRowSubComponent from "./RenderRowSubComponent";
 import EditRow from "./EditRow";
@@ -188,7 +189,17 @@ const BasicTable = ({ addTab, activeTab }) => {
           />
         </div>
         <div className="w-4/12 ">
-          <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
+          <GlobalFilter
+            filter={globalFilter}
+            setFilter={setGlobalFilter}
+            searchIcon={graySearchIcon}
+            bgColor={"bg-transparent"}
+            borderColor={"border-[#EEEEEE]"}
+            textColor={"text-[#DBDBDB]"}
+            borderRadius={"rounded"}
+            focusBorder={"focus:border-gray-200"}
+            focusRing={"focus:ring-gray-200"}
+          />
         </div>
       </div>
       {/* table LIST */}

src/components/ReactTable5/Checkbox.js

@@ -7,7 +7,6 @@ export function Checkbox({ id, toggelChekedItems, refChekedItems }) {
       checked={checked}
       onClick={() => toggelChekedItems(id)}
       type="checkbox"
-      // className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`}
       className={`cursor-pointer`}
     />
   );

src/components/ReactTable5/GlobalFilter.js

@@ -4,7 +4,17 @@ import { useAsyncDebounce } from "react-table";
 import search from "./search-normal.svg";
 import cancleIcon from "./zarbedar-icon.svg";
 
-export const GlobalFilter = ({ filter, setFilter }) => {
+export const GlobalFilter = ({
+  filter,
+  setFilter,
+  searchIcon,
+  bgColor,
+  borderColor,
+  textColor,
+  borderRadius,
+  focusBorder,
+  focusRing,
+}) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   const [value, setValue] = useState(filter);
@@ -24,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         />
       )}
       <img
-        src={search}
+        src={searchIcon}
         alt=""
         className="w-4 h-4 absolute left-2 cursor-pointer"
       />
@@ -34,70 +44,25 @@ export const GlobalFilter = ({ filter, setFilter }) => {
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        className={`w-full 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" }}
+        className={`w-full text-xs border focus:outline-none focus:ring focus:ring-opacity-20 
+          ${bgColor}
+          ${borderColor}
+          ${textColor}
+          ${borderRadius}
+          ${focusBorder}
+          ${focusRing}
+        `}
       />
     </div>
   );
 };
 
-{
-  /* <input
-        value={value || ""}
-        onChange={(e) => {
-          setValue(e.target.value);
-          onChange(e.target.value);
-        }}
-        onFocus={() => setActiveSearchBox(true)}
-        // onBlur={() => setActiveSearchBox(false)}
-        type="text"
-        className={`text-xs text-blue-400 rounded focus:outline-none placeholder-blue-400 border`}
-        style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
-      /> */
-}
-
-// ? اگر میخواستم کاری کنم که وقتی رویه سرچ باکس میزدم ایکن ضربدر هاید میشد و ایکن کنسل میومد باید از این کد استفاده میکردم
-
-// import React, { useState } from "react";
-// import { useAsyncDebounce } from "react-table";
-
-// import search from "./search-normal.svg";
-// import cancleIcon from "./zarbedar-icon.svg";
-
-// export const GlobalFilter = ({ filter, setFilter }) => {
-//   const [activeSearchBox, setActiveSearchBox] = useState(false);
-
-//   const [value, setValue] = useState(filter);
-
-//   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>
-//   );
-// };
+GlobalFilter.defaultProps = {
+  searchIcon: search,
+  bgColor: "bg-[#F9FBFF]",
+  borderColor: "border-[#B5D6FF]",
+  textColor: "text-blue-400",
+  borderRadius: "rounded",
+  focusBorder: "focus:border-blue-200",
+  focusRing: "focus:ring-blue-200",
+};

src/components/ReactTable5/gray-search-icon.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="26.075" height="26.075" viewBox="0 0 26.075 26.075">
+  <g id="search-normal">
+    <path id="Vector" d="M20.642,10.321A10.321,10.321,0,1,1,10.321,0,10.321,10.321,0,0,1,20.642,10.321Z" transform="translate(2.173 2.173)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M2.173,2.173,0,0" transform="translate(21.729 21.729)" fill="none" stroke="#dbdbdb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H26.075V26.075H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>