amir hosein gorji 3 years ago
commit df3e6a47ad
  1. 639
      src/components/ReactTable4/BasicTable.js
  2. 20
      src/components/ReactTable4/Buttons.js
  3. 24
      src/components/ReactTable4/ColumnSearch.js
  4. 2
      src/components/ReactTable4/EditButtons.js
  5. 325
      src/components/ReactTable4/EditRow.js
  6. 95
      src/components/ReactTable4/MOCK_DATA.json
  7. 269
      src/components/ReactTable4/RenderRowSubComponent.js
  8. 66
      src/components/ReactTable4/Tabbar.js
  9. 2
      src/components/ReactTable4/columns.js
  10. 130
      src/components/ReactTable4/index.js
  11. 5
      src/components/ReactTable4/index.scss

@ -1,9 +1,22 @@
import React, { useMemo, useState } from "react"; import React, { useMemo, useState } from "react";
import "./index.scss"; import "./index.scss";
import { ColumnSearch } from "./ColumnSearch.js";
import { ToggleColumns } from "./ToggleColumns.js"; import Tabbar from "./Tabbar";
import { Tabbar } from "./index"; import MOCK_DATA from "./MOCK_DATA.json";
import { ColumnSearch } from "./ColumnSearch";
import { GlobalFilter } from "./GlobalFilter";
import { ToggleColumns } from "./ToggleColumns";
import { COLUMNS } from "./COLUMNS";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import RenderRowSubComponent from "./RenderRowSubComponent";
import EditRow from "./EditRow";
import { import {
useTable, useTable,
@ -16,16 +29,6 @@ import {
useExpanded, useExpanded,
} from "react-table"; } from "react-table";
import { COLUMNS } from "./columns";
import { GlobalFilter } from "./GlobalFilter";
import { Pagination } from "./Pagination";
import { GoToPage } from "./GoToPage";
import { Settings } from "./Settings";
import { Checkbox } from "./Checkbox";
import MOCK_DATA from "./MOCK_DATA.json";
const BasicTable = ({ const BasicTable = ({
settingsIcon, settingsIcon,
addTab, addTab,
@ -35,12 +38,42 @@ const BasicTable = ({
activeTab, activeTab,
}) => { }) => {
const data = useMemo(() => MOCK_DATA, []); const data = useMemo(() => MOCK_DATA, []);
// console.log(data);
const [filtering, setFiltering] = useState(false); const [filtering, setFiltering] = useState(false);
const columns = React.useMemo( const columns = React.useMemo(
() => COLUMNS({ filtering, setFiltering, addTab }), () => COLUMNS({ filtering, setFiltering, addTab }),
[] []
); );
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
// We need to keep and update the state of the cell normally
const [value, setValue] = React.useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateMyData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return <input value={value} onChange={onChange} onBlur={onBlur} />;
};
// یعنی فیلتر دیفالت هدر های ما سرچ خواهد بود مگه اینکه خودمون تغییرش بدیم
const defaultColumn = useMemo(() => { const defaultColumn = useMemo(() => {
return { return {
Filter: ColumnSearch, Filter: ColumnSearch,
@ -105,16 +138,17 @@ const BasicTable = ({
); );
const { globalFilter, pageIndex, pageSize } = state; const { globalFilter, pageIndex, pageSize } = state;
return ( return (
<> <>
{/* toggle columns */} {/* toggle columns */}
<ToggleColumns {/* <ToggleColumns
allColumns={allColumns} allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps} getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/> /> */}
<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="flex-1">
<Tabbar <Tabbar
tabs={tabs} tabs={tabs}
delTab={delTab} delTab={delTab}
@ -125,7 +159,7 @@ const BasicTable = ({
{/* left box */} {/* left box */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<div <div
className="rounded-md p-2 flex flex-row items-center justify-end" className="flex flex-row items-center p-2 rounded-tl rounded-tr"
style={{ backgroundColor: "#F1F6FF" }} style={{ backgroundColor: "#F1F6FF" }}
> >
{/* search box */} {/* search box */}
@ -161,6 +195,7 @@ const BasicTable = ({
</div> </div>
) : null} ) : null}
</div> </div>
{/* table */}
{activeTab == 0 ? ( {activeTab == 0 ? (
<> <>
<table <table
@ -174,7 +209,7 @@ const BasicTable = ({
<th <th
{...column.getHeaderProps(column.getSortByToggleProps())} {...column.getHeaderProps(column.getSortByToggleProps())}
scope="col" scope="col"
className="cursor-pointer p-4 text-right text-sm font-medium" className="cursor-pointer py-2 px-4 text-right text-xs font-medium"
style={{ color: "#3287B9" }} style={{ color: "#3287B9" }}
> >
{column.render("Header")} {column.render("Header")}
@ -192,11 +227,14 @@ const BasicTable = ({
</thead> </thead>
{/* filter row */} {/* filter row */}
{filtering && ( {filtering && (
<thead style={{ backgroundColor: "#FAFBFF" }}> <thead style={{ backgroundColor: "#F1F5FE" }}>
{headerGroups.map((headerGroup, index) => ( {headerGroups.map((headerGroup, index) => (
<tr key={index} {...headerGroup.getHeaderGroupProps()}> <tr key={index} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => ( {headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()} className="py-2 text-sm"> <th
{...column.getHeaderProps()}
className="py-2 px-4 text-sm"
>
{column.canFilter ? column.render("Filter") : null} {column.canFilter ? column.render("Filter") : null}
</th> </th>
))} ))}
@ -233,11 +271,18 @@ const BasicTable = ({
{row.isExpanded ? ( {row.isExpanded ? (
<tr> <tr>
<td colSpan={headerGroups[0].headers.length}> <td colSpan={headerGroups[0].headers.length}>
{RenderRowSubComponent({ {/* {RenderRowSubComponent({
row: row.original, row: row.original,
columns, columns,
})} addTab,
})} */}
{/* {RenderRowSubComponent({ row: row.values })} */} {/* {RenderRowSubComponent({ row: row.values })} */}
<RenderRowSubComponent
columns={columns}
addTab={addTab}
row={row.original}
/>
{console.log(row.original)}
</td> </td>
</tr> </tr>
) : null} ) : null}
@ -246,9 +291,7 @@ const BasicTable = ({
})} })}
</tbody> </tbody>
<tfoot <tfoot
className={`bg-blue-900 ${ className={`bg-blue-900 ${rows.length > 5 ? "w-full" : "hidden"}`}
rows.length > 10 ? "w-full" : "hidden"
}`}
> >
{footerGroups.map((footerGroup, index) => ( {footerGroups.map((footerGroup, index) => (
<tr key={index} {...footerGroup.getFooterGroupProps()}> <tr key={index} {...footerGroup.getFooterGroupProps()}>
@ -256,7 +299,7 @@ const BasicTable = ({
<td <td
key={index} key={index}
{...column.getFooterProps} {...column.getFooterProps}
className="px-4 py-2 text-right text-xs" className="p-2 text-right text-xs"
style={{ color: "#fff" }} style={{ color: "#fff" }}
> >
{column.render("Footer")} {column.render("Footer")}
@ -334,550 +377,6 @@ const BasicTable = ({
</> </>
); );
}; };
function EditRow({ row, columns }) {
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);
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" }}
>
نام و نام خانوادگی:
<span className="mr-1 text-black">{row.name}</span>
</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>
);
}
export default BasicTable; export default BasicTable;

@ -1,27 +1,33 @@
import { useState } from "react";
import arrowIcon from "./arrow-icon.svg"; import arrowIcon from "./arrow-icon.svg";
import more from "./more2.svg"; import more from "./more2.svg";
import edit from "./edit.svg"; import edit from "./edit.svg";
import { useState } from "react";
export const Buttons = ({ row, addTab }) => { 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 ">
<div
className=""
onClick={() => {
setActiveDetails(!activeDetails);
}}
>
<button <button
className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300" className="mx-1 flex flex-row items-center justify-around p-2 rounded border border-gray-300"
onClick={() => setActiveDetails(!activeDetails)}
{...row.getToggleRowExpandedProps()} {...row.getToggleRowExpandedProps()}
> >
جزپیات جزئیات
<img <img
src={arrowIcon} src={arrowIcon}
alt="" alt=""
className={`mx-1 w-3 cursor-pointer mr-2 ${ className={`mx-1 w-3 cursor-pointer mr-2 transition-all duration-500 ${
activeDetails ? "rotate-60" : "rotate-90" activeDetails ? "rotate-60" : "rotate-90"
}`} }`}
/> />
</button> </button>
</div>
<div <div
className="mx-1 p-2 rounded border border-gray-300 cursor-pointer" className="mx-1 p-2 rounded border border-gray-300 cursor-pointer"
onClick={() => { onClick={() => {
@ -30,7 +36,7 @@ export const Buttons = ({ row, addTab }) => {
> >
<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>
); );
}; };

@ -1,36 +1,16 @@
import React, { useState } from "react"; import React, { useState } from "react";
import search from "./search-normal.svg";
import cancleIcon from "./zarbedar-icon.svg";
export const ColumnSearch = ({ column }) => { export const ColumnSearch = ({ column }) => {
const { filterValue, setFilter } = column; const { filterValue, setFilter } = column;
const [activeSearchBox, setActiveSearchBox] = useState(false);
return ( return (
<div className="flex flex-row items-center"> <div className="flex flex-row items-center ">
<div className="flex flex-row items-center relative">
{activeSearchBox && (
<img
src={cancleIcon}
alt=""
className="w-2 h-2 absolute left-16 cursor-pointer"
onClick={() => setActiveSearchBox(false)}
/>
)}
<img
src={search}
alt=""
className="w-4 h-4 absolute left-11 cursor-pointer"
/>
<input <input
value={filterValue || ""} value={filterValue || ""}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
onFocus={() => setActiveSearchBox(true)} className={`w-8/12 text-xs text-blue-400 rounded focus:outline-none border p-1 focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
className={`w-9/12 text-xs text-blue-400 rounded focus:outline-none border p-1 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>
</div>
); );
}; };

@ -8,7 +8,6 @@ import plus from "./plus.svg";
export function EditButtons({ setFiltering, filtering, addTab }) { export function EditButtons({ setFiltering, filtering, addTab }) {
const [selectedFilterRow, setSelectedFilterRow] = useState(filtering); const [selectedFilterRow, setSelectedFilterRow] = useState(filtering);
// setFiltering(selectedFilterRow);
return ( return (
<div className="flex flex-row items-center justify-end"> <div className="flex flex-row items-center justify-end">
@ -27,7 +26,6 @@ export function EditButtons({ setFiltering, filtering, addTab }) {
{/* filter */} {/* filter */}
<img <img
src={filter} src={filter}
// 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
${selectedFilterRow ? "border" : "border-0"}`} ${selectedFilterRow ? "border" : "border-0"}`}

@ -0,0 +1,325 @@
import React from "react";
const EditRow = ({ row, columns }) => {
// console.log(columns);
return (
<div
className="flex flex-col border-r-4 border-blue-600 p-2 rounded-sm"
style={{ backgroundColor: "#F1F5FE" }}
>
{/* 1 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
نام و نام خانوادگی:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.name}
// style={{ width: "100%" }}
/>
</div>
{/* 2 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
تاریخ سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_date}
/>
</div>
{/* 3 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
مبلغ سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_price}
/>
</div>
{/* 4 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شماره سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_number}
/>
</div>
{/* 5 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
شغل کاربر:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.user_job}
/>
</div>
{/* 6 */}
<div className="flex flex-col mr-2 my-2">
<div className="flex flex-row">
<div
className="w-1 h-4 ml-1 rounded"
style={{ backgroundColor: "#65A9FF" }}
></div>
<p
className="text-xs text-blue-400"
style={{ borderColor: "#65A9FF" }}
>
وضعیت سفارش:
</p>
</div>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-12/12 mx-4 text-black text-xs rounded-sm mt-4 border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.order_status}
/>
</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" }}>
سطح اهمیت:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
// {columns[6].Cell({ value: row.order_level })}
value={row.order_level}
/>
</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" }}>
محل تولد:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_place}
/>
</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" }}>
تلفن محل کار:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.office_phone}
/>
</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" }}>
تحصیلات:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.education}
/>
</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" }}>
تاریخ تولد:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.birth_day}
/>
</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" }}>
شغل:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.job}
/>
</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" }}>
دانشگاه:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.uni}
/>
</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" }}>
رشته تحصیلی:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-fit mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.field_study}
/>
</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" }}>
اخلاق:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-full mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.behaviour}
/>
</div>
{/* 16 */}
<div className=" 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" }}>
نشانی:
</p>
<input
type="text"
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }}
className="w-full mr-1 text-black text-xs rounded-sm border p-1 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
value={row.address}
/>
</div>{" "}
</div>
);
};
// {features.map((feature, index) => (
export default EditRow;
{
/* <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> */
}

@ -93,5 +93,100 @@
"uni": "تهران", "uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", "address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" "behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 6,
"name": "خسرو سهرابی",
"order_date": "1400/11/09",
"order_price": 1,
"order_number": "09120023100",
"user_job": "مهندس ساختمان",
"order_status": 1,
"order_level": 1,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 7,
"name": "خسرو شکیبایی",
"order_date": "1340/04/13",
"order_price": 2,
"order_number": "09390646589",
"user_job": "بازیگر",
"order_status": 2,
"order_level": 2,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 8,
"name": "علی علوی",
"order_date": "1330/12/05",
"order_price": 3,
"order_number": "09120403285",
"user_job": "تاجر",
"order_status": 3,
"order_level": 3,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 9,
"name": "پارسا ایرانی",
"order_date": "1372/01/08",
"order_price": 4,
"order_number": "09120336508",
"user_job": "حسابدار",
"order_status": 4,
"order_level": 4,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
},
{
"id": 10,
"name": "محمد محمدی",
"order_date": "1389/01/26",
"order_price": 5,
"order_number": "0913698574",
"user_job": "دکتر",
"order_status": 5,
"order_level": 5,
"birth_place": "استان تهران شهر تهران",
"office_phone": "02144407010",
"education": "کارشناسی",
"job": "فروشنده لوازم خانگی",
"field_study": "مدیریت صنعتی",
"birth_day": "1368/09/02",
"uni": "تهران",
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3",
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق"
} }
] ]

@ -0,0 +1,269 @@
import React from "react";
const RenderRowSubComponent = ({ columns, addTab, row }) => {
return (
<div
className="w-full flex flex-row items-center border-r-4 border-blue-600 p-2 "
style={{ backgroundColor: "#FBFCFE" }}
>
{/* 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" }}
>
نام و نام خانوادگی:
<span className="mr-1 text-black">{row.name}</span>
</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" }}
>
وضعیت سفارش:
</p>
<span className="mr-1 text-black text-xs">
{columns[5].Cell({ value: row.order_status })}
</span>
</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" }}
>
سطح اهمیت:
</p>
<span className="mr-1 text-xs text-black">
{columns[6].Cell({ value: row.order_level })}
</span>
</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" }}
onClick={() => {
console.log(row.name);
addTab({ name: row.name, id: row.id });
}}
>
جزئیات بیشتر
</button>
</div>
</div>
);
};
export default RenderRowSubComponent;

@ -0,0 +1,66 @@
import React from "react";
import "./index.scss";
import cancleIcon from "./zarbedar-icon.svg";
const Tabbar = ({ tabs, delTab, setActivateTab, activeTab }) => {
return (
<ul
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el, index) => (
<li
key={index}
onClick={(e) => {
if (window.isDown) return e.preventDefault();
}}
aria-current="page"
className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
style={{
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
color: activeTab === el.id ? "#fff" : "#000",
}}
>
<div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
{el.name}
</div>
{el.id ? (
<img
src={cancleIcon}
className="w-2 mr-3"
alt=""
onClick={(e) => {
e.preventDefault();
delTab(el.id);
}}
/>
) : null}
</li>
))}
</ul>
);
};
window.isDown = false;
export default Tabbar;

@ -1,7 +1,5 @@
import { format } from "date-fns"; import { format } from "date-fns";
import Table from "./BasicTable";
import { OrderStatus } from "./OrderStatus"; import { OrderStatus } from "./OrderStatus";
import { OrderLevel } from "./OrderLevel"; import { OrderLevel } from "./OrderLevel";
import { Buttons } from "./Buttons"; import { Buttons } from "./Buttons";

@ -1,16 +1,17 @@
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import BasicTable from "./BasicTable";
// import useDraggableScroll from "use-draggable-scroll";
import cancleIcon from "./zarbedar-icon.svg"; import BasicTable from "./BasicTable";
const ReactTable4 = ({ breadCrumbs, subTitle, title }) => { const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
const [tabs, setTabs] = useState([ const [tabs, setTabs] = useState([
{ name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 }, { name: "جدول " + breadCrumbs[breadCrumbs.length - 1].name, id: 0 },
]); ]);
let [activeTab, setActivateTab] = useState(0); let [activeTab, setActivateTab] = useState(0);
const stateRef = useRef(); const stateRef = useRef();
const stateActiveRef = useRef(); const stateActiveRef = useRef();
stateRef.current = tabs; stateRef.current = tabs;
stateActiveRef.current = activeTab; stateActiveRef.current = activeTab;
@ -19,6 +20,7 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
if (stateRef.current.find((e) => e.id === newTab.id)) return; if (stateRef.current.find((e) => e.id === newTab.id)) return;
setTabs([...stateRef.current, newTab]); setTabs([...stateRef.current, newTab]);
}; };
const delTab = (id) => { const delTab = (id) => {
setTabs(stateRef.current.filter((e) => e.id != id)); setTabs(stateRef.current.filter((e) => e.id != id));
if (stateActiveRef.current == id) setActivateTab(0); if (stateActiveRef.current == id) setActivateTab(0);
@ -55,13 +57,12 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
<div className="w-1 h-5 bg-blue-500 rounded ml-1"></div> <div className="w-1 h-5 bg-blue-500 rounded ml-1"></div>
<h2 className="text-base text-blue-900">{title}</h2> <h2 className="text-base text-blue-900">{title}</h2>
</div> </div>
{/* page Title */} {/* page subTitle */}
<div className="flex flex-row items-center mt-4"> <div className="flex flex-row items-center mt-4">
<div className="w-1 h-5 bg-gray-400 rounded ml-1"></div> <div className="w-1 h-5 bg-gray-400 rounded ml-1"></div>
<h2 className="text-xs">{subTitle}</h2> <h2 className="text-xs">{subTitle}</h2>
</div> </div>
</div> </div>
{/* <Tabbar tabs={tabs} /> */}
<BasicTable <BasicTable
addTab={addTab} addTab={addTab}
tabs={tabs} tabs={tabs}
@ -72,69 +73,68 @@ const ReactTable4 = ({ breadCrumbs, subTitle, title }) => {
</div> </div>
); );
}; };
window.isDown = false;
export default ReactTable4;
export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) { export default ReactTable4;
// const { onMouseDown } = useDraggableScroll(ref);
return ( // export function Tabbar({ tabs, delTab, setActivateTab, activeTab }) {
<ul // // const { onMouseDown } = useDraggableScroll(ref);
className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
onMouseDown={(e) => {
const slider = window.document.querySelector(".tabbar");
window.isDown = true;
window.startX = e.pageX - slider.offsetLeft;
window.scrollLeft = slider.scrollLeft;
}}
onMouseLeave={(e) => {
window.isDown = false;
}}
onMouseUp={(e) => {
window.isDown = false;
}}
onMouseMove={(e) => {
const slider = window.document.querySelector(".tabbar");
if (!window.isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - window.startX) * 1;
slider.scrollLeft = window.scrollLeft - walk;
}}
>
{tabs.map((el, index) => (
<li
key={index}
onClick={(e) => {
if (window.isDown) return e.preventDefault();
}}
aria-current="page"
className="flex flex-row items-center text-sm text-center active px-4 rounded-sm mx-1"
style={{
backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
color: activeTab === el.id ? "#fff" : "#000", // return (
}} // <ul
> // className="tabbar flex no-scrollbar overflow-x-scroll scrolling-touch"
<div className="h-full py-4" onClick={(e) => setActivateTab(el.id)}> // onMouseDown={(e) => {
{el.name} // const slider = window.document.querySelector(".tabbar");
</div> // window.isDown = true;
{el.id ? ( // window.startX = e.pageX - slider.offsetLeft;
<img // window.scrollLeft = slider.scrollLeft;
src={cancleIcon} // }}
className="w-2 h-2 mr-2" // onMouseLeave={(e) => {
alt="" // window.isDown = false;
onClick={(e) => { // }}
e.preventDefault(); // onMouseUp={(e) => {
delTab(el.id); // window.isDown = false;
}} // }}
/> // onMouseMove={(e) => {
) : null} // const slider = window.document.querySelector(".tabbar");
</li> // if (!window.isDown) return;
))} // e.preventDefault();
</ul> // const x = e.pageX - slider.offsetLeft;
); // const walk = (x - window.startX) * 1;
} // slider.scrollLeft = window.scrollLeft - walk;
// }}
// >
// {tabs.map((el, index) => (
// <li
// key={index}
// onClick={(e) => {
// if (window.isDown) return e.preventDefault();
// }}
// aria-current="page"
// className="flex flex-row items-center text-sm text-center active rounded-sm px-4"
// style={{
// backgroundColor: activeTab === el.id ? "#92c1fc" : "#F1F6FF",
// color: activeTab === el.id ? "#fff" : "#000",
// }}
// >
// <div className="h-full py-2" onClick={(e) => setActivateTab(el.id)}>
// {el.name}
// </div>
// {el.id ? (
// <img
// src={cancleIcon}
// className="w-2 mr-3"
// alt=""
// onClick={(e) => {
// e.preventDefault();
// delTab(el.id);
// }}
// />
// ) : null}
// </li>
// ))}
// </ul>
// );
// }
ReactTable4.defaultProps = { ReactTable4.defaultProps = {
breadCrumbs: [ breadCrumbs: [

@ -8,9 +8,10 @@
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.tabbar{ .tabbar {
cursor: pointer; cursor: pointer;
} }
.active2 ,.active2 li a{ .active2,
.active2 li a {
cursor: move !important; cursor: move !important;
} }
Loading…
Cancel
Save