update

src/components/ReactTable3/EditButtons.js

@@ -8,33 +8,24 @@ import plus from './plus.svg';
 import { GlobalFilter } from './GlobalFilter';
 
 export function EditButtons({buttons }) {
-  const [openModal, setOpenModal] = useState(false);
+  const [selectedButton, setSelectedButton] = useState(null);
 
     return (
       <div className="flex flex-row items-center justify-end">
-        {/* serach box */}
         {buttons.map((button,index) =>(
         <div className={`border border-blue-400 flex flex-row items-center justify-around p-1 rounded-sm bg-opacity-30 mx-1`}
             style={{backgroundColor: button.backgroundColor}}
-          onClick={() => setOpenModal(true)}  
+          // onClick={() => setOpenModal(true)}  
+          onClick={() => setSelectedButton(selectedButton === button ? null : button)}
           >
           <p className={`text-sm ${button.textColor}`}>{button.title}</p>
           <img src={button.logo} alt="" className={`cursor-pointer ${button.width} ${button.height} ${button.title === null ? "mr-0": "mx-2"}`} />
         </div>
         ))}
-      {/* <GlobalFilter filterr={filter} setFilterr={setFilter}/> */}
+
       <div
-        className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
-          ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}
-        `}
-        onClick={() => setOpenModal(false)}
       >      
-              {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+              {selectedButton?.components}
-              <div className="absolute "
-                style={{top: "20%"}}
-                onClick={(e) => e.stopPropagation()}
->              <GlobalFilter />
-              </div>
         
       </div>
       </div>
@@ -50,6 +41,9 @@ EditButtons.defaultProps = {
       title: null,
       textColor: null,
       backgroundColor: "#F3F8FF",
+      // components: " tannaz1",
+      components: <GlobalFilter />,
+
     },
     {
       logo: filter,
@@ -58,6 +52,7 @@ EditButtons.defaultProps = {
       title: null,
       textColor: null,
       backgroundColor: "#F3F8FF",
+      components: " tannaz1",
     },
     {
       logo: settings,
@@ -66,6 +61,8 @@ EditButtons.defaultProps = {
       title: null,
       textColor: null,
       backgroundColor: "#F3F8FF",
+      components: "mahdi ",
+
     },
     {
       logo: arrow,
@@ -74,6 +71,8 @@ EditButtons.defaultProps = {
       title: 'عملیات',
       textColor: "text-blue-400",
       backgroundColor: "#F3F8FF",
+      components: "tannaz",
+
     },
     {
       logo: plus,
@@ -82,6 +81,8 @@ EditButtons.defaultProps = {
       title: 'ثبت جدید',
       textColor: "text-white",
       backgroundColor: "#65A9FF",
+      components: "mahdi",
+
     },
   ]
 }

src/components/ReactTable3/GlobalFilter.js

@@ -4,6 +4,7 @@ import { useAsyncDebounce } from 'react-table';
 import search from "./search-normal.svg";
 
 export const GlobalFilter = ({ filter, setFilter }) => {
+  const [openModal, setOpenModal] = useState(true);
 
   const [value, setValue] = useState(filter);
 
@@ -12,11 +13,15 @@ export const GlobalFilter = ({ filter, setFilter }) => {
   }, 1000)
 
   return (
-    <div className="flex flex-row-reverse items-center relative w-full">
+    <div onClick={() => setOpenModal(false)} 
+      className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
+      ${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}>
+        <div className="absolute " style={{top: "10%"}} onClick={(e) => e.stopPropagation()}>
+          <div className="flex flex-row-reverse items-center relative w-96">
             <img
               src={search}
               alt=""
-        className="w-1 h-12 absolute left-3"
+              className="w-6 h-6 absolute left-3"
             />
             <input
               value={value || ''}
@@ -29,6 +34,32 @@ export const GlobalFilter = ({ filter, setFilter }) => {
               className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
             />
           </div> 
+        </div>
+    </div>
+    // <div
+    //   className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
+    //   ${openModal ? "opacity-80" : "opacity-0 pointer-events-none"}`}
+    //   onClick={() => setOpenModal(false)}>
+    //     <div className="absolute " style={{top: "20%"}} onClick={(e) => e.stopPropagation()}>
+    //       <div className="flex flex-row-reverse items-center relative w-96">
+    //         <img
+    //           src={search}
+    //           alt=""
+    //           className="w-6 h-6 absolute left-3"
+    //         />
+    //         <input
+    //           value={value || ''}
+    //           onChange={(e) => {
+    //             setValue(e.target.value)
+    //             onChange(e.target.value)
+    //           }}
+    //           type="text"
+    //           placeholder="نام کالا را جستجو کنید..."
+    //           className="text-xs rounded-sm pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor	placeholder-gray-400 focus:outline-none"
+    //         />
+    //       </div> 
+    //     </div>
+    // </div>
   );
 };