mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
master
mahdi andalib 3 years ago
parent a7f92e1447
commit f6c6b9c3c8
5 changed files with 72 additions and 247 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      build.zip
  2. 106
      src/App.js
  3. 187
      src/components/ReactTable5/BasicTable.js
  4. 4
      src/components/ReactTable5/COLUMNS.js
  5. 20
      src/components/ReactTable5/MOCK_DATA2.json

BIN
build.zip
View File

Binary file not shown.

106
src/App.js
Unescape View File

@ -66,66 +66,66 @@ 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" /> */}
</div> </div>

187
src/components/ReactTable5/BasicTable.js
Unescape View File

@ -1,23 +1,15 @@
import React, { useMemo, useState, useRef } from "react"; import React, { useMemo, useState, useRef } from "react";
import "./index.scss"; import "./index.scss";
import Tabbar from "./Tabbar";
import MOCK_DATA2 from "./MOCK_DATA2.json"; import MOCK_DATA2 from "./MOCK_DATA2.json";
import { GlobalFilter } from "./GlobalFilter"; import { GlobalFilter } from "./GlobalFilter";
import { COLUMNS } from "./COLUMNS"; import { COLUMNS } from "./COLUMNS";
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 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 RenderRowSubComponent from "./RenderRowSubComponent"; import RenderRowSubComponent from "./RenderRowSubComponent";
import EditRow from "./EditRow"; import EditRow from "./EditRow";
@ -91,18 +83,7 @@ export const SelectColumnFilter = ({
); );
}; };
const BasicTable = ({ const BasicTable = ({ addTab, activeTab }) => {
settingsIcon,
thead,
goToPage,
showMore,
filterBarDefault,
addTab,
tabs,
delTab,
setActivateTab,
activeTab,
}) => {
const data = useMemo(() => MOCK_DATA2, []); const data = useMemo(() => MOCK_DATA2, []);
// console.log(data); // console.log(data);
@ -118,14 +99,12 @@ const BasicTable = ({
: [...refChekedItems.current, id] : [...refChekedItems.current, id]
); );
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps
const columns = React.useMemo( const columns = React.useMemo(
() => COLUMNS({ toggelChekedItems, refChekedItems }), () => COLUMNS({ toggelChekedItems, refChekedItems }),
[] []
); );
// console.log(columns[0]);
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return {}; return {};
}, []); }, []);
@ -137,25 +116,11 @@ const BasicTable = ({
getTableProps, getTableProps,
getTableBodyProps, getTableBodyProps,
headerGroups, headerGroups,
// footerGroups,
rows, rows,
page, page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
prepareRow, prepareRow,
allColumns,
getToggleHideAllColumnsProps,
// setColumnOrder,
// selectedFlatRows,
state, state,
setGlobalFilter, setGlobalFilter,
// resetResizing,
} = useTable( } = useTable(
{ {
columns, columns,
@ -171,24 +136,12 @@ const BasicTable = ({
useRowSelect useRowSelect
); );
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter } = state;
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>} */}
{/* <div className="flex flex-row items-center">
{listView.map((list, i) => (
<img
keep={i}
src={list.icon}
className="cursor-pointer mx-2"
onClick={() => setActiveList(false)}
/>
))}
</div>{" "} */}
<div className="mb-7 flex flex-row items-center justify-between"> <div className="mb-7 flex flex-row items-center justify-between">
{/* select View list */} {/* select View list */}
<div className="flex flex-row items-center gap-x-5"> <div className="flex flex-row items-center gap-x-5">
@ -237,111 +190,16 @@ const BasicTable = ({
<div className="w-4/12 "> <div className="w-4/12 ">
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
</div> </div>
{/* <FilterFileType /> */}
</div> </div>
{filterBarDefault && (
<div className="flex flex-row items-center justify-between">
{/* right box */}
<di className="">
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</di>
{/* <div className="">
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div> */}
{/* left box */}
{activeTab === 0 ? (
<div
className="flex flex-row items-center p-2 rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<div
className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
>
{/* go to page */}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
{/* vertical line */}
<div
className={`w-0.5 h-4 mr-2`}
style={{ backgroundColor: "#65A9FF" }}
></div>
{/* arrows */}
<Pagination
gotoPage={gotoPage}
canPreviousPage={canPreviousPage}
previousPage={previousPage}
canNextPage={canNextPage}
pageCount={pageCount}
nextPage={nextPage}
/>
</div>
{/* settings icon */}
{settingsIcon && (
<Settings
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
)}
</div>
) : null}
</div>
)}
{/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */}
{/* table LIST */} {/* table LIST */}
{activeTab === 0 ? ( {activeTab === 0 ? (
<> <>
{activeList === true && ( {activeList === false && (
// table // table
<table <table
{...getTableProps()} {...getTableProps()}
className="min-w-full divide-y divide-gray-200 mb-5" className="min-w-full divide-y divide-gray-200 mb-5"
> >
{thead && (
<thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th
{...column.getHeaderProps(
column.getSortByToggleProps()
)}
scope="col"
className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
style={{ color: "#3287B9" }}
>
{column.render("Header")}
<span>
{column.isSorted
? column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
)}
<tbody <tbody
{...getTableBodyProps()} {...getTableBodyProps()}
className={"divide-y divide-gray-200 "} className={"divide-y divide-gray-200 "}
@ -369,17 +227,14 @@ const BasicTable = ({
{...cell.getCellProps({ {...cell.getCellProps({
className: cell.column.className, className: cell.column.className,
})} })}
// className="p-4 whitespace-nowrap text-xs text-right"
style={{ style={{
padding: "12px", padding: "12px",
fontSize: "13px", fontSize: "13px",
textAlign: "right", textAlign: "right",
whiteSpace: "nowrap", whiteSpace: "nowrap",
// backgroundColor: row.cells[0] ? "red" : "blue",
}} }}
key={index} key={index}
{...cell.getCellProps()} {...cell.getCellProps()}
// className="p-4 whitespace-nowrap text-xs text-right "
role="cell" role="cell"
> >
{cell.render("Cell")} {cell.render("Cell")}
@ -390,12 +245,6 @@ const BasicTable = ({
{row.isExpanded ? ( {row.isExpanded ? (
<tr> <tr>
<td colSpan={headerGroups[0].headers.length}> <td colSpan={headerGroups[0].headers.length}>
{/* {RenderRowSubComponent({
row: row.original,
columns,
addTab,
})} */}
{/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent <RenderRowSubComponent
columns={columns} columns={columns}
addTab={addTab} addTab={addTab}
@ -412,7 +261,7 @@ const BasicTable = ({
</table> </table>
)} )}
{/* GRID LIST */} {/* GRID LIST */}
{activeList === false && ( {activeList === true && (
<div <div
{...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"
@ -426,7 +275,6 @@ const BasicTable = ({
key={index} key={index}
style={{ backgroundColor: "#F3F3F3" }} style={{ backgroundColor: "#F3F3F3" }}
> >
{/* {console.log(row.values)} */}
<input type="checkbox" /> <input type="checkbox" />
<div className="bg-red-500"> {row.original.Checkbox}</div> <div className="bg-red-500"> {row.original.Checkbox}</div>
<img <img
@ -443,17 +291,6 @@ const BasicTable = ({
})} })}
</div> </div>
)} )}
{/* bottom table */}
{goToPage && (
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
)}
{showMore && (
<ShowMoreRows pageSize={pageSize} setPageSize={setPageSize} />
)}
</> </>
) : ( ) : (
<EditRow <EditRow
@ -470,16 +307,4 @@ const BasicTable = ({
export default BasicTable; export default BasicTable;
BasicTable.defaultProps = { BasicTable.defaultProps = {};
settingsIcon: true,
thead: false,
goToPage: false,
showMore: false,
filterBarDefault: false,
// listView: [
// { icon: grid, click: () => setActiveList(false) },
// { icon: list, click: () => setActiveList(true) },
// ],
};

4
src/components/ReactTable5/COLUMNS.js
Unescape View File

@ -17,8 +17,8 @@ export const COLUMNS = ({ toggelChekedItems, refChekedItems }) => [
Header: "ایکن فایل", Header: "ایکن فایل",
accessor: "filePic", accessor: "filePic",
disableSortBy: true, disableSortBy: true,
className: "bg-blue-500 w-10", className: "w-16",
Cell: ({ value }) => <img alt="" src={value} className="w-10" />, Cell: ({ value }) => <img alt="" src={value} className="" />,
}, },
{ {
Header: "نام فایل", Header: "نام فایل",

20
src/components/ReactTable5/MOCK_DATA2.json
Unescape View File

@ -1,7 +1,7 @@
[ [
{ {
"id": 1, "id": 1,
"filePic": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png", "filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "تهران شهری برای آیندگان", "fileName": "تهران شهری برای آیندگان",
"fileType": 1, "fileType": 1,
"fileSize": "23.5KB", "fileSize": "23.5KB",
@ -9,7 +9,7 @@
}, },
{ {
"id": 2, "id": 2,
"filePic": "picture", "filePic": "https://img.icons8.com/stickers/2x/png.png",
"fileName": "عکس سال 99 نوروز", "fileName": "عکس سال 99 نوروز",
"fileType": 2, "fileType": 2,
"fileSize": "69.5KB", "fileSize": "69.5KB",
@ -17,7 +17,7 @@
}, },
{ {
"id": 3, "id": 3,
"filePic": "picture", "filePic": "https://img.icons8.com/color/452/folder-invoices--v1.png",
"fileName": "دری به سوی بی نهایت", "fileName": "دری به سوی بی نهایت",
"fileType": 3, "fileType": 3,
"fileSize": "1.5MB", "fileSize": "1.5MB",
@ -25,7 +25,7 @@
}, },
{ {
"id": 4, "id": 4,
"filePic": "picture", "filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "فایل اکسل دانش آموزان", "fileName": "فایل اکسل دانش آموزان",
"fileType": 4, "fileType": 4,
"fileSize": "20MB", "fileSize": "20MB",
@ -33,7 +33,7 @@
}, },
{ {
"id": 5, "id": 5,
"filePic": "picture", "filePic": "https://img.icons8.com/external-xnimrodx-blue-xnimrodx/2x/external-video-advertising-xnimrodx-blue-xnimrodx-3.png",
"fileName": "صحرای بدون شن", "fileName": "صحرای بدون شن",
"fileType": 5, "fileType": 5,
"fileSize": "150MB", "fileSize": "150MB",
@ -41,7 +41,7 @@
}, },
{ {
"id": 6, "id": 6,
"filePic": "picture", "filePic": "https://img.icons8.com/color/2x/mp3.png",
"fileName": "فایل ایلاستریتور موارد اصلاحی طرح", "fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
"fileType": 6, "fileType": 6,
"fileSize": "150MB", "fileSize": "150MB",
@ -49,7 +49,7 @@
}, },
{ {
"id": 7, "id": 7,
"filePic": "picture", "filePic": "https://img.icons8.com/external-xnimrodx-blue-xnimrodx/2x/external-video-advertising-xnimrodx-blue-xnimrodx-3.png",
"fileName": "تهران شهری برای آیندگان", "fileName": "تهران شهری برای آیندگان",
"fileType": 1, "fileType": 1,
"fileSize": "23.5KB", "fileSize": "23.5KB",
@ -57,7 +57,7 @@
}, },
{ {
"id": 8, "id": 8,
"filePic": "picture", "filePic": "https://img.icons8.com/external-xnimrodx-lineal-color-xnimrodx/2x/external-jpg-graphic-design-xnimrodx-lineal-color-xnimrodx.png",
"fileName": "عکس سال 99 نوروز", "fileName": "عکس سال 99 نوروز",
"fileType": 2, "fileType": 2,
"fileSize": "69.5KB", "fileSize": "69.5KB",
@ -65,7 +65,7 @@
}, },
{ {
"id": 9, "id": 9,
"filePic": "picture", "filePic": "https://img.icons8.com/color/452/folder-invoices--v1.png",
"fileName": "دری به سوی بی نهایت", "fileName": "دری به سوی بی نهایت",
"fileType": 3, "fileType": 3,
"fileSize": "1.5MB", "fileSize": "1.5MB",
@ -73,7 +73,7 @@
}, },
{ {
"id": 10, "id": 10,
"filePic": "picture", "filePic": "https://img.icons8.com/stickers/2x/png.png",
"fileName": "فایل اکسل دانش آموزان", "fileName": "فایل اکسل دانش آموزان",
"fileType": 4, "fileType": 4,
"fileSize": "20MB", "fileSize": "20MB",

Write Preview
Loading…
Cancel
Save