update

src/components/ReactTable4/BasicTable.js

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 
 import "./index.scss";
 
-import { Tabbar } from "./index";
+import Tabbar from "./Tabbar";
 import MOCK_DATA from "./MOCK_DATA.json";
 
 import { ColumnSearch } from "./ColumnSearch";
@@ -35,12 +35,15 @@ const BasicTable = ({
   activeTab,
 }) => {
   const data = useMemo(() => MOCK_DATA, []);
+
   const [filtering, setFiltering] = useState(false);
+
   const columns = React.useMemo(
     () => COLUMNS({ filtering, setFiltering, addTab }),
     []
   );
 
+  // یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
   const defaultColumn = useMemo(() => {
     return {
       Filter: ColumnSearch,
@@ -176,7 +179,7 @@ const BasicTable = ({
                     <th
                       {...column.getHeaderProps(column.getSortByToggleProps())}
                       scope="col"
-                      className="cursor-pointer p-4 text-right text-sm font-medium"
+                      className="cursor-pointer p-2 text-right text-xs font-medium"
                       style={{ color: "#3287B9" }}
                     >
                       {column.render("Header")}
@@ -194,7 +197,7 @@ const BasicTable = ({
             </thead>
             {/* filter row */}
             {filtering && (
-              <thead style={{ backgroundColor: "##F1F5FE" }}>
+              <thead style={{ backgroundColor: "#F1F5FE" }}>
                 {headerGroups.map((headerGroup, index) => (
                   <tr key={index} {...headerGroup.getHeaderGroupProps()}>
                     {headerGroup.headers.map((column) => (

src/components/ReactTable4/ColumnSearch.js

@@ -1,36 +1,16 @@
 import React, { useState } from "react";
 
-import search from "./search-normal.svg";
-import cancleIcon from "./zarbedar-icon.svg";
-
 export const ColumnSearch = ({ column }) => {
   const { filterValue, setFilter } = column;
-  const [activeSearchBox, setActiveSearchBox] = useState(false);
 
   return (
     <div className="flex flex-row items-center">
-      <div className="flex flex-row items-center relative">
-        {activeSearchBox && (
-          <img
-            src={cancleIcon}
-            alt=""
-            className="w-2 h-2 absolute left-16 cursor-pointer"
-            onClick={() => setActiveSearchBox(false)}
-          />
-        )}
-        <img
-          src={search}
-          alt=""
-          className="w-4 h-4 absolute left-11 cursor-pointer"
-        />
       <input
         value={filterValue || ""}
         onChange={(e) => setFilter(e.target.value)}
-          onFocus={() => setActiveSearchBox(true)}
+        className={`text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
-          className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
         style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
       />
     </div>
-    </div>
   );
 };

src/components/ReactTable4/EditButtons.js

@@ -8,7 +8,6 @@ import plus from "./plus.svg";
 
 export function EditButtons({ setFiltering, filtering, addTab }) {
   const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
-  // setFiltering(selectedFilterRow);
 
   return (
     <div className="flex flex-row items-center justify-end">
@@ -27,7 +26,6 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
       {/* filter */}
       <img
         src={filter}
-        // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
         alt=""
         className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
         ${selectedFilterRow ? "border" : "border-0"}`}

src/components/ReactTable4/Tabbar.js

@@ -0,0 +1,66 @@
+import React from "react";
+import "./index.scss";
+
+import cancleIcon from "./zarbedar-icon.svg";
+
+const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
+  return (
+    <ul
+      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
+      onMouseDown={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        window.isDown = true;
+        window.startX = e.pageX - slider.offsetLeft;
+        window.scrollLeft = slider.scrollLeft;
+      }}
+      onMouseLeave={(e) => {
+        window.isDown = false;
+      }}
+      onMouseUp={(e) => {
+        window.isDown = false;
+      }}
+      onMouseMove={(e) => {
+        const slider = window.document.querySelector(".tabbar");
+        if (!window.isDown) return;
+        e.preventDefault();
+        const x = e.pageX - slider.offsetLeft;
+        const walk = (x - window.startX) * 1;
+        slider.scrollLeft = window.scrollLeft - walk;
+      }}
+    >
+      {tabs.map((el, index) => (
+        <li
+          key={index}
+          onClick={(e) => {
+            if (window.isDown) return e.preventDefault();
+          }}
+          aria-current="page"
+          className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
+          style={{
+            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
+            color: activeTab === el.id ? "#fff" : "#000",
+          }}
+        >
+          <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
+            {el.name}
+          </div>
+          {el.id ? (
+            <img
+              src={cancleIcon}
+              className="w-2 mr-3"
+              alt=""
+              onClick={(e) => {
+                e.preventDefault();
+                delTab(el.id);
+              }}
+            />
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+window.isDown = false;
+
+export default Tabbar;

src/components/ReactTable4/index.js

@@ -2,8 +2,6 @@ import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";
 
-import cancleIcon from "./zarbedar-icon.svg";
-
 const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   const [tabs, setTabs] = useState([
     { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
@@ -65,7 +63,6 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-xs">{subTitle}</h2>
         </div>
       </div>
-      {/* <Tabbar tabs={tabs} /> */}
       <BasicTable
         addTab={addTab}
         tabs={tabs}
@@ -77,69 +74,67 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
   );
 };
 
-window.isDown = false;
-
 export default ReactTable4;
 
-export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
+// export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
-  // const { onMouseDown } = useDraggableScroll(ref);
+//   // const { onMouseDown } = useDraggableScroll(ref);
 
-  return (
+//   return (
-    <ul
+//     <ul
-      className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
+//       className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
-      onMouseDown={(e) => {
+//       onMouseDown={(e) => {
-        const slider = window.document.querySelector(".tabbar");
+//         const slider = window.document.querySelector(".tabbar");
-        window.isDown = true;
+//         window.isDown = true;
-        window.startX = e.pageX - slider.offsetLeft;
+//         window.startX = e.pageX - slider.offsetLeft;
-        window.scrollLeft = slider.scrollLeft;
+//         window.scrollLeft = slider.scrollLeft;
-      }}
+//       }}
-      onMouseLeave={(e) => {
+//       onMouseLeave={(e) => {
-        window.isDown = false;
+//         window.isDown = false;
-      }}
+//       }}
-      onMouseUp={(e) => {
+//       onMouseUp={(e) => {
-        window.isDown = false;
+//         window.isDown = false;
-      }}
+//       }}
-      onMouseMove={(e) => {
+//       onMouseMove={(e) => {
-        const slider = window.document.querySelector(".tabbar");
+//         const slider = window.document.querySelector(".tabbar");
-        if (!window.isDown) return;
+//         if (!window.isDown) return;
-        e.preventDefault();
+//         e.preventDefault();
-        const x = e.pageX - slider.offsetLeft;
+//         const x = e.pageX - slider.offsetLeft;
-        const walk = (x - window.startX) * 1;
+//         const walk = (x - window.startX) * 1;
-        slider.scrollLeft = window.scrollLeft - walk;
+//         slider.scrollLeft = window.scrollLeft - walk;
-      }}
+//       }}
-    >
+//     >
-      {tabs.map((el, index) => (
+//       {tabs.map((el, index) => (
-        <li
+//         <li
-          key={index}
+//           key={index}
-          onClick={(e) => {
+//           onClick={(e) => {
-            if (window.isDown) return e.preventDefault();
+//             if (window.isDown) return e.preventDefault();
-          }}
+//           }}
-          aria-current="page"
+//           aria-current="page"
-          className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
+//           className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
-          style={{
+//           style={{
-            backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
+//             backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
-            color: activeTab === el.id ? "#fff" : "#000",
+//             color: activeTab === el.id ? "#fff" : "#000",
-          }}
+//           }}
-        >
+//         >
-          <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
+//           <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
-            {el.name}
+//             {el.name}
-          </div>
+//           </div>
-          {el.id ? (
+//           {el.id ? (
-            <img
+//             <img
-              src={cancleIcon}
+//               src={cancleIcon}
-              className="w-2 mr-3"
+//               className="w-2 mr-3"
-              alt=""
+//               alt=""
-              onClick={(e) => {
+//               onClick={(e) => {
-                e.preventDefault();
+//                 e.preventDefault();
-                delTab(el.id);
+//                 delTab(el.id);
-              }}
+//               }}
-            />
+//             />
-          ) : null}
+//           ) : null}
-        </li>
+//         </li>
-      ))}
+//       ))}
-    </ul>
+//     </ul>
-  );
+//   );
-}
+// }
 
 ReactTable4.defaultProps = {
   breadCrumbs: [

src/components/ReactTable4/index.scss

@@ -8,9 +8,10 @@
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
-.tabbar{
+.tabbar {
   cursor: pointer;
 }
-.active2 ,.active2 li a{
+.active2,
+.active2 li a {
   cursor: move !important;
 }