master
mahdi andalib 3 years ago
parent 0218139589
commit 89a020e80f
  1. 2
      src/App.js
  2. 5
      src/components/ButtonNewDesign/index.js
  3. 245
      src/components/ReactTable5/BasicTable.js
  4. 17
      src/components/ReactTable5/COLUMNS.js
  5. 26
      src/components/ReactTable5/FileType.js
  6. 58
      src/components/ReactTable5/FilterFileType.js
  7. 4
      src/components/ReactTable5/GlobalFilter.js
  8. 50
      src/components/ReactTable5/MOCK_DATA2.json

@ -101,7 +101,7 @@ function App() {
{/* <TableDesign1 /> */} {/* <TableDesign1 /> */}
{/* <ReactTable2 /> */} {/* <ReactTable2 /> */}
{/* <ReactTable3 /> */} {/* <ReactTable3 /> */}
{/* <ReactTable4 /> */} <ReactTable4 />
<ReactTable5 /> <ReactTable5 />
{/* <Digikala /> */} {/* <Digikala /> */}
{/* <HeaderDesign1 /> {/* <HeaderDesign1 />

@ -14,12 +14,13 @@ const ButtonNewDesign = ({
padding, padding,
icon, icon,
buttonIcon, buttonIcon,
text,
}) => { }) => {
return ( return (
<button <button
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}
{icon && ( {icon && (
<span className={`rounded-full mr-2 ${iconBgColor} `}> <span className={`rounded-full mr-2 ${iconBgColor} `}>
<img src={buttonIcon} alt="" className="w-full" /> <img src={buttonIcon} alt="" className="w-full" />
@ -44,4 +45,6 @@ ButtonNewDesign.defaultProps = {
// icons // icons
icon: true, icon: true,
buttonIcon: arrow, buttonIcon: arrow,
text: "اطلاعات بیشتر",
}; };

@ -5,7 +5,6 @@ import Tabbar from "./Tabbar";
import MOCK_DATA2 from "./MOCK_DATA2.json"; import MOCK_DATA2 from "./MOCK_DATA2.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter"; import { GlobalFilter } from "./GlobalFilter";
import { COLUMNS } from "./COLUMNS"; import { COLUMNS } from "./COLUMNS";
@ -14,6 +13,7 @@ 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 grid from "./grid.svg"; import grid from "./grid.svg";
import list from "./list.svg"; import list from "./list.svg";
@ -32,16 +32,75 @@ import {
useColumnOrder, useColumnOrder,
useExpanded, useExpanded,
} from "react-table"; } from "react-table";
import ButtonNewDesign from "../ButtonNewDesign";
export function CheckBox({}) { export function CheckBox({}) {
return <input type="checkbox" className="cursor-pointer" />; return <input type="checkbox" className="cursor-pointer" />;
} }
export const SelectColumnFilter = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
return (
<select
className="w-32 appearance-none text-xs flex flex-row items-start p-2 rounded focus:outline-none border focus:border-gray-200 focus:ring focus:ring-gray-200 focus:ring-opacity-20"
style={{ borderColor: "#EEEEEE", color: "#00253A" }}
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
بر اساس نوع فایل
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "JPG";
} else if (option === 2) {
return "PNG";
} else if (option === 3) {
return "PDF";
} else if (option === 4) {
return "CSV";
} else if (option === 5) {
return "PPT";
} else {
return "MP4";
}
})()}{" "}
</option>
))}
</select>
);
};
const BasicTable = ({ const BasicTable = ({
settingsIcon, settingsIcon,
thead, thead,
goToPage, goToPage,
showMore, showMore,
filterBarDefault,
addTab, addTab,
tabs, tabs,
delTab, delTab,
@ -85,14 +144,8 @@ const BasicTable = ({
[] []
); );
// const defaultColumn = {
// Cell: EditableCell,
// };
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return { return {};
Filter: ColumnSearch,
};
}, []); }, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند // اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
@ -169,7 +222,7 @@ const BasicTable = ({
/> />
))} ))}
</div>{" "} */} </div>{" "} */}
<div> <div className="mb-3 flex flex-row items-center gap-x-5">
{/* select View list */} {/* select View list */}
<div className="flex flex-row items-center gap-x-2"> <div className="flex flex-row items-center gap-x-2">
<img <img
@ -183,18 +236,42 @@ const BasicTable = ({
onClick={() => setActiveList(true)} onClick={() => setActiveList(true)}
/> />
</div> </div>
{headerGroups.map((headerGroup) =>
headerGroup.headers.map((column) =>
column.Filter ? (
<div className="mt-2 sm:mt-0" key={column.id}>
{column.render("Filter")}
</div>
) : null
)
)}
<ButtonNewDesign
bgColor={"bg-blue-500"}
icon={null}
border={"border-0"}
borderRadius={"rounded"}
fontSize={"text-xs"}
padding={"p-2"}
text={"انتخاب چند فایل"}
/>
<div className="flex-1 ">
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
</div>
{/* <FilterFileType /> */}
</div> </div>
<div className="flex flex-row items-center justify-between"> {filterBarDefault && (
{/* right box */} <div className="flex flex-row items-center justify-between">
<di className="bg-red-400"> {/* right box */}
<Tabbar <di className="">
tabs={tabs} <Tabbar
delTab={delTab} tabs={tabs}
setActivateTab={setActivateTab} delTab={delTab}
activeTab={activeTab} setActivateTab={setActivateTab}
/> activeTab={activeTab}
</di> />
{/* <div className=""> </di>
{/* <div className="">
<Tabbar <Tabbar
tabs={tabs} tabs={tabs}
delTab={delTab} delTab={delTab}
@ -202,57 +279,57 @@ const BasicTable = ({
activeTab={activeTab} activeTab={activeTab}
/> />
</div> */} </div> */}
{/* left box */} {/* left box */}
{activeTab == 0 ? ( {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 <div
className="flex flex-row items-center p-1 rounded" className="flex flex-row items-center p-2 rounded-tl rounded-tr"
style={{ backgroundColor: "#F9FBFF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* go to page */} {/* search box */}
<GoToPage <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
pageIndex={pageIndex} {/* pagination */}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
{/* vertical line */}
<div <div
className={`w-0.5 h-4 mr-2`} className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#65A9FF" }} style={{ backgroundColor: "#F9FBFF" }}
></div> >
{/* arrows */} {/* go to page */}
<Pagination <GoToPage
gotoPage={gotoPage} pageIndex={pageIndex}
canPreviousPage={canPreviousPage} gotoPage={gotoPage}
previousPage={previousPage} pageOptions={pageOptions}
canNextPage={canNextPage} />
pageCount={pageCount} {/* vertical line */}
nextPage={nextPage} <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> </div>
{/* settings icon */} ) : null}
{settingsIcon && ( </div>
<Settings )}
allColumns={allColumns} {/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
)}
</div>
) : null}
</div>
{activeList === true ? <div>listView</div> : <div>gridView</div>}
{/* table LIST */} {/* table LIST */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<> <>
{activeList === false && ( {activeList === true && (
// table // table
<table <table
{...getTableProps()} {...getTableProps()}
@ -368,21 +445,32 @@ const BasicTable = ({
</table> </table>
)} )}
{/* GRID LIST */} {/* GRID LIST */}
{activeList === true && ( {activeList === false && (
<div className="flex flex-row gap-4"> <div
{data.map((item, index) => ( {...getTableBodyProps()}
<div className="flex flex-row flex-wrap gap-4 items-center justify-center"
className="flex flex-col px-4 py-5 rounded-md" >
key={index} {rows.map((row, index) => {
style={{ backgroundColor: "#F3F3F3" }} prepareRow(row);
> return (
<img src={image1} className="w-52" /> <div
<p className="text-sm my-3">{item.fileName}</p> {...row.getRowProps()}
<span className="text-xs text-left text-gray-500"> className="flex flex-col px-4 py-5 rounded-md"
{item.fileSize} key={index}
</span> style={{ backgroundColor: "#F3F3F3" }}
</div> >
))} <img
src={row.original.filePic}
alt={row.original.filePic}
className="w-52"
/>
<p className="text-sm my-3">{row.original.fileName}</p>
<span className="text-xs text-left text-gray-500">
{row.original.fileSize}
</span>
</div>
);
})}
</div> </div>
)} )}
{/* bottom table */} {/* bottom table */}
@ -418,6 +506,7 @@ BasicTable.defaultProps = {
thead: false, thead: false,
goToPage: false, goToPage: false,
showMore: false, showMore: false,
filterBarDefault: false,
// listView: [ // listView: [
// { icon: grid, click: () => setActiveList(false) }, // { icon: grid, click: () => setActiveList(false) },

@ -1,20 +1,17 @@
import { format } from "date-fns"; import { format } from "date-fns";
import BasicTable, { CheckBox } from "../ReactTable5/BasicTable"; import BasicTable, {
CheckBox,
SelectColumnFilter,
} from "../ReactTable5/BasicTable";
import { OrderStatus } from "./OrderStatus"; import { FileType } from "./FileType";
import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons";
import { EditButtons } from "./EditButtons";
import { SelectColumnFilter } from "./SelectColumnFilter.js";
import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
import { SliderColumnFilter } from "./SliderColumnFilter.js";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{ {
Header: "چک باکس", Header: "چک باکس",
accessor: CheckBox, accessor: CheckBox,
className: "bg-red-100 w-7", className: "w-7",
}, },
{ {
Header: "ایکن فایل", Header: "ایکن فایل",
@ -30,6 +27,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{ {
Header: "نوع فایل", Header: "نوع فایل",
accessor: "fileType", accessor: "fileType",
Cell: FileType,
Filter: SelectColumnFilter, // new
// className: "bg-red-500 ", // className: "bg-red-500 ",
}, },
{ {

@ -0,0 +1,26 @@
export function FileType({ value }) {
return (
<div className="">
{(() => {
switch (value) {
case 1:
return <span>JPG</span>;
case 2:
return <span>PNG</span>;
case 3:
return <span>PDF</span>;
case 4:
return <span>CSV</span>;
case 5:
return <span>PPT</span>;
default:
return <span>MP4</span>;
}
})()}
</div>
);
}

@ -0,0 +1,58 @@
import React from "react";
export const FilterFileType = ({
column: { filterValue, setFilter, preFilteredRows, id, render },
}) => {
const options = React.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return [...options.values()];
}, [id, preFilteredRows]);
return (
<select
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
name={id}
id={id}
value={filterValue}
onChange={(e) => {
setFilter(e.target.value || undefined);
}}
>
<option
className="text-white"
value=""
style={{ backgroundColor: "#65A9FF" }}
>
همه
</option>
{options.map((option, i) => (
<option
key={i}
value={option}
className="text-right text-white px-2"
style={{ backgroundColor: "#65A9FF" }}
>
{(() => {
if (option === 1) {
return "JPG";
} else if (option === 2) {
return "PNG";
} else if (option === 3) {
return "PDF";
} else if (option === 4) {
return "CSV";
} else if (option === 5) {
return "PPT";
} else {
return "MP4";
}
})()}{" "}
</option>
))}
</select>
);
};

@ -14,7 +14,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
}, 400); }, 400);
return ( return (
<div className="flex flex-row-reverse items-center relative ml-2 "> <div className="flex flex-row-reverse items-center relative ml-2 w-full">
{activeSearchBox && ( {activeSearchBox && (
<img <img
src={cancleIcon} src={cancleIcon}
@ -34,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onFocus={() => setActiveSearchBox(true)} onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)} // onBlur={() => setActiveSearchBox(false)}
type="text" type="text"
className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`} className={`w-full text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
/> />
</div> </div>

@ -2,55 +2,81 @@
{ {
"id": 1, "id": 1,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "تهران شهری برای آیندگان", "fileName": "تهران شهری برای آیندگان",
"fileType": "JPG", "fileType": 1,
"fileSize": "23.5KB", "fileSize": "23.5KB",
"fileDate": "1400/02/12" "fileDate": "1400/02/12"
}, },
{ {
"id": 2, "id": 2,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "عکس سال 99 نوروز", "fileName": "عکس سال 99 نوروز",
"fileType": "JPG", "fileType": 2,
"fileSize": "69.5KB", "fileSize": "69.5KB",
"fileDate": "1400/02/10" "fileDate": "1400/02/10"
}, },
{ {
"id": 3, "id": 3,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "دری به سوی بی نهایت", "fileName": "دری به سوی بی نهایت",
"fileType": "JPG", "fileType": 3,
"fileSize": "1.5MB", "fileSize": "1.5MB",
"fileDate": "1400/04/24" "fileDate": "1400/04/24"
}, },
{ {
"id": 4, "id": 4,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل اکسل دانش آموزان", "fileName": "فایل اکسل دانش آموزان",
"fileType": "JPG", "fileType": 4,
"fileSize": "20MB", "fileSize": "20MB",
"fileDate": "1397/04/20" "fileDate": "1397/04/20"
}, },
{ {
"id": 5, "id": 5,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "صحرای بدون شن", "fileName": "صحرای بدون شن",
"fileType": "JPG", "fileType": 5,
"fileSize": "150MB", "fileSize": "150MB",
"fileDate": "1399/04/20" "fileDate": "1399/04/20"
}, },
{ {
"id": 6, "id": 6,
"filePic": "picture", "filePic": "picture",
"url": "https://news.varzeshe3.com/pictures/2022/03/07/C/lb3arvp4.jpg?w=315",
"fileName": "فایل ایلاستریتور موارد اصلاحی طرح", "fileName": "فایل ایلاستریتور موارد اصلاحی طرح",
"fileType": "JPG", "fileType": 6,
"fileSize": "150MB", "fileSize": "150MB",
"fileDate": "1393/10/20" "fileDate": "1393/10/20"
},
{
"id": 7,
"filePic": "picture",
"fileName": "تهران شهری برای آیندگان",
"fileType": 1,
"fileSize": "23.5KB",
"fileDate": "1400/02/12"
},
{
"id": 8,
"filePic": "picture",
"fileName": "عکس سال 99 نوروز",
"fileType": 2,
"fileSize": "69.5KB",
"fileDate": "1400/02/10"
},
{
"id": 9,
"filePic": "picture",
"fileName": "دری به سوی بی نهایت",
"fileType": 3,
"fileSize": "1.5MB",
"fileDate": "1400/04/24"
},
{
"id": 10,
"filePic": "picture",
"fileName": "فایل اکسل دانش آموزان",
"fileType": 4,
"fileSize": "20MB",
"fileDate": "1397/04/20"
} }
] ]

Loading…
Cancel
Save