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

update 8 files

Browse Source
master
amir hosein gorji 3 years ago
parent 59c14e1604
commit 02a9502f64
8 changed files with 638 additions and 265 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. 667
      src/components/ReactTable4/BasicTable.js
  2. 13
      src/components/ReactTable4/Buttons.js
  3. 17
      src/components/ReactTable4/EditButtons.js
  4. 5
      src/components/ReactTable4/MOCK_DATA.json
  5. 107
      src/components/ReactTable4/OrderStatus.js
  6. 18
      src/components/ReactTable4/ToggleColumns.js
  7. 6
      src/components/ReactTable4/columns.js
  8. 66
      src/components/ReactTable4/index.js

667
src/components/ReactTable4/BasicTable.js
Unescape View File

@ -26,9 +26,20 @@ import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox"; import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json"; import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = ({ settingsIcon }) => { const BasicTable = ({
const columns = React.useMemo(() => COLUMNS, []); settingsIcon,
addTab,
tabs,
delTab,
setActivateTab,
activeTab,
}) => {
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
const [filtering, setFiltering] = useState(false);
const columns = React.useMemo(
() => COLUMNS({ filtering, setFiltering, addTab }),
[]
);
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return { return {
@ -104,141 +115,212 @@ const BasicTable = ({ settingsIcon }) => {
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
{/* right box */} {/* right box */}
<div className="" style={{ width: "70%" }}> <div className="" style={{ width: "70%" }}>
<Tabbar /> <Tabbar
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div> </div>
{/* left box */} {/* left box */}
<div {activeTab == 0 ? (
className="rounded-md p-2 flex flex-row items-center justify-end" <div
style={{ backgroundColor: "#F1F6FF" }} className="rounded-md p-2 flex flex-row items-center justify-end"
> style={{ backgroundColor: "#F1F6FF" }}
{/* search box */} >
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> {/* search box */}
{/* pagination */} <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
<div {/* pagination */}
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 <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 />}
</div> </div>
{/* settings icon */} ) : null}
{settingsIcon && <Settings />}
</div>
</div> </div>
<table {activeTab == 0 ? (
{...getTableProps()} <>
className="min-w-full divide-y divide-gray-200" <table
> {...getTableProps()}
<thead className="" style={{ backgroundColor: "#F3F8FF" }}> className="min-w-full divide-y divide-gray-200"
{headerGroups.map((headerGroup) => ( >
<tr {...headerGroup.getHeaderGroupProps()}> <thead className="" style={{ backgroundColor: "#F3F8FF" }}>
{headerGroup.headers.map((column) => ( {headerGroups.map((headerGroup, index) => (
<th <tr key={index} {...headerGroup.getHeaderGroupProps()}>
{...column.getHeaderProps(column.getSortByToggleProps())} {headerGroup.headers.map((column) => (
scope="col" <th
className="cursor-pointer p-4 text-right text-sm font-medium" {...column.getHeaderProps(column.getSortByToggleProps())}
style={{ color: "#3287B9" }} scope="col"
> className="cursor-pointer p-4 text-right text-sm font-medium"
{column.render("Header")} style={{ color: "#3287B9" }}
<span> >
{column.isSorted {column.render("Header")}
? column.isSortedDesc <span>
? " 🔽" {column.isSorted
: " 🔼" ? column.isSortedDesc
: ""} ? " 🔽"
</span> : " 🔼"
</th> : ""}
))} </span>
</tr> </th>
))} ))}
</thead>
{/* filter row */}
{/* {selectedFilterRow === !null && ( )} */}
<thead style={{ backgroundColor: "#FAFBFF" }}>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm">
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr>
))}
</thead>
<tbody
{...getTableBodyProps()}
className="divide-y divide-gray-200 bg-white"
>
{page.map((row, idx) => {
prepareRow(row);
return (
<React.Fragment>
<tr
{...row.getRowProps()}
// className={isEven(idx) ? "bg-gray-600" : "bg-white"}
>
{row.cells.map((cell) => {
return (
<td
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr> </tr>
{row.isExpanded ? ( ))}
<tr> </thead>
<td colSpan={headerGroups[0].headers.length}> {/* filter row */}
{renderRowSubComponent({ row: row.original })} {filtering && (
{/* {renderRowSubComponent({ row: row.values })} */} <thead style={{ backgroundColor: "#FAFBFF" }}>
</td> {headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm">
{column.canFilter ? column.render("Filter") : null}
</th>
))}
</tr> </tr>
) : null} ))}
</React.Fragment> </thead>
); )}
})} <tbody
</tbody> {...getTableBodyProps()}
<tfoot className="divide-y divide-gray-200 bg-white"
className={`bg-blue-900 ${rows.length > 10 ? "w-full" : "hidden"}`} >
> {page.map((row, idx) => {
{footerGroups.map((footerGroup) => ( prepareRow(row);
<tr {...footerGroup.getFooterGroupProps()}> return (
{footerGroup.headers.map((column) => ( <React.Fragment key={idx}>
<td <tr
{...column.getFooterProps} {...row.getRowProps()}
className="px-4 py-2 text-right text-xs" // className={isEven(idx) ? "bg-gray-600" : "bg-white"}
style={{ color: "#fff" }} >
{row.cells.map((cell, index) => {
return (
<td
key={index}
{...cell.getCellProps()}
className="p-4 whitespace-nowrap text-xs"
role="cell"
style={{ color: "#00253A" }}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
{row.isExpanded ? (
<tr>
<td colSpan={headerGroups[0].headers.length}>
{RenderRowSubComponent({
row: row.original,
columns,
})}
{/* {RenderRowSubComponent({ row: row.values })} */}
</td>
</tr>
) : null}
</React.Fragment>
);
})}
</tbody>
<tfoot
className={`bg-blue-900 ${
rows.length > 10 ? "w-full" : "hidden"
}`}
>
{footerGroups.map((footerGroup, index) => (
<tr key={index} {...footerGroup.getFooterGroupProps()}>
{footerGroup.headers.map((column, index) => (
<td
key={index}
{...column.getFooterProps}
className="px-4 py-2 text-right text-xs"
style={{ color: "#fff" }}
>
{column.render("Footer")}
</td>
))}
</tr>
))}
</tfoot>
</table>
<div className="mt-3 ">
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>{" "}
از {pageOptions.length}
</strong>
{""}
</span>
<select
className="text-white text-sm rounded cursor-pointer"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option
key={pageSize}
value={pageSize}
className=" text-sm"
style={{
direction: "ltr",
textAlign: "right",
}}
> >
{column.render("Footer")} نمایش {pageSize}
</td> </option>
))} ))}
</tr> </select>
))} </div>
</tfoot> </>
</table> ) : (
<pre> <EditRow
row={
rows.find((e) => e.original && +e.original.id === activeTab)
?.original || {}
}
columns={columns}
/>
)}
{/* <pre>
<code> <code>
{JSON.stringify( {JSON.stringify(
{ {
@ -248,56 +330,283 @@ const BasicTable = ({ settingsIcon }) => {
2 2
)} )}
</code> </code>
</pre> </pre> */}
<div className="mt-3 ">
<span className="text-sm ml-4">
صفحه{" "}
<strong className="text-indigo-500">
<input
className="ml-1 text-xs p-1 rounded border-blue-400"
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const pageNumber = e.target.value
? Number(e.target.value) - 1
: 0;
gotoPage(pageNumber);
}}
style={{ width: "50px" }}
/>{" "}
از {pageOptions.length}
</strong>
{""}
</span>
<select
className="text-white text-sm rounded cursor-pointer"
style={{
backgroundColor: "#65A9FF",
borderColor: "#65A9FF",
}}
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[7, 10, 25, 50].map((pageSize) => (
<option
key={pageSize}
value={pageSize}
className=" text-sm"
style={{
direction: "ltr",
textAlign: "right",
}}
>
نمایش {pageSize}
</option>
))}
</select>
</div>
</> </>
); );
}; };
function EditRow({ row, columns }) {
function renderRowSubComponent({ row }) { console.log(row);
const persian = {
weight: "وزن",
pageNumber: "تعداد صفحات",
pageType: "نوع کاغذ",
bookNumber: "شماره شابک",
publisher: "انتشارات",
author: "نویسنده",
bookType: "قطع",
publishedYear: "سال انتشار",
};
return (
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2"
style={{ backgroundColor: "#FAFBFF" }}
>
{/* right */}
<div
className="flex flex-row flex-wrap items-center"
style={{ width: "90%" }}
>
{/* 1 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی:
<input type="text" className="mr-1 text-black" value={row.name} />
</p>
</div>
{/* 2 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
<span className="mr-1 text-black">{row.order_date}</span>
</p>
</div>
{/* 3 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
<span className="mr-1 text-black">{row.order_price}</span>
</p>
</div>
{/* 4 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
<span className="mr-1 text-black">{row.order_number}</span>
</p>
</div>
{/* 5 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
<span className="mr-1 text-black">{row.user_job}</span>
</p>
</div>
{/* 6 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
<span className="mr-1 text-black">
{columns[5].Cell({ value: row.order_status })}
</span>
</p>
</div>
{/* 7 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
سطح اهمیت:
<span className="mr-1 text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</p>
</div>
{/* 8 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
محل تولد:
<span className="mr-1 text-black">{row.birth_place}</span>
</p>
</div>
{/* 9 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تلفن محل کار:
<span className="mr-1 text-black">{row.office_phone}</span>
</p>
</div>
{/* 10 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تحصیلات:
<span className="mr-1 text-black">{row.education}</span>
</p>
</div>
{/* 11 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ تولد:
<span className="mr-1 text-black">{row.birth_day}</span>
</p>
</div>
{/* 12 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل:
<span className="mr-1 text-black">{row.job}</span>
</p>
</div>
{/* 13 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
دانشگاه:
<span className="mr-1 text-black">{row.uni}</span>
</p>
</div>
{/* 14 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
رشته تحصیلی:
<span className="mr-1 text-black">{row.field_study}</span>
</p>
</div>
{/* 15 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
اخلاق:
<span className="mr-1 text-black">{row.behaviour}</span>
</p>
</div>
{/* 16 */}
<div className="flex flex-row items-center mr-2 my-2">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#EDF2FB" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نشانی:
<span className="mr-1 text-black">{row.address}</span>
</p>
</div>
</div>
{/* left */}
<div
className="flex flex-col items-end justify-end"
style={{ width: "10%" }}
>
<button
className="border rounded w-8/12 text-xs py-2 mb-2 bg-white"
style={{ borderColor: "#D53921", color: "#D53921" }}
>
حذف
</button>
<button
className="border rounded w-8/12 text-xs py-2 bg-white"
style={{ borderColor: "#65A9FF", color: "#65A9FF" }}
>
جزیات بیشتر
</button>
</div>
</div>
);
}
function RenderRowSubComponent({ row, columns }) {
console.log(row); console.log(row);
const persian = { const persian = {
weight: "وزن", weight: "وزن",
@ -400,7 +709,9 @@ function renderRowSubComponent({ row }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
وضعیت سفارش: وضعیت سفارش:
<span className="mr-1 text-black">{row.order_status}</span> <span className="mr-1 text-black">
{columns[5].Cell({ value: row.order_status })}
</span>
</p> </p>
</div> </div>
{/* 7 */} {/* 7 */}
@ -414,7 +725,9 @@ function renderRowSubComponent({ row }) {
style={{ borderColor: "#65A9FF" }} style={{ borderColor: "#65A9FF" }}
> >
سطح اهمیت: سطح اهمیت:
<span className="mr-1 text-black">{row.order_level}</span> <span className="mr-1 text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</p> </p>
</div> </div>
{/* 8 */} {/* 8 */}

13
src/components/ReactTable4/Buttons.js
Unescape View File

@ -4,7 +4,7 @@ import edit from "./edit.svg";
import { useState } from "react"; import { useState } from "react";
export function Buttons({ row }) { export const Buttons = ({ row, addTab }) => {
const [activeDetails, setActiveDetails] = useState(null); const [activeDetails, setActiveDetails] = useState(null);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
@ -13,7 +13,7 @@ export function Buttons({ row }) {
onClick={() => setActiveDetails(!activeDetails)} onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()} {...row.getToggleRowExpandedProps()}
> >
جزیات جزپیات
<img <img
src={arrowIcon} src={arrowIcon}
alt="" alt=""
@ -22,10 +22,15 @@ export function Buttons({ row }) {
}`} }`}
/> />
</button> </button>
<div className="mx-1 p-2 rounded border border-gray-300 cursor-pointer "> <div
className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
onClick={() => {
addTab({ name: row.original.name, id: row.original.id });
}}
>
<img src={edit} alt="" className="w-4" /> <img src={edit} alt="" className="w-4" />
</div> </div>
<img src={more} alt="" className="w-5 cursor-pointer " /> <img src={more} alt="" className="w-5 cursor-pointer " />
</div> </div>
); );
} };

17
src/components/ReactTable4/EditButtons.js
Unescape View File

@ -6,9 +6,9 @@ import DropDown from "./DropDown";
import filter from "./filter.svg"; import filter from "./filter.svg";
import plus from "./plus.svg"; import plus from "./plus.svg";
export function EditButtons({}) { export function EditButtons({ setFiltering, filtering, addTab }) {
const [activeFilter, setActiveFilter] = useState(null); const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
// const [selectedFilterRow, setSelectedFilterRow] = useState(null); // setFiltering(selectedFilterRow);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
@ -16,6 +16,10 @@ export function EditButtons({}) {
<button <button
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600" className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
style={{ backgroundColor: "#65A9FF" }} style={{ backgroundColor: "#65A9FF" }}
onClick={() => {
console.log("new!!!");
addTab({ id: "new", name: "ردیف جدید" });
}}
> >
ثبت جدید ثبت جدید
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} /> <img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} />
@ -26,8 +30,11 @@ export function EditButtons({}) {
// onClick={() => setSelectedFilterRow(!selectedFilterRow)} // onClick={() => setSelectedFilterRow(!selectedFilterRow)}
alt="" alt=""
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8 className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
${activeFilter ? "border" : "border-0"}`} ${selectedFilterRow ? "border" : "border-0"}`}
onClick={() => setActiveFilter(!activeFilter)} onClick={() => {
setFiltering(!selectedFilterRow);
setSelectedFilterRow(!selectedFilterRow);
}}
/> />
{/* dropDown */} {/* dropDown */}
<DropDown /> <DropDown />

5
src/components/ReactTable4/MOCK_DATA.json
Unescape View File

@ -1,5 +1,6 @@
[ [
{ {
"id": 1,
"name": "خسرو سهرابی", "name": "خسرو سهرابی",
"order_date": "1400/11/09", "order_date": "1400/11/09",
"order_price": 1, "order_price": 1,
@ -18,6 +19,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}, },
{ {
"id": 2,
"name": "خسرو شکیبایی", "name": "خسرو شکیبایی",
"order_date": "1340/04/13", "order_date": "1340/04/13",
"order_price": 2, "order_price": 2,
@ -36,6 +38,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}, },
{ {
"id": 3,
"name": "علی علوی", "name": "علی علوی",
"order_date": "1330/12/05", "order_date": "1330/12/05",
"order_price": 3, "order_price": 3,
@ -54,6 +57,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}, },
{ {
"id": 4,
"name": "پارسا ایرانی", "name": "پارسا ایرانی",
"order_date": "1372/01/08", "order_date": "1372/01/08",
"order_price": 4, "order_price": 4,
@ -72,6 +76,7 @@
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
}, },
{ {
"id": 5,
"name": "محمد محمدی", "name": "محمد محمدی",
"order_date": "1389/01/26", "order_date": "1389/01/26",
"order_price": 5, "order_price": 5,

107
src/components/ReactTable4/OrderStatus.js
Unescape View File

@ -1,55 +1,56 @@
export function OrderStatus({ value }) { export function OrderStatus({ value }) {
return ( value = +value;
<div className="">
{(() => {
if (value === 1) {
return (
<span
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
ارسال شده
</span>
);
} else if (value === 2) {
return (
<span
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
رسیدگی
</span>
);
} else if (value === 3) {
return (
<span
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
لغو شده
</span>
);
} else if (value === 4) {
return (
<span
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
پیگیری
</span>
);
} else {
return (
<span
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
خطری
</span>
);
}
})()}{" "}
</div>
);
}
return (
<div className="">
{(() => {
if (value === 1) {
return (
<span
style={{ backgroundColor: "#E2FFE377", color: "#00613D" }}
className="p-2 rounded"
>
ارسال شده
</span>
);
} else if (value === 2) {
return (
<span
style={{ backgroundColor: "#FFF78733", color: "#ECF150" }}
className="p-2 rounded"
>
رسیدگی
</span>
);
} else if (value === 3) {
return (
<span
style={{ backgroundColor: "#FFD8CC33", color: "#611100" }}
className="p-2 rounded"
>
لغو شده
</span>
);
} else if (value === 4) {
return (
<span
style={{ backgroundColor: "#E2FFFD33", color: "#00614A" }}
className="p-2 rounded"
>
پیگیری
</span>
);
} else {
return (
<span
style={{ backgroundColor: "#DBCCFF33", color: "#440061" }}
className="p-2 rounded"
>
خطری
</span>
);
}
})()}{" "}
</div>
);
}

18
src/components/ReactTable4/ToggleColumns.js
Unescape View File

@ -6,14 +6,16 @@ export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => {
<div> <div>
<input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All <input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All
</div> </div>
{allColumns.map((column) => ( {allColumns
<div key={column.id}> .filter((column) => column.Header === "string")
<label> .map((column, index) => (
<input type="checkbox" {...column.getToggleHiddenProps()} /> <div key={index}>
{column.Header} <label>
</label> <input type="checkbox" {...column.getToggleHiddenProps()} />
</div> {column.Header}
))} </label>
</div>
))}
</div> </div>
); );
}; };

6
src/components/ReactTable4/columns.js
Unescape View File

@ -10,7 +10,7 @@ import { SelectColumnFilter } from "./SelectColumnFilter.js";
import { SelectColumnFilter2 } from "./SelectColumnFilter2.js"; import { SelectColumnFilter2 } from "./SelectColumnFilter2.js";
import { SliderColumnFilter } from "./SliderColumnFilter.js"; import { SliderColumnFilter } from "./SliderColumnFilter.js";
export const COLUMNS = [ export const COLUMNS = ({ setFiltering, filtering, addTab }) => [
{ {
Header: "نام و نام خانوادگی", Header: "نام و نام خانوادگی",
Footer: "نام و نام خانوادگی", Footer: "نام و نام خانوادگی",
@ -57,10 +57,10 @@ export const COLUMNS = [
Filter: SelectColumnFilter, Filter: SelectColumnFilter,
}, },
{ {
Header: EditButtons, Header: () => EditButtons({ setFiltering, filtering, addTab }),
Footer: "ویرایش", Footer: "ویرایش",
accessor: "edit", accessor: "edit",
Cell: Buttons, Cell: ({ row }) => Buttons({ row, addTab }),
disableSortBy: true, disableSortBy: true,
disableFilters: true, disableFilters: true,
}, },

66
src/components/ReactTable4/index.js
Unescape View File

@ -1,16 +1,35 @@
import React, { useRef } from "react"; import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable"; import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll"; // import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg"; import cancleIcon from "./zarbedar-icon.svg";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]);
let [activeTab, setActivateTab] = useState(0);
const stateRef = useRef();
const stateActiveRef = useRef();
stateRef.current = tabs;
stateActiveRef.current = activeTab;
const addTab = (newTab) => {
setActivateTab(newTab.id);
if (stateRef.current.find((e) => e.id === newTab.id)) return;
setTabs([...stateRef.current, newTab]);
};
const delTab = (id) => {
setTabs(stateRef.current.filter((e) => e.id != id));
if (stateActiveRef.current == id) setActivateTab(0);
};
return ( return (
<div className="my-10 w-11/12 mx-auto"> <div className="my-10 w-11/12 mx-auto">
{/* breadCrumb */} {/* breadCrumb */}
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{breadCrumbs.map((breadCrumb, index) => ( {breadCrumbs.map((breadCrumb, index) => (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center" key={index}>
<span <span
className={`cursor-pointer text-xs hover:text-blue-900 ${ className={`cursor-pointer text-xs hover:text-blue-900 ${
breadCrumb.active ? "text-blue-900" : "text-blue-400" breadCrumb.active ? "text-blue-900" : "text-blue-400"
@ -42,19 +61,23 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
<h2 className="text-xs">{subTitle}</h2> <h2 className="text-xs">{subTitle}</h2>
</div> </div>
</div> </div>
<Tabbar /> {/* <Tabbar tabs={tabs} /> */}
<BasicTable /> <BasicTable
addTab={addTab}
tabs={tabs}
delTab={delTab}
setActivateTab={setActivateTab}
activeTab={activeTab}
/>
</div> </div>
); );
}; };
window.isDown = false; window.isDown = false;
export default ReactTable4; export default ReactTable4;
export function Tabbar({}) { export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
const ref = useRef(null);
// const { onMouseDown } = useDraggableScroll(ref); // const { onMouseDown } = useDraggableScroll(ref);
const tabs = ["فروشگاه دانوین", "مهدی عندلیب"];
return ( return (
<ul <ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch" className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
@ -79,17 +102,34 @@ export function Tabbar({}) {
slider.scrollLeft = window.scrollLeft - walk; slider.scrollLeft = window.scrollLeft - walk;
}} }}
> >
{tabs.map((el) => ( {tabs.map((el, index) => (
<li <li
key={index}
onClick={(e) => { onClick={(e) => {
if (window.isDown) return e.preventDefault(); if (window.isDown) return e.preventDefault();
}} }}
aria-current="page" aria-current="page"
className="flex flex-row items-center text-sm text-center active px-4 py-4 rounded-sm mx-1" className="flex flex-row items-center text-sm text-center active px-4 rounded-sm mx-1"
style={{ backgroundColor: "#F1F6FF" }} style={{
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
color: activeTab === el.id ? "#fff" : "#000",
}}
> >
<span className="">{el}</span> <div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}>
<img src={cancleIcon} className="w-2 h-2 mr-2" /> {el.name}
</div>
{el.id ? (
<img
src={cancleIcon}
className="w-2 h-2 mr-2"
alt=""
onClick={(e) => {
e.preventDefault();
delTab(el.id);
}}
/>
) : null}
</li> </li>
))} ))}
</ul> </ul>

Write Preview
Loading…
Cancel
Save