diff --git a/src/components/ReactTable5/BasicTable.js b/src/components/ReactTable5/BasicTable.js
index 0010d41..b77d181 100644
--- a/src/components/ReactTable5/BasicTable.js
+++ b/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 }) => {
/>
-
+
{/* table LIST */}
diff --git a/src/components/ReactTable5/Checkbox.js b/src/components/ReactTable5/Checkbox.js
index 75f2a25..65daa82 100644
--- a/src/components/ReactTable5/Checkbox.js
+++ b/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`}
/>
);
diff --git a/src/components/ReactTable5/GlobalFilter.js b/src/components/ReactTable5/GlobalFilter.js
index a6309e2..9b9dff8 100644
--- a/src/components/ReactTable5/GlobalFilter.js
+++ b/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 }) => {
/>
)}
@@ -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}
+ `}
/>
);
};
-{
- /* {
- 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 (
-//
-// {activeSearchBox === true ? (
-//
-// ) : (
-//
-// )}
-//
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)}{" "}
-//
-// );
-// };
+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",
+};
diff --git a/src/components/ReactTable5/gray-search-icon.svg b/src/components/ReactTable5/gray-search-icon.svg
new file mode 100644
index 0000000..c239010
--- /dev/null
+++ b/src/components/ReactTable5/gray-search-icon.svg
@@ -0,0 +1,7 @@
+