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. 2
      src/components/ReactTable5/MOCK_DATA2.json
  8. 15658
      yarn.lock

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

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

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

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

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

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

15658
yarn.lock

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