update 8 files

master
amir hosein gorji 3 years ago
parent dbf6247ee7
commit 731441798c
  1. 106
      src/App.js
  2. 2
      src/components/ButtonNewDesign/index.js
  3. 261
      src/components/FolderTree/index.js
  4. 72
      src/components/ReactTable5/BasicTable.js
  5. 13
      src/components/ReactTable5/COLUMNS.js
  6. 14
      src/components/ReactTable5/Checkbox.js
  7. 4
      src/components/ReactTable5/MOCK_DATA2.json
  8. 15658
      yarn.lock

@ -66,65 +66,65 @@ function App() {
return (
<Provider store={store}>
<div className="App">
{/* <ProductDesign /> */}
{/* <VodProductDesign /> */}
{/* <VodProduct /> */}
{/* <VodProductNew /> */}
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <ContactInfoSection /> */}
{/* <Testttt /> */}
{/* <Design2D /> */}
{/* <Features /> */}
{/* <Feedback /> */}
{/* <Alert /> */}
{/* <Toast /> */}
{/* <ProductSuggestion /> */}
{/* <ProductImage /> */}
{/* <ProductTab /> */}
{/* <ProductStatusCard /> */}
{/* <AdvertisementDesign1 /> */}
{/* <AdvertisementDesign2 /> */}
{/* <AdvertisementDesign3 /> */}
{/* <CourseChapter /> */}
{/* <SidebarMenu /> */}
{/* <SimpleBarChart /> */}
{/* <SpecifiedDomainRadarChart /> */}
{/* <Design1 /> */}
{/* <Design2 /> */}
{/* <TableDesign1 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
{/* <ReactTable4 /> */}
{/* <ReactTable5 /> */}
{/* <Digikala /> */}
{/* <HeaderDesign1 />
{/* <ProductDesign />
<VodProductDesign />
<VodProduct />
<VodProductNew />
<BookDesign />
<ButtonDesign />
<ProductTags />
<CounterDesign />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
<ContactInfoSection />
<Testttt />
<Design2D />
<Features />
<Feedback />
<Alert />
<Toast />
<ProductSuggestion />
<ProductImage />
<ProductTab />
<ProductStatusCard />
<AdvertisementDesign1 />
<AdvertisementDesign2 />
<AdvertisementDesign3 />
<CourseChapter />
<SidebarMenu />
<SimpleBarChart />
<SpecifiedDomainRadarChart />
<Design1 />
<Design2 />
<TableDesign1 />
<ReactTable2 />
<ReactTable3 />
<ReactTable4 />
<ReactTable5 />
<Digikala />
<HeaderDesign1 />
<div className="flex">
<SidebarDesign2 className="w-1/5" />
<span className="w-4/5 ">
<ReactTable4 />
<FooterDesign1 />
</span>
</div> */}
{/* <BreadCrumb /> */}
{/* <SearchBox /> */}
{/* <FileManager /> */}
{/* <Playlist /> */}
{/* <Folderlists /> */}
{/* <Blogs /> */}
{/* <CardHolder /> */}
{/* <UploadFile /> */}
{/* <BarChartApex /> */}
{/* <SemiDonut /> */}
{/* <FolderTree /> */}
</div>
<BreadCrumb />
<SearchBox />
<FileManager />
<Playlist />
<Folderlists />
<Blogs />
<CardHolder />
<UploadFile />
<BarChartApex />
<SemiDonut />
<FolderTree /> */}
<GridListTable />
{/* <SidebarDesign2 className="w-1/5" /> */}

@ -15,9 +15,11 @@ const ButtonNewDesign = ({
icon,
buttonIcon,
text,
onClick,
}) => {
return (
<button
onClick={onClick}
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize} ${padding}`}
>
{text}

@ -6,169 +6,146 @@ import selectedFolder from "./images/selectedFolder.svg";
import arrow from "./images/arrow.svg";
import selectedArrow from "./images/selectedArrow.svg";
const FolderTree = ({ items }) => {
const [activeDropdown, setActiveDropdown] = useState(null);
const FolderState = ({ items }) => {
let [selected, setSelected] = useState(1);
let [top, setTop] = useState(1);
return (
<div className="w-fit p-4">
{items.map((item, index) => (
<div>
{/* level1 */}
<div
key={index}
className="flex flex-row items-center mb-2 cursor-pointer"
onClick={() =>
setActiveDropdown(activeDropdown === item ? null : item)
}
>
{/* روش اول */}
{/* {activeDropdown === item && <img src={item.normalArrow} />}
{activeDropdown === null && <img src={item.icon} />} */}
{/* روش دوم */}
{activeDropdown === item ? (
<img
src={selectedArrow}
className="-rotate-90 transition-all duration-700"
/>
) : (
<img src={arrow} className=" transition-all duration-700" />
)}
{activeDropdown === item ? (
<img
src={selectedFolder}
className=" transition-all duration-700"
/>
) : (
<img src={folder} className=" transition-all duration-700" />
)}
<span className="text-sm mr-2" style={{ color: "#00253A" }}>
{item.name}
</span>
</div>
{activeDropdown === item &&
item.menuItems.map((menuItem, i) => (
<>
<div
className={`z-0 absolute w-3/12 right-0 py-2 bg-blue-100 transition-all border-r-4 border-blue-600`}
style={{ top: top - 10 }}
>
&nbsp;
</div>
<FolderTree
items={items}
selected={selected}
setTop={setTop}
setSelected={setSelected}
/>
</>
);
};
const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
const [expands, setExpand] = useState(
items.filter((item) => item.exapnd).map((item) => item.id)
);
if (!pid) pid = null;
return (
<div className={"w-fit pr-3 "}>
{items
.filter((item) => item.pid === pid)
.map((item, index) => {
const expand = expands.includes(item.id);
return (
<>
<div
key={i}
className="flex flex-row items-center mb-2 cursor-pointer mr-5"
// onClick={() =>
// setActiveDropdown(
// activeDropdown === menuItem ? null : menuItem
// )
// }
key={index}
className={
"flex flex-row items-center cursor-pointer py-1 "
// + (selected === item.id ? "bg-blue-200" : "")
}
onClick={(e) => {
expand
? setExpand([...expands.filter((ex) => ex !== item.id)])
: setExpand([...expands, item.id]);
setSelected(item.id);
setTop(e.target.offsetTop);
}}
>
{activeDropdown === menuItem ? (
<img
src={selectedArrow}
className="-rotate-90 transition-all duration-700"
/>
) : (
<img src={arrow} className=" transition-all duration-700" />
)}
{activeDropdown === menuItem ? (
<img
src={selectedFolder}
className=" transition-all duration-700"
/>
) : (
<img src={folder} className=" transition-all duration-700" />
)}
<span className="text-sm mr-2" style={{ color: "#00253A" }}>
{menuItem.title}
<img
alt=""
src={expand ? selectedArrow : arrow}
className={
"z-10 transition-all duration-700 " +
(expand ? "-rotate-90" : "")
}
/>
<img
alt=""
src={expand ? selectedFolder : selectedFolder}
className="z-10 transition-all duration-700"
/>
<span
className={
"z-10 mr-2 " +
(selected === item.id ? "text-sm" : "text-xs")
}
style={{ color: "#00253A" }}
>
{item.name}
{item.id}
</span>
</div>
))}
</div>
))}
{expand && (
<FolderTree
items={items}
pid={item.id}
selected={selected}
setTop={setTop}
setSelected={setSelected}
/>
)}
</>
);
})}
</div>
);
};
// {
// item.menuItem.menuSubItems.map((menuSubItem, j) => (
// <div
// key={j}
// className="flex flex-row items-center mb-2 cursor-pointer mr-5"
// >
// <img src={arrow} />
// <img src={folder} />
// <span className="text-sm mr-2" style={{ color: "#00253A" }}>
// {menuSubItem.subTitle}
// </span>
// </div>
// ));
// }
export default FolderTree;
FolderTree.defaultProps = {
export default FolderState;
FolderState.defaultProps = {
items: [
{
id: 1,
pid: null,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 2,
pid: null,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 3,
pid: null,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 4,
pid: null,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 5,
pid: 1,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 6,
pid: 1,
name: "فیلمها وعکس مربوط به حادثه",
},
{
id: 7,
pid: 1,
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
id: 8,
pid: 7,
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
id: 9,
pid: 8,
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
id: 10,
pid: 2,
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
],
};

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

@ -1,26 +1,29 @@
import { format } from "date-fns";
import BasicTable, { SelectColumnFilter } from "../ReactTable5/BasicTable";
import { SelectColumnFilter } from "../ReactTable5/BasicTable";
import { Checkbox } from "./Checkbox";
import { FileType } from "./FileType";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
export const COLUMNS = ({ toggelChekedItems, refChekedItems }) => [
{
Header: "checkBox",
// accessor: "checkBox",
accessor: () => Checkbox({ setFiltering, filtering, addTab }),
accessor: "id",
Cell: ({ value }) =>
Checkbox({ id: value, toggelChekedItems, refChekedItems }),
className: "w-7",
},
{
Header: "ایکن فایل",
accessor: "filePic",
disableSortBy: true,
className: "bg-red-500 w-7",
className: "bg-blue-500 w-10",
Cell: ({ value }) => <img alt="" src={value} className="w-10" />,
},
{
Header: "نام فایل",
accessor: "fileName",
// className: "bg-yellow-500",
},
{

@ -1,15 +1,11 @@
import React, { useState } from "react";
export function Checkbox({ setFiltering, filtering, addTab }) {
// const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
import React from "react";
export function Checkbox({ id, toggelChekedItems, refChekedItems }) {
const checked = refChekedItems.current.includes(id);
return (
<input
// onClick={() => {
// console.log("mahdi");
// setFiltering(!selectedFilterRow);
// setSelectedFilterRow(!selectedFilterRow);
// }}
checked={checked}
onClick={() => toggelChekedItems(id)}
type="checkbox"
// className={`cursor-pointer ${selectedFilterRow ? "p-72" : "p-5"}`}
className={`cursor-pointer`}

@ -1,7 +1,7 @@
[
{
"id": 1,
"filePic": "picture",
"filePic": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png",
"fileName": "تهران شهری برای آیندگان",
"fileType": 1,
"fileSize": "23.5KB",
@ -79,4 +79,4 @@
"fileSize": "20MB",
"fileDate": "1397/04/20"
}
]
]

15658
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save