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 /> */}
{/* <ReactTable2 /> */}
{/* <ReactTable3 /> */}
{/* <ReactTable4 /> */}
<ReactTable4 />
<ReactTable5 />
{/* <Digikala /> */}
{/* <HeaderDesign1 />

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

@ -5,7 +5,6 @@ import Tabbar from "./Tabbar";
import MOCK_DATA2 from "./MOCK_DATA2.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter";
import { COLUMNS } from "./COLUMNS";
@ -14,6 +13,7 @@ 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 list from "./list.svg";
@ -32,16 +32,75 @@ import {
useColumnOrder,
useExpanded,
} from "react-table";
import ButtonNewDesign from "../ButtonNewDesign";
export function CheckBox({}) {
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 = ({
settingsIcon,
thead,
goToPage,
showMore,
filterBarDefault,
addTab,
tabs,
delTab,
@ -85,14 +144,8 @@ const BasicTable = ({
[]
);
// const defaultColumn = {
// Cell: EditableCell,
// };
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => {
return {
Filter: ColumnSearch,
};
return {};
}, []);
// اگر بخواهیم ردیف های جدولمون یکی در میان زنگ پس زمینه اشون با هم فرق کند
@ -169,7 +222,7 @@ const BasicTable = ({
/>
))}
</div>{" "} */}
<div>
<div className="mb-3 flex flex-row items-center gap-x-5">
{/* select View list */}
<div className="flex flex-row items-center gap-x-2">
<img
@ -183,18 +236,42 @@ const BasicTable = ({
onClick={() => setActiveList(true)}
/>
</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 className="flex flex-row items-center justify-between">
{/* right box */}
<di className="bg-red-400">
<Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</di>
{/* <div className="">
{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}
@ -202,57 +279,57 @@ const BasicTable = ({
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 */}
{/* left box */}
{activeTab == 0 ? (
<div
className="flex flex-row items-center p-1 rounded"
style={{ backgroundColor: "#F9FBFF" }}
className="flex flex-row items-center p-2 rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }}
>
{/* go to page */}
<GoToPage
pageIndex={pageIndex}
gotoPage={gotoPage}
pageOptions={pageOptions}
/>
{/* vertical line */}
{/* search box */}
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
{/* pagination */}
<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}
/>
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>
{/* settings icon */}
{settingsIcon && (
<Settings
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
)}
</div>
) : null}
</div>
{activeList === true ? <div>listView</div> : <div>gridView</div>}
) : null}
</div>
)}
{/* {activeList === true ? <div>listView</div> : <div>gridView</div>} */}
{/* table LIST */}
{activeTab == 0 ? (
<>
{activeList === false && (
{activeList === true && (
// table
<table
{...getTableProps()}
@ -368,21 +445,32 @@ const BasicTable = ({
</table>
)}
{/* GRID LIST */}
{activeList === true && (
<div className="flex flex-row gap-4">
{data.map((item, index) => (
<div
className="flex flex-col px-4 py-5 rounded-md"
key={index}
style={{ backgroundColor: "#F3F3F3" }}
>
<img src={image1} className="w-52" />
<p className="text-sm my-3">{item.fileName}</p>
<span className="text-xs text-left text-gray-500">
{item.fileSize}
</span>
</div>
))}
{activeList === false && (
<div
{...getTableBodyProps()}
className="flex flex-row flex-wrap gap-4 items-center justify-center"
>
{rows.map((row, index) => {
prepareRow(row);
return (
<div
{...row.getRowProps()}
className="flex flex-col px-4 py-5 rounded-md"
key={index}
style={{ backgroundColor: "#F3F3F3" }}
>
<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>
)}
{/* bottom table */}
@ -418,6 +506,7 @@ BasicTable.defaultProps = {
thead: false,
goToPage: false,
showMore: false,
filterBarDefault: false,
// listView: [
// { icon: grid, click: () => setActiveList(false) },

@ -1,20 +1,17 @@
import { format } from "date-fns";
import BasicTable, { CheckBox } from "../ReactTable5/BasicTable";
import BasicTable, {
CheckBox,
SelectColumnFilter,
} from "../ReactTable5/BasicTable";
import { OrderStatus } from "./OrderStatus";
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";
import { FileType } from "./FileType";
export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
Header: "چک باکس",
accessor: CheckBox,
className: "bg-red-100 w-7",
className: "w-7",
},
{
Header: "ایکن فایل",
@ -30,6 +27,8 @@ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{
Header: "نوع فایل",
accessor: "fileType",
Cell: FileType,
Filter: SelectColumnFilter, // new
// 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);
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 && (
<img
src={cancleIcon}
@ -34,7 +34,7 @@ export const GlobalFilter = ({ filter, setFilter }) => {
onFocus={() => setActiveSearchBox(true)}
// onBlur={() => setActiveSearchBox(false)}
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" }}
/>
</div>

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