master
mahdi andalib 3 years ago
parent 02a9502f64
commit 17200c9c47
  1. 32
      src/components/ReactTable4/BasicTable.js
  2. 97
      src/components/ReactTable4/MOCK_DATA.json
  3. 15
      src/components/ReactTable4/index.js

@ -1,9 +1,19 @@
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js";
import { ToggleColumns } from "./ToggleColumns.js";
import { Tabbar } from "./index"; import { Tabbar } from "./index";
import MOCK_DATA from "./MOCK_DATA.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter";
import { ToggleColumns } from "./ToggleColumns";
import { COLUMNS } from "./columns";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import { import {
useTable, useTable,
@ -16,16 +26,6 @@ import {
useExpanded, useExpanded,
} from "react-table"; } from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = ({ const BasicTable = ({
settingsIcon, settingsIcon,
addTab, addTab,
@ -114,7 +114,7 @@ const BasicTable = ({
/> />
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
{/* right box */} {/* right box */}
<div className="" style={{ width: "70%" }}> <div className="flex-1">
<Tabbar <Tabbar
tabs={tabs} tabs={tabs}
delTab={delTab} delTab={delTab}
@ -125,7 +125,7 @@ const BasicTable = ({
{/* left box */} {/* left box */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<div <div
className="rounded-md p-2 flex flex-row items-center justify-end" className="p-2 flex flex-row items-center justify-end rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* search box */} {/* search box */}
@ -192,7 +192,7 @@ const BasicTable = ({
</thead> </thead>
{/* filter row */} {/* filter row */}
{filtering && ( {filtering && (
<thead style={{ backgroundColor: "#FAFBFF" }}> <thead style={{ backgroundColor: "##F1F5FE" }}>
{headerGroups.map((headerGroup, index) => ( {headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}> <tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => ( {headerGroup.headers.map((column) => (
@ -621,7 +621,7 @@ function RenderRowSubComponent({ row, columns }) {
return ( return (
<div <div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2" className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#FAFBFF" }} style={{ backgroundColor: "#FBFCFE" }}
> >
{/* right */} {/* right */}
<div <div

@ -93,5 +93,100 @@
"uni": "تهران", "uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 6,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
"order_number": "09120023100",
"user_job": "مهندس ساختمان",
"order_status": 1,
"order_level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 7,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
"order_number": "09390646589",
"user_job": "بازیگر",
"order_status": 2,
"order_level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 8,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
"order_number": "09120403285",
"user_job": "تاجر",
"order_status": 3,
"order_level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 9,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
"order_number": "09120336508",
"user_job": "حسابدار",
"order_status": 4,
"order_level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 10,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
} }
] ]

@ -1,6 +1,6 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg"; import cancleIcon from "./zarbedar-icon.svg";
@ -8,9 +8,12 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]); ]);
let [activeTab, setActivateTab] = useState(0); let [activeTab, setActivateTab] = useState(0);
const stateRef = useRef(); const stateRef = useRef();
const stateActiveRef = useRef(); const stateActiveRef = useRef();
stateRef.current = tabs; stateRef.current = tabs;
stateActiveRef.current = activeTab; stateActiveRef.current = activeTab;
@ -19,6 +22,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
if (stateRef.current.find((e) => e.id === newTab.id)) return; if (stateRef.current.find((e) => e.id === newTab.id)) return;
setTabs([...stateRef.current, newTab]); setTabs([...stateRef.current, newTab]);
}; };
const delTab = (id) => { const delTab = (id) => {
setTabs(stateRef.current.filter((e) => e.id != id)); setTabs(stateRef.current.filter((e) => e.id != id));
if (stateActiveRef.current == id) setActivateTab(0); if (stateActiveRef.current == id) setActivateTab(0);
@ -55,7 +59,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div> <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
<h2 className="text-base text-blue-900">{title}</h2> <h2 className="text-base text-blue-900">{title}</h2>
</div> </div>
{/* page Title */} {/* page subTitle */}
<div className="flex flex-row items-center mt-4"> <div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-xs">{subTitle}</h2> <h2 className="text-xs">{subTitle}</h2>
@ -72,7 +76,9 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
</div> </div>
); );
}; };
window.isDown = false; window.isDown = false;
export default ReactTable4; export default ReactTable4;
export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
@ -109,14 +115,13 @@ export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
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 px-4 rounded-sm mx-1" 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-4" 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 ? (

Loading…
Cancel
Save