update 7 files

package.json

@@ -25,6 +25,7 @@
     "sass": "^1.45.0",
     "sweetalert2": "^11.3.4",
     "tw-elements": "^1.0.0-alpha8",
+    "use-draggable-scroll": "^0.1.0",
     "web-vitals": "^2.1.2"
   },
   "scripts": {

src/components/ReactTable3/BasicTable.js

@@ -11,7 +11,7 @@ import {
   useRowSelect,
   useColumnOrder,
   useExpanded,
-  useResizeColumns
+  useResizeColumns,
 } from "react-table";
 
 import { COLUMNS } from "./columns";
@@ -24,14 +24,13 @@ import MOCK_DATA from "./MOCK_DATA.json";
 export function SelectColumnFilter({
   column: { filterValue, setFilter, preFilteredRows, id, render },
 }) {
-
   const options = React.useMemo(() => {
-  const options = new Set()
+    const options = new Set();
-    preFilteredRows.forEach(row => {
+    preFilteredRows.forEach((row) => {
-      options.add(row.values[id])
+      options.add(row.values[id]);
-    })
+    });
-    return [...options.values()]
+    return [...options.values()];
-  }, [id, preFilteredRows])
+  }, [id, preFilteredRows]);
 
   // Render a multi-select box
   return (
@@ -42,50 +41,40 @@ export function SelectColumnFilter({
         name={id}
         id={id}
         value={filterValue}
-        onChange={e => {
+        onChange={(e) => {
-          setFilter(e.target.value || undefined)
+          setFilter(e.target.value || undefined);
         }}
       >
-        <option className="text-xs" value="">همه</option>
+        <option className="text-xs" value="">
+          همه
+        </option>
         {options.map((option, i) => (
           <option key={i} value={option} className="text-xs">
             {(() => {
-            if (option === 1) {
+              if (option === 1) {
-              return (
+                return "وضعیت عادی";
-                 "وضعیت عادی"
+              } else if (option === 2) {
-              );
+                return "اعلان سطح هشدار";
-            }  else if (option === 2) {
+              } else if (option === 3) {
-              return (
+                return "بررسی و پیگیری";
-                "اعلان سطح هشدار"
+              } else if (option === 4) {
-             );
+                return "وضعیت بحرانی";
-            } else if (option === 3) {
+              } else {
-              return (
+                return " وضعیت پایدار";
-                "بررسی و پیگیری"
+              }
-             );
-            } else if (option === 4) {
-              return (
-                "وضعیت بحرانی"
-             );
-            } else {
-              return (
-                " وضعیت پایدار"
-              );
-            }
             })()}{" "}
-
           </option>
         ))}
-        
       </select>
     </label>
-  )
+  );
 }
 
 const BasicTable = () => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
-//   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
+  //   اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
   const isEven = (idx) => idx % 2 === 0;
 
   const {
@@ -159,7 +148,7 @@ const BasicTable = () => {
   return (
     <>
       <div className="customeClass1">
-      {headerGroups.map((headerGroup) =>
+        {headerGroups.map((headerGroup) =>
           headerGroup.headers.map((column) =>
             column.Filter ? (
               <div className="mt-2 sm:mt-0 customeClass2" key={column.id}>
@@ -170,10 +159,10 @@ const BasicTable = () => {
         )}
       </div>
       <div className="flex flex-row items-center justify-end mb-3 mx-4">
-      {/*  search box */}
+        {/*  search box */}
-      {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
+        {/* <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> */}
-      {/* pagination */}
+        {/* pagination */}
-      <div
+        <div
           className="border border-blue-400 rounded-sm py-1 px-2 flex flex-items-center"
           style={{}}
         >
@@ -231,8 +220,7 @@ const BasicTable = () => {
           >
             {">>"}
           </button>
-      </div>
+        </div>
-
       </div>
       {/*  */}
       {/* toggle columns */}
@@ -257,7 +245,7 @@ const BasicTable = () => {
       >
         <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
           {headerGroups.map((headerGroup) => (
-            <tr {...headerGroup.getHeaderGroupProps()} >
+            <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
                 <th
                   {...column.getHeaderProps(column.getSortByToggleProps())}
@@ -286,22 +274,32 @@ const BasicTable = () => {
           {page.map((row, idx) => {
             prepareRow(row);
             return (
-              <tr {...row.getRowProps()} 
+              <React.Fragment>
-            //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
+                <tr
-              >
+                  {...row.getRowProps()}
-                {row.cells.map((cell) => {
+                  //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
-                  return (
+                >
-                    <td
+                  {row.cells.map((cell) => {
-                      {...cell.getCellProps()}
+                    return (
-                      className="p-4 whitespace-nowrap text-xs"
+                      <td
-                      role="cell"
+                        {...cell.getCellProps()}
-                      style={{ color: "#00253A" }}
+                        className="p-4 whitespace-nowrap text-xs"
-                    >
+                        role="cell"
-                      {cell.render("Cell")}
+                        style={{ color: "#00253A" }}
+                      >
+                        {cell.render("Cell")}
+                      </td>
+                    );
+                  })}
+                </tr>
+                {row.isExpanded ? (
+                  <tr>
+                    <td colSpan={headerGroups[0].headers.length}>
+                      {renderRowSubComponent({ row: row.values })}
                     </td>
-                  );
+                  </tr>
-                })}
+                ) : null}
-              </tr>
+              </React.Fragment>
             );
           })}
         </tbody>
@@ -372,5 +370,13 @@ const BasicTable = () => {
     </>
   );
 };
-
+function renderRowSubComponent({ row }) {
+  return (
+    <div className="pl-2 pr-5 bg-blue-200">
+      نام‌: {row.name}
+      <br />
+      <button className="bg-blue-400">ویرایش</button>
+    </div>
+  );
+}
 export default BasicTable;

src/components/ReactTable3/Buttons.js

@@ -1,25 +1,31 @@
-import arrowIcon from './arrow-icon.svg';
+import arrowIcon from "./arrow-icon.svg";
-import more from './more.svg';
+import more from "./more.svg";
-import edit from './edit.svg';
+import edit from "./edit.svg";
 
-import { useState } from 'react';
+import { useState } from "react";
 
-
+export function Buttons({ row }) {
-
-export function Buttons({  }) {
   const [activeDetails, setActiveDetails] = useState(null);
-    return (
+  return (
-      <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-row items-center justify-end">
-          <button 
+      <button
-            className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
+        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 mx-1"
-            onClick={ () => setActiveDetails(!activeDetails) }>
+        onClick={() => setActiveDetails(!activeDetails)}
-          جزیات
+        {...row.getToggleRowExpandedProps()}
-          <img src={arrowIcon} alt="" className={`w-3 cursor-pointer mr-2 ${activeDetails ? "rotate-60" : "rotate-90"}`} />
+      >
-          </button>
+        جزیات
-          <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+        <img
-              <img src={edit} alt="" className="w-4" />
+          src={arrowIcon}
-          </div>
+          alt=""
-          <img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
+          className={`w-3 cursor-pointer mr-2 ${
+            activeDetails ? "rotate-60" : "rotate-90"
+          }`}
+        />
+      </button>
+      <div className="p-2 rounded border border-gray-300 cursor-pointer mx-1">
+        <img src={edit} alt="" className="w-4" />
       </div>
-    );
+      <img src={more} alt="" className="w-5 cursor-pointer rotate-90 mx-1" />
-  }
+    </div>
+  );
+}

src/components/ReactTable3/columns.js

@@ -7,10 +7,9 @@ import { ColumnFilter } from "./ColumnFilter";
 import { OrderStatus } from "./OrderStatus";
 import { OrderLevel } from "./OrderLevel";
 import { Buttons } from "./Buttons";
-import  {EditButtons}  from "./EditButtons";
+import { EditButtons } from "./EditButtons";
 
 export const COLUMNS = [
-  
   {
     Header: "نام و نام خانوادگی",
     Footer: "نام و نام خانوادگی",
@@ -52,7 +51,7 @@ export const COLUMNS = [
     Footer: "سطح اهمیت",
     accessor: "order-level",
     Cell: OrderLevel,
-    Filter: SelectColumnFilter, 
+    // Filter: SelectColumnFilter,
     // new
   },
   {

src/components/ReactTable3/index.js

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useRef } from "react";
 import BasicTable from "./BasicTable";
+// import useDraggableScroll from "use-draggable-scroll";
 
 const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
   return (
@@ -40,13 +41,82 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {
           <h2 className="text-sm">{subTitle}</h2>
         </div>
       </div>
-
+      <Tabbar />
       <BasicTable />
     </div>
   );
 };
-
+window.isDown = false;
 export default ReactTable3;
+function Tabbar({}) {
+  const ref = useRef(null);
+
+  // const { onMouseDown } = useDraggableScroll(ref);
+  const tabs = [
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+    "تست۱",
+  ];
+  return (
+    <ul
+      className="tabbar flex no-scrollbar  border-b border-gray-200 dark:border-gray-700 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) => (
+        <li className="mr-2 ">
+          <span
+            onClick={(e) => {
+              if (window.isDown) return e.preventDefault();
+              ///do here
+            }}
+            aria-current="page"
+            className="inline-block py-4 px-4 text-sm font-medium text-center text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500"
+          >
+            <span className="p-2">
+              {el} <span className="p-2">x</span>
+            </span>
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
 
 ReactTable3.defaultProps = {
   breadCrumbs: [

src/components/ReactTable3/index.scss

@@ -4,3 +4,13 @@
 .customeClass1 .customeClass2 span {
   display: none !important;
 }
+.no-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.tabbar{
+  cursor: pointer;
+}
+.active2 ,.active2 li a{
+  cursor: move !important;
+}