From 5b96ce80c0fc13344a114a013cfd36b2b8b61d0b Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Sat, 19 Feb 2022 11:05:14 +0330
Subject: [PATCH] added tabs

---
 src/components/ReactTable4/BasicTable.js      | 74 ++++++++++++-------
 src/components/ReactTable4/Buttons.js         |  8 +-
 src/components/ReactTable4/EditButtons.js     |  8 +-
 .../ReactTable4/SliderColumnFilter.js         | 13 +++-
 src/components/ReactTable4/index.js           |  2 +-
 src/components/ReactTable4/zarbedar-icon.svg  | 10 +++
 6 files changed, 77 insertions(+), 38 deletions(-)
 create mode 100644 src/components/ReactTable4/zarbedar-icon.svg

diff --git a/src/components/ReactTable4/BasicTable.js b/src/components/ReactTable4/BasicTable.js
index 3670238..432f203 100644
--- a/src/components/ReactTable4/BasicTable.js
+++ b/src/components/ReactTable4/BasicTable.js
@@ -1,7 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 
 import "./index.scss";
 import { ColumnSearch } from "./ColumnSearch.js";
+import { Tabbar } from "./index";
 
 import {
   useTable,
@@ -28,6 +29,9 @@ const BasicTable = ({ settingsIcon }) => {
   const columns = React.useMemo(() => COLUMNS, []);
   const data = useMemo(() => MOCK_DATA, []);
 
+  //selected row
+  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
+
   const defaultColumn = useMemo(() => {
     return {
       Filter: ColumnSearch,
@@ -103,9 +107,14 @@ const BasicTable = ({ settingsIcon }) => {
   // };
 
   const { globalFilter, pageIndex, pageSize } = state;
-  // const firstPageRows = rows.slice(0, 10);
   return (
     <>
+      {/* <button
+        className="bg-orange-600"
+        onClick={() => setSelectedFilterRow(!selectedFilterRow)}
+      >
+        click me
+      </button> */}
       {/* toggle columns */}
       {/* <div>
         <div>
@@ -122,7 +131,11 @@ const BasicTable = ({ settingsIcon }) => {
       </div> */}
       {/* Change Column Order */}
       {/* <button onClick={changeOrder}> Change Column Order </button> */}
-      <div className="flex flex-row items-center justify-end">
+      <div className="flex flex-row items-center justify-between">
+        {/* right box */}
+        <div className="w-8/12">
+          <Tabbar />
+        </div>
         {/* left box */}
         <div
           className="rounded-md p-2 flex flex-row items-center"
@@ -188,11 +201,12 @@ const BasicTable = ({ settingsIcon }) => {
           ))}
         </thead>
         {/* filter row */}
+        {/* {selectedFilterRow === !null && (        )} */}
         <thead style={{ backgroundColor: "#FAFBFF" }}>
           {headerGroups.map((headerGroup) => (
             <tr {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map((column) => (
-                <th {...column.getHeaderProps()} className="py-2 text-sm ">
+                <th {...column.getHeaderProps()} className="py-2 text-sm">
                   {column.canFilter ? column.render("Filter") : null}
                 </th>
               ))}
@@ -207,7 +221,6 @@ const BasicTable = ({ settingsIcon }) => {
             prepareRow(row);
             return (
               <React.Fragment>
-                <tr></tr>
                 <tr
                   {...row.getRowProps()}
                   //   className={isEven(idx) ? "bg-gray-600" : "bg-white"}
@@ -228,7 +241,7 @@ const BasicTable = ({ settingsIcon }) => {
                 {row.isExpanded ? (
                   <tr>
                     <td colSpan={headerGroups[0].headers.length}>
-                      {renderRowSubComponent({ rows: row.original })}
+                      {renderRowSubComponent({ row: row.original })}
                       {/* {renderRowSubComponent({ row: row.values })} */}
                     </td>
                   </tr>
@@ -322,7 +335,8 @@ const BasicTable = ({ settingsIcon }) => {
   );
 };
 
-function renderRowSubComponent({ rows }) {
+function renderRowSubComponent({ row }) {
+  console.log(row);
   const persian = {
     weight: "وزن",
     pageNumber: "تعداد صفحات",
@@ -334,7 +348,10 @@ function renderRowSubComponent({ rows }) {
     publishedYear: "سال انتشار",
   };
   return (
-    <div className="w-full flex flex-row items-center bg-indigo-100 border-r-4 border-blue-600 p-2">
+    <div
+      className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
+      style={{ backgroundColor: "#FAFBFF" }}
+    >
       {/* right */}
       <div
         className="flex flex-row  flex-wrap items-center"
@@ -351,7 +368,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             نام و نام خانوادگی:
-            <span className="mr-1 text-black">{rows.name}</span>
+            <span className="mr-1 text-black">{row.name}</span>
           </p>
         </div>
         {/* 2 */}
@@ -365,7 +382,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             تاریخ سفارش:
-            <span className="mr-1 text-black">{rows.order_date}</span>
+            <span className="mr-1 text-black">{row.order_date}</span>
           </p>
         </div>
         {/* 3 */}
@@ -379,7 +396,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             مبلغ سفارش:
-            <span className="mr-1 text-black">{rows.order_price}</span>
+            <span className="mr-1 text-black">{row.order_price}</span>
           </p>
         </div>
         {/* 4 */}
@@ -393,7 +410,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             شماره سفارش:
-            <span className="mr-1 text-black">{rows.order_number}</span>
+            <span className="mr-1 text-black">{row.order_number}</span>
           </p>
         </div>
         {/* 5 */}
@@ -407,7 +424,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             شغل کاربر:
-            <span className="mr-1 text-black">{rows.user_job}</span>
+            <span className="mr-1 text-black">{row.user_job}</span>
           </p>
         </div>
         {/* 6 */}
@@ -421,7 +438,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             وضعیت سفارش:
-            <span className="mr-1 text-black">{rows.order_status}</span>
+            <span className="mr-1 text-black">{row.order_status}</span>
           </p>
         </div>
         {/* 7 */}
@@ -435,7 +452,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             سطح اهمیت:
-            <span className="mr-1 text-black">{rows.order_level}</span>
+            <span className="mr-1 text-black">{row.order_level}</span>
           </p>
         </div>
         {/* 8 */}
@@ -449,7 +466,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             محل تولد:
-            <span className="mr-1 text-black">{rows.birth_place}</span>
+            <span className="mr-1 text-black">{row.birth_place}</span>
           </p>
         </div>
         {/* 9 */}
@@ -463,7 +480,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             تلفن محل کار:
-            <span className="mr-1 text-black">{rows.office_phone}</span>
+            <span className="mr-1 text-black">{row.office_phone}</span>
           </p>
         </div>
         {/* 10 */}
@@ -477,7 +494,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             تحصیلات:
-            <span className="mr-1 text-black">{rows.education}</span>
+            <span className="mr-1 text-black">{row.education}</span>
           </p>
         </div>
         {/* 11 */}
@@ -491,7 +508,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             تاریخ تولد:
-            <span className="mr-1 text-black">{rows.birth_day}</span>
+            <span className="mr-1 text-black">{row.birth_day}</span>
           </p>
         </div>
         {/* 12 */}
@@ -505,7 +522,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             شغل:
-            <span className="mr-1 text-black">{rows.job}</span>
+            <span className="mr-1 text-black">{row.job}</span>
           </p>
         </div>
         {/* 13 */}
@@ -519,7 +536,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             دانشگاه:
-            <span className="mr-1 text-black">{rows.uni}</span>
+            <span className="mr-1 text-black">{row.uni}</span>
           </p>
         </div>
         {/* 14 */}
@@ -533,7 +550,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             رشته تحصیلی:
-            <span className="mr-1 text-black">{rows.field_study}</span>
+            <span className="mr-1 text-black">{row.field_study}</span>
           </p>
         </div>
         {/* 15 */}
@@ -547,7 +564,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             اخلاق:
-            <span className="mr-1 text-black">{rows.behaviour}</span>
+            <span className="mr-1 text-black">{row.behaviour}</span>
           </p>
         </div>
         {/* 16 */}
@@ -561,7 +578,7 @@ function renderRowSubComponent({ rows }) {
             style={{ borderColor: "#65A9FF" }}
           >
             نشانی:
-            <span className="mr-1 text-black">{rows.address}</span>
+            <span className="mr-1 text-black">{row.address}</span>
           </p>
         </div>
       </div>
@@ -571,12 +588,15 @@ function renderRowSubComponent({ rows }) {
         style={{ width: "10%" }}
       >
         <button
-          className="border rounded text-red-600 w-8/12 text-xs py-2 mb-2"
-          style={{ borderColor: "#D53921" }}
+          className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
+          style={{ borderColor: "#D53921", color: "#D53921" }}
         >
           حذف
         </button>
-        <button className="border rounded text-blue-600 w-8/12 text-xs py-2">
+        <button
+          className="border rounded w-8/12 text-xs py-2 bg-white"
+          style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
+        >
           جزیات بیشتر
         </button>
       </div>
diff --git a/src/components/ReactTable4/Buttons.js b/src/components/ReactTable4/Buttons.js
index 075c0e7..24db09d 100644
--- a/src/components/ReactTable4/Buttons.js
+++ b/src/components/ReactTable4/Buttons.js
@@ -7,13 +7,11 @@ import { useState } from "react";
 export function Buttons({ row }) {
   const [activeDetails, setActiveDetails] = useState(null);
   return (
-    <div
-      className="flex flex-row items-center justify-end"
-      {...row.getToggleRowExpandedProps()}
-    >
+    <div className="flex flex-row items-center justify-end">
       <button
-        className="mx-1 flex flex-row items-center justify-around  p-2 rounded border border-gray-300 "
+        className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
         onClick={() => setActiveDetails(!activeDetails)}
+        {...row.getToggleRowExpandedProps()}
       >
         جزیات
         <img
diff --git a/src/components/ReactTable4/EditButtons.js b/src/components/ReactTable4/EditButtons.js
index bc662dd..f8d0102 100644
--- a/src/components/ReactTable4/EditButtons.js
+++ b/src/components/ReactTable4/EditButtons.js
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import Table from "./BasicTable";
 
 import DropDown from "./DropDown";
 
@@ -7,6 +8,7 @@ import plus from "./plus.svg";
 
 export function EditButtons({}) {
   const [activeFilter, setActiveFilter] = useState(null);
+  // const [selectedFilterRow, setSelectedFilterRow] = useState(null);
 
   return (
     <div className="flex flex-row items-center justify-end">
@@ -21,10 +23,10 @@ export function EditButtons({}) {
       {/* filter */}
       <img
         src={filter}
+        // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
         alt=""
-        className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer  w-8 ${
-          activeFilter ? "border" : "border-0"
-        }`}
+        className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 
+        ${activeFilter ? "border" : "border-0"}`}
         onClick={() => setActiveFilter(!activeFilter)}
       />
       {/* dropDown */}
diff --git a/src/components/ReactTable4/SliderColumnFilter.js b/src/components/ReactTable4/SliderColumnFilter.js
index 29af9c6..9016181 100644
--- a/src/components/ReactTable4/SliderColumnFilter.js
+++ b/src/components/ReactTable4/SliderColumnFilter.js
@@ -1,5 +1,7 @@
 import React from "react";
 
+import cancleIcon from "./zarbedar-icon.svg";
+
 export const SliderColumnFilter = ({
   column: { filterValue, setFilter, preFilteredRows, id },
 }) => {
@@ -14,8 +16,9 @@ export const SliderColumnFilter = ({
   }, [id, preFilteredRows]);
 
   return (
-    <div className="flex flex-row items-center">
+    <div className="flex flex-row items-center justify-between w-10/12">
       <input
+        className=" w-10/12"
         type="range"
         min={min}
         max={max}
@@ -24,7 +27,13 @@ export const SliderColumnFilter = ({
           setFilter(parseInt(e.target.value, 10));
         }}
       />
-      <input type="checkbox" onClick={() => setFilter(undefined)} />
+      <div className="p-1 rounded bg-blue-300">
+        <img
+          src={cancleIcon}
+          onClick={() => setFilter(undefined)}
+          className="cursor-pointer w-2 h-2"
+        />
+      </div>
       {/* <button onClick={() => setFilter(undefined)}>ریست</button> */}
     </div>
   );
diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js
index 49b95f7..28c6101 100644
--- a/src/components/ReactTable4/index.js
+++ b/src/components/ReactTable4/index.js
@@ -48,7 +48,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
 window.isDown = false;
 export default ReactTable4;
 
-function Tabbar({}) {
+export function Tabbar({}) {
   const ref = useRef(null);
 
   // const { onMouseDown } = useDraggableScroll(ref);
diff --git a/src/components/ReactTable4/zarbedar-icon.svg b/src/components/ReactTable4/zarbedar-icon.svg
new file mode 100644
index 0000000..57c3638
--- /dev/null
+++ b/src/components/ReactTable4/zarbedar-icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.118" height="18.118" viewBox="0 0 18.118 18.118">
+  <g id="Group_1" data-name="Group 1" transform="translate(-244.586 -251.497)">
+    <g id="vuesax_linear_clipboard-close" data-name="vuesax/linear/clipboard-close">
+      <g id="clipboard-close">
+        <path id="Vector" d="M15.136,15.136,0,0" transform="translate(246.153 252.911)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <path id="Vector-2" data-name="Vector" d="M15.136,0,0,15.136" transform="translate(246 253.064)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+    </g>
+  </g>
+</svg>