|
|
@ -1,4 +1,4 @@ |
|
|
|
import React, { useMemo, useState } from "react"; |
|
|
|
import React, { useMemo, useState, useRef } from "react"; |
|
|
|
|
|
|
|
|
|
|
|
import "./index.scss"; |
|
|
|
import "./index.scss"; |
|
|
|
import Tabbar from "./Tabbar"; |
|
|
|
import Tabbar from "./Tabbar"; |
|
|
@ -12,12 +12,12 @@ import { Pagination } from "./Pagination"; |
|
|
|
import { GoToPage } from "./GoToPage"; |
|
|
|
import { GoToPage } from "./GoToPage"; |
|
|
|
import ShowMoreRows from "./ShowMoreRows"; |
|
|
|
import ShowMoreRows from "./ShowMoreRows"; |
|
|
|
import { Settings } from "./Settings"; |
|
|
|
import { Settings } from "./Settings"; |
|
|
|
import { Checkbox } from "./Checkbox"; |
|
|
|
// import { Checkbox } from "./Checkbox";
|
|
|
|
import { FilterFileType } from "./FilterFileType"; |
|
|
|
// import { FilterFileType } from "./FilterFileType";
|
|
|
|
|
|
|
|
|
|
|
|
import grid from "./grid.svg"; |
|
|
|
import grid from "./grid.svg"; |
|
|
|
import list from "./list.svg"; |
|
|
|
import list from "./list.svg"; |
|
|
|
import image1 from "./images/image1.svg"; |
|
|
|
// import image1 from "./images/image1.svg";
|
|
|
|
|
|
|
|
|
|
|
|
import RenderRowSubComponent from "./RenderRowSubComponent"; |
|
|
|
import RenderRowSubComponent from "./RenderRowSubComponent"; |
|
|
|
import EditRow from "./EditRow"; |
|
|
|
import EditRow from "./EditRow"; |
|
|
@ -106,10 +106,21 @@ const BasicTable = ({ |
|
|
|
const data = useMemo(() => MOCK_DATA2, []); |
|
|
|
const data = useMemo(() => MOCK_DATA2, []); |
|
|
|
// console.log(data);
|
|
|
|
// console.log(data);
|
|
|
|
|
|
|
|
|
|
|
|
const [filtering, setFiltering] = useState(false); |
|
|
|
// const [filtering, setFiltering] = useState(false);
|
|
|
|
|
|
|
|
const [chekedItems, setChekedItems] = useState([]); |
|
|
|
|
|
|
|
const refChekedItems = useRef(chekedItems); |
|
|
|
|
|
|
|
refChekedItems.current = chekedItems; |
|
|
|
|
|
|
|
const toggelChekedItems = (id) => { |
|
|
|
|
|
|
|
const check = refChekedItems.current.includes(id); |
|
|
|
|
|
|
|
setChekedItems( |
|
|
|
|
|
|
|
check |
|
|
|
|
|
|
|
? [...refChekedItems.current.filter((el) => el !== id)] |
|
|
|
|
|
|
|
: [...refChekedItems.current, id] |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
const columns = React.useMemo( |
|
|
|
const columns = React.useMemo( |
|
|
|
() => COLUMNS({ filtering, setFiltering, addTab }), |
|
|
|
() => COLUMNS({ toggelChekedItems, refChekedItems }), |
|
|
|
[] |
|
|
|
[] |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
@ -126,7 +137,7 @@ const BasicTable = ({ |
|
|
|
getTableProps, |
|
|
|
getTableProps, |
|
|
|
getTableBodyProps, |
|
|
|
getTableBodyProps, |
|
|
|
headerGroups, |
|
|
|
headerGroups, |
|
|
|
footerGroups, |
|
|
|
// footerGroups,
|
|
|
|
rows, |
|
|
|
rows, |
|
|
|
page, |
|
|
|
page, |
|
|
|
nextPage, |
|
|
|
nextPage, |
|
|
@ -140,11 +151,11 @@ const BasicTable = ({ |
|
|
|
prepareRow, |
|
|
|
prepareRow, |
|
|
|
allColumns, |
|
|
|
allColumns, |
|
|
|
getToggleHideAllColumnsProps, |
|
|
|
getToggleHideAllColumnsProps, |
|
|
|
setColumnOrder, |
|
|
|
// setColumnOrder,
|
|
|
|
selectedFlatRows, |
|
|
|
// selectedFlatRows,
|
|
|
|
state, |
|
|
|
state, |
|
|
|
setGlobalFilter, |
|
|
|
setGlobalFilter, |
|
|
|
resetResizing, |
|
|
|
// resetResizing,
|
|
|
|
} = useTable( |
|
|
|
} = useTable( |
|
|
|
{ |
|
|
|
{ |
|
|
|
columns, |
|
|
|
columns, |
|
|
@ -164,6 +175,7 @@ const BasicTable = ({ |
|
|
|
|
|
|
|
|
|
|
|
const [activeList, setActiveList] = useState(false); |
|
|
|
const [activeList, setActiveList] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(filtering);
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="bg-white p-4"> |
|
|
|
<div className="bg-white p-4"> |
|
|
|
{/* {filtering && <section>mahdi</section>} */} |
|
|
|
{/* {filtering && <section>mahdi</section>} */} |
|
|
@ -182,11 +194,13 @@ const BasicTable = ({ |
|
|
|
<div className="flex flex-row items-center gap-x-5"> |
|
|
|
<div className="flex flex-row items-center gap-x-5"> |
|
|
|
<div className="flex flex-row items-center gap-x-2"> |
|
|
|
<div className="flex flex-row items-center gap-x-2"> |
|
|
|
<img |
|
|
|
<img |
|
|
|
|
|
|
|
alt="" |
|
|
|
src={list} |
|
|
|
src={list} |
|
|
|
className="cursor-pointer" |
|
|
|
className="cursor-pointer" |
|
|
|
onClick={() => setActiveList(false)} |
|
|
|
onClick={() => setActiveList(false)} |
|
|
|
/> |
|
|
|
/> |
|
|
|
<img |
|
|
|
<img |
|
|
|
|
|
|
|
alt="" |
|
|
|
src={grid} |
|
|
|
src={grid} |
|
|
|
className="cursor-pointer" |
|
|
|
className="cursor-pointer" |
|
|
|
onClick={() => setActiveList(true)} |
|
|
|
onClick={() => setActiveList(true)} |
|
|
@ -208,7 +222,16 @@ const BasicTable = ({ |
|
|
|
borderRadius={"rounded"} |
|
|
|
borderRadius={"rounded"} |
|
|
|
fontSize={"text-xs"} |
|
|
|
fontSize={"text-xs"} |
|
|
|
padding={"p-2"} |
|
|
|
padding={"p-2"} |
|
|
|
text={"انتخاب چند فایل"} |
|
|
|
text={ |
|
|
|
|
|
|
|
chekedItems.length < page.length ? "انتخاب همه" : "حذف انتخاب" |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onClick={() => { |
|
|
|
|
|
|
|
setChekedItems( |
|
|
|
|
|
|
|
chekedItems.length < page.length |
|
|
|
|
|
|
|
? page.map((e) => e.original.id) |
|
|
|
|
|
|
|
: [] |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="w-4/12 "> |
|
|
|
<div className="w-4/12 "> |
|
|
@ -237,7 +260,7 @@ const BasicTable = ({ |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> */} |
|
|
|
</div> */} |
|
|
|
{/* left box */} |
|
|
|
{/* left box */} |
|
|
|
{activeTab == 0 ? ( |
|
|
|
{activeTab === 0 ? ( |
|
|
|
<div |
|
|
|
<div |
|
|
|
className="flex flex-row items-center p-2 rounded-tl rounded-tr" |
|
|
|
className="flex flex-row items-center p-2 rounded-tl rounded-tr" |
|
|
|
style={{ backgroundColor: "#F1F6FF" }} |
|
|
|
style={{ backgroundColor: "#F1F6FF" }} |
|
|
@ -284,7 +307,7 @@ const BasicTable = ({ |
|
|
|
{/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */} |
|
|
|
{/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */} |
|
|
|
|
|
|
|
|
|
|
|
{/* table LIST */} |
|
|
|
{/* table LIST */} |
|
|
|
{activeTab == 0 ? ( |
|
|
|
{activeTab === 0 ? ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
{activeList === true && ( |
|
|
|
{activeList === true && ( |
|
|
|
// table
|
|
|
|
// table
|
|
|
@ -321,22 +344,26 @@ const BasicTable = ({ |
|
|
|
)} |
|
|
|
)} |
|
|
|
<tbody |
|
|
|
<tbody |
|
|
|
{...getTableBodyProps()} |
|
|
|
{...getTableBodyProps()} |
|
|
|
className="divide-y divide-gray-200" |
|
|
|
className={"divide-y divide-gray-200 "} |
|
|
|
> |
|
|
|
> |
|
|
|
{page.map((row, idx) => { |
|
|
|
{page.map((row, idx) => { |
|
|
|
prepareRow(row); |
|
|
|
prepareRow(row); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<React.Fragment key={idx}> |
|
|
|
<React.Fragment key={idx}> |
|
|
|
<tr |
|
|
|
<tr |
|
|
|
{...row.getRowProps()} |
|
|
|
{...row.getRowProps()} |
|
|
|
style={{ |
|
|
|
onClick={() => toggelChekedItems(row.original.id)} |
|
|
|
backgroundColor: isEven(idx) ? "#F9F9F9" : "#fff", |
|
|
|
className={ |
|
|
|
}} |
|
|
|
(isEven(idx) ? " bg-gray-100 " : " bg-white ") + |
|
|
|
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
|
|
|
|
(chekedItems.includes(row.original.id) |
|
|
|
//
|
|
|
|
? isEven(idx) |
|
|
|
|
|
|
|
? "bg-blue-200" |
|
|
|
|
|
|
|
: "bg-blue-100" |
|
|
|
|
|
|
|
: "") |
|
|
|
|
|
|
|
} |
|
|
|
> |
|
|
|
> |
|
|
|
{row.cells.map((cell, index) => { |
|
|
|
{row.cells.map((cell, index) => { |
|
|
|
console.log(row.cells); |
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<td |
|
|
|
<td |
|
|
|
{...cell.getCellProps({ |
|
|
|
{...cell.getCellProps({ |
|
|
@ -390,7 +417,7 @@ const BasicTable = ({ |
|
|
|
{...getTableBodyProps()} |
|
|
|
{...getTableBodyProps()} |
|
|
|
className="flex flex-row flex-wrap gap-4 items-center justify-center" |
|
|
|
className="flex flex-row flex-wrap gap-4 items-center justify-center" |
|
|
|
> |
|
|
|
> |
|
|
|
{rows.map((row, index) => { |
|
|
|
{page.map((row, index) => { |
|
|
|
prepareRow(row); |
|
|
|
prepareRow(row); |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div |
|
|
|
<div |
|
|
@ -400,6 +427,7 @@ const BasicTable = ({ |
|
|
|
style={{ backgroundColor: "#F3F3F3" }} |
|
|
|
style={{ backgroundColor: "#F3F3F3" }} |
|
|
|
> |
|
|
|
> |
|
|
|
{/* {console.log(row.values)} */} |
|
|
|
{/* {console.log(row.values)} */} |
|
|
|
|
|
|
|
<input type="checkbox" /> |
|
|
|
<div className="bg-red-500"> {row.original.Checkbox}</div> |
|
|
|
<div className="bg-red-500"> {row.original.Checkbox}</div> |
|
|
|
<img |
|
|
|
<img |
|
|
|
src={row.original.filePic} |
|
|
|
src={row.original.filePic} |
|
|
|