Merge branch 'master' of https://git.sitenevis.com/mahdi/danovinTasks
commit
df3e6a47ad
11 changed files with 926 additions and 689 deletions
@ -1,36 +1,16 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import search from "./search-normal.svg"; |
||||
import cancleIcon from "./zarbedar-icon.svg"; |
||||
|
||||
export const ColumnSearch = ({ column }) => { |
||||
const { filterValue, setFilter } = column; |
||||
const [activeSearchBox, setActiveSearchBox] = useState(false); |
||||
|
||||
return ( |
||||
<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 |
||||
value={filterValue || ""} |
||||
onChange={(e) => setFilter(e.target.value)} |
||||
onFocus={() => setActiveSearchBox(true)} |
||||
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`} |
||||
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`} |
||||
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
@ -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> */ |
||||
} |
||||
@ -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; |
||||
Loading…
Reference in new issue