Merge branch 'master' of https: update 13 files, create 49 files and delete 2 files //git.sitenevis.com/mahdi/danovinTasks
commit
59c14e1604
64 changed files with 1453 additions and 688 deletions
@ -0,0 +1,57 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import pic2 from "./pic2.jpg"; |
||||||
|
import danovin from "./danovin.jpg"; |
||||||
|
import greeeeen from "./greeeeen.jpg"; |
||||||
|
|
||||||
|
const Banners = ({ mainBanner, leftBanner, midTopBanner, midBottomBanner }) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="flex justify-between w-10/12 mx-auto my-10" |
||||||
|
style={{ |
||||||
|
height: "400px", |
||||||
|
}} |
||||||
|
> |
||||||
|
<div |
||||||
|
className={`h-full w-1/2 rounded-xl flex items-center`} |
||||||
|
style={{ |
||||||
|
background: mainBanner ? "" : "rgba(134,160,185,0.16)", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={danovin} className="rounded-xl h-full" /> |
||||||
|
</div> |
||||||
|
<div className="flex h-full w-1/2 "> |
||||||
|
<div className="flex flex-col w-1/2 h-full px-6 justify-center items-between"> |
||||||
|
<div |
||||||
|
className={`${midTopBanner ? "" : "h-1/2 "} w-full rounded-xl mb-2`} |
||||||
|
style={{ |
||||||
|
background: midTopBanner ? "" : "rgba(134,160,185,0.16)", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={pic2} className="rounded-xl" /> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={`${ |
||||||
|
midBottomBanner ? "" : "h-1/2 " |
||||||
|
} w-full rounded-xl mt-2`}
|
||||||
|
style={{ |
||||||
|
background: midBottomBanner ? "" : "rgba(134,160,185,0.16)", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={pic2} className="rounded-xl" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className=" h-full w-1/2 rounded-xl" |
||||||
|
style={{ |
||||||
|
background: leftBanner ? "" : "rgba(134,160,185,0.16)", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={greeeeen} className="rounded-xl h-full" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Banners; |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import jet from "./jet.png"; |
||||||
|
import style from "./style.png"; |
||||||
|
import pay from "./pay.png"; |
||||||
|
import pindo from "./pindo.png"; |
||||||
|
import mamoriat from "./mamoriat.png"; |
||||||
|
import plus from "./plus.png"; |
||||||
|
import club from "./club.png"; |
||||||
|
import more from "./more2.svg"; |
||||||
|
|
||||||
|
const Categories = ({ items }) => { |
||||||
|
return ( |
||||||
|
<section className="my-10 w-7/12 mx-auto"> |
||||||
|
<div className="flex flex-row items-center justify-between"> |
||||||
|
{items.slice(0, 7).map((item, index) => ( |
||||||
|
<div |
||||||
|
className="flex flex-col items-center justify-center cursor-pointer" |
||||||
|
key={index} |
||||||
|
> |
||||||
|
<img src={item.image} className="w-14" /> |
||||||
|
<span className="text-xs mt-3">{item.title}</span> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div |
||||||
|
// className={`${items.length > 9 ? "bg-blue-600" : "bg-red-600"}`}
|
||||||
|
className="flex flex-col items-center justify-center " |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ background: "#f0f0f1" }} |
||||||
|
className="cursor-pointer rounded-full w-14 h-14 p-2 flex flex-col items-center justify-center" |
||||||
|
> |
||||||
|
<img src={more} className="w-8 rotate-90" /> |
||||||
|
</div> |
||||||
|
<span className="text-xs mt-3">بیشتر</span>{" "} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Categories; |
||||||
|
|
||||||
|
Categories.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
image: jet, |
||||||
|
title: "دیجی کالا جت", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: style, |
||||||
|
title: "دیجی استایل", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: pay, |
||||||
|
title: "دیجی پی", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: pindo, |
||||||
|
title: "پیندو", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: mamoriat, |
||||||
|
title: "ماموریت ها", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: plus, |
||||||
|
title: "دیجی پلاس", |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: club, |
||||||
|
title: "دیجی کلاب", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 143 KiB |
@ -0,0 +1,76 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
|
||||||
|
import rightArrow from "./black-right-arrow.svg"; |
||||||
|
import leftArrow from "./black-left-arrow.svg"; |
||||||
|
|
||||||
|
const ImageSlider = ({ slides }) => { |
||||||
|
const [current, setCurrent] = useState(0); |
||||||
|
const length = slides.length; |
||||||
|
|
||||||
|
const nextSlide = () => { |
||||||
|
setCurrent(current === length - 1 ? 0 : current + 1); |
||||||
|
}; |
||||||
|
|
||||||
|
const prevSlide = () => { |
||||||
|
setCurrent(current === 0 ? length - 1 : current - 1); |
||||||
|
}; |
||||||
|
|
||||||
|
console.log(current); |
||||||
|
|
||||||
|
if (!Array.isArray(slides) || slides.length <= 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="bg-red-100"> |
||||||
|
<div className="relative bg-pink-400"> |
||||||
|
{slides.map((slide, index) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={index === current ? "slide active" : "slide"} |
||||||
|
key={index} |
||||||
|
> |
||||||
|
{index === current && ( |
||||||
|
<img |
||||||
|
src={slide.image} |
||||||
|
alt="mahdi" |
||||||
|
className="w-full" |
||||||
|
style={{ height: "100%" }} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
<Tabbar nextSlide={nextSlide} prevSlide={prevSlide} /> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ImageSlider; |
||||||
|
|
||||||
|
function Tabbar({ nextSlide, prevSlide }) { |
||||||
|
const tabs = [ |
||||||
|
{ |
||||||
|
icon: rightArrow, |
||||||
|
click: nextSlide, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: leftArrow, |
||||||
|
click: prevSlide, |
||||||
|
}, |
||||||
|
]; |
||||||
|
return ( |
||||||
|
<div className="flex flex-row items-center absolute bottom-7 right-10"> |
||||||
|
{tabs.map((tab, index) => ( |
||||||
|
<button |
||||||
|
onClick={tab.click} |
||||||
|
key={index} |
||||||
|
className="bg-white border border-gray-300 rounded-full mx-1 p-2" |
||||||
|
> |
||||||
|
<img src={tab.icon} className="w-4" /> |
||||||
|
</button> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,213 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Swiper, SwiperSlide } from "swiper/react"; |
||||||
|
// Import Swiper styles
|
||||||
|
import "swiper/css"; |
||||||
|
import "swiper/css/navigation"; |
||||||
|
import "swiper/css/pagination"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
import leftArrow from "./white-left-arrow.svg"; |
||||||
|
import General from "./General.png"; |
||||||
|
|
||||||
|
import o2 from "./o2.jpg"; |
||||||
|
import o3 from "./o3.jpg"; |
||||||
|
import r1 from "./r1.jpg"; |
||||||
|
import r2 from "./r2.jpg"; |
||||||
|
|
||||||
|
const Offer = ({ products }) => { |
||||||
|
return ( |
||||||
|
<section |
||||||
|
className="my-10 w-8/12 mx-auto rounded-2xl p-5" |
||||||
|
style={{ backgroundColor: "#ef3a4f" }} |
||||||
|
> |
||||||
|
<div className="flex flex-row items-center p-2"> |
||||||
|
{/* right */} |
||||||
|
<div className="flex flex-col items-center justify-between w-2/12"> |
||||||
|
<span className="text-base text-center text-white font-bold leading-8"> |
||||||
|
پیـــــشنهاد |
||||||
|
<br /> |
||||||
|
شگــــفت |
||||||
|
<br /> |
||||||
|
انـــگیز |
||||||
|
</span> |
||||||
|
<img src={General} className="w-28 my-2" /> |
||||||
|
<button className="text-sm text-white flex flex-row items-center"> |
||||||
|
مشاهده همه |
||||||
|
<img src={leftArrow} className="w-3 mr-1" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
{/* left */} |
||||||
|
<div className="w-10/12 flex flex-row items-center rounded-lg bg-white cursor-pointer"> |
||||||
|
<Swiper |
||||||
|
// spaceBetween={0}
|
||||||
|
slidesPerView={5} |
||||||
|
// navigation
|
||||||
|
pagination={{ clickable: true }} |
||||||
|
scrollbar={{ draggable: true }} |
||||||
|
onSlideChange={() => console.log("slide change")} |
||||||
|
onSwiper={(swiper) => console.log(swiper)} |
||||||
|
> |
||||||
|
{/* */} |
||||||
|
{products.map((product, index) => ( |
||||||
|
<SwiperSlide> |
||||||
|
<div className="flex flex-col p-2"> |
||||||
|
<img src={product.image} className="rounded" /> |
||||||
|
<div className="flex flex-row justify-between items-center mt-4"> |
||||||
|
<p className="text-xs text-white bg-red-600 px-2 py-0.5 rounded-lg mr-1"> |
||||||
|
{product.discount} |
||||||
|
<span className="">%</span> |
||||||
|
</p> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<p className="text-sm ml-1">{product.price}</p> |
||||||
|
<div className="relative"> |
||||||
|
<span className="text-xs">توما</span> |
||||||
|
<span className="text-xs absolute left-0.5 -top-2"> |
||||||
|
ن |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<p |
||||||
|
className="text-left text-xs line-through my-2 ml-3" |
||||||
|
style={{ color: "#c0c2c5" }} |
||||||
|
> |
||||||
|
{product.discountPrice} |
||||||
|
</p> |
||||||
|
<div className="bg-gray-200 h-1.5 mx-auto rounded mt-2 flex flex-row-reverse w-11/12"> |
||||||
|
<div |
||||||
|
className={`h-1.5 rounded duration-500`} |
||||||
|
style={{ |
||||||
|
width: product.rangeWidth, |
||||||
|
backgroundColor: "#ef3a4f", |
||||||
|
}} |
||||||
|
></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</SwiperSlide> |
||||||
|
))} |
||||||
|
</Swiper> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Offer; |
||||||
|
|
||||||
|
Offer.defaultProps = { |
||||||
|
products: [ |
||||||
|
{ |
||||||
|
image: o2, |
||||||
|
price: 20900000, |
||||||
|
discount: 7, |
||||||
|
rangeWidth: "33%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o3, |
||||||
|
price: 11000000, |
||||||
|
discount: 2, |
||||||
|
rangeWidth: "75%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r1, |
||||||
|
price: 3205000, |
||||||
|
discount: 70, |
||||||
|
rangeWidth: "72%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r2, |
||||||
|
price: 30000, |
||||||
|
discount: 75, |
||||||
|
rangeWidth: "44%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o2, |
||||||
|
price: 20900000, |
||||||
|
discount: 7, |
||||||
|
rangeWidth: "33%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o3, |
||||||
|
price: 11000000, |
||||||
|
discount: 2, |
||||||
|
rangeWidth: "75%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r1, |
||||||
|
price: 3205000, |
||||||
|
discount: 70, |
||||||
|
rangeWidth: "72%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r2, |
||||||
|
price: 30000, |
||||||
|
discount: 75, |
||||||
|
rangeWidth: "44%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o2, |
||||||
|
price: 20900000, |
||||||
|
discount: 7, |
||||||
|
rangeWidth: "33%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o3, |
||||||
|
price: 11000000, |
||||||
|
discount: 2, |
||||||
|
rangeWidth: "75%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r1, |
||||||
|
price: 3205000, |
||||||
|
discount: 70, |
||||||
|
rangeWidth: "72%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r2, |
||||||
|
price: 30000, |
||||||
|
discount: 75, |
||||||
|
rangeWidth: "44%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o2, |
||||||
|
price: 20900000, |
||||||
|
discount: 7, |
||||||
|
rangeWidth: "33%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: o3, |
||||||
|
price: 11000000, |
||||||
|
discount: 2, |
||||||
|
rangeWidth: "75%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r1, |
||||||
|
price: 3205000, |
||||||
|
discount: 70, |
||||||
|
rangeWidth: "72%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: r2, |
||||||
|
price: 30000, |
||||||
|
discount: 75, |
||||||
|
rangeWidth: "44%", |
||||||
|
discountPrice: 75000, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import pic4 from "./pic4.jpg"; |
||||||
|
import pic6 from "./pic6.jpg"; |
||||||
|
import pic5 from "./pic5.jpg"; |
||||||
|
import pic3 from "./pic3.jpg"; |
||||||
|
|
||||||
|
export const SliderData = [ |
||||||
|
{ |
||||||
|
image: pic4, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: pic6, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: pic5, |
||||||
|
}, |
||||||
|
{ |
||||||
|
image: pic3, |
||||||
|
}, |
||||||
|
]; |
||||||
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 642 B |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 39 MiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 4.2 MiB |
@ -0,0 +1,19 @@ |
|||||||
|
import React from "react"; |
||||||
|
import ImageSlider from "./ImageSlider"; |
||||||
|
import { SliderData } from "./SliderData"; |
||||||
|
import Categories from "./Categories"; |
||||||
|
import Offer from "./Offer"; |
||||||
|
import Banners from "./Banners"; |
||||||
|
|
||||||
|
const Digikala = () => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<ImageSlider slides={SliderData} /> |
||||||
|
<Banners /> |
||||||
|
<Categories /> |
||||||
|
<Offer /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Digikala; |
||||||
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 749 B |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 40 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 39 MiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 315 KiB |
|
After Width: | Height: | Size: 732 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 587 B |
|
After Width: | Height: | Size: 655 B |
@ -1,19 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
export const ColumnFilter = ({ column }) => { |
|
||||||
|
|
||||||
const { filterValue, setFilter } = column
|
|
||||||
|
|
||||||
return ( |
|
||||||
|
|
||||||
<span> |
|
||||||
|
|
||||||
Search: {''} |
|
||||||
|
|
||||||
<input value={filterValue || '' } |
|
||||||
onChange={(e) => setFilter(e.target.value)} /> |
|
||||||
|
|
||||||
</span> |
|
||||||
|
|
||||||
); |
|
||||||
}; |
|
||||||
@ -0,0 +1,36 @@ |
|||||||
|
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`} |
||||||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React from "react"; |
||||||
|
import more from "./more2.svg"; |
||||||
|
|
||||||
|
export const DropDown = ({}) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<button |
||||||
|
className="" |
||||||
|
id="dropdownButton" |
||||||
|
data-dropdown-toggle="dropdown" |
||||||
|
type="button" |
||||||
|
> |
||||||
|
<img src={more} alt="" className={`cursor-pointer w-5`} /> |
||||||
|
</button> |
||||||
|
<div |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
id="dropdown" |
||||||
|
className="hidden z-10 text-xs list-none rounded divide-y divide-gray-100 shadow" |
||||||
|
> |
||||||
|
<ul className="" aria-labelledby="dropdownButton"> |
||||||
|
<li> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||||
|
> |
||||||
|
ایتم شماره1 |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||||
|
> |
||||||
|
ایتم شماره1 |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<a |
||||||
|
href="#" |
||||||
|
className="block p-3 text-xs text-white hover:bg-blue-600 hover:rounded" |
||||||
|
> |
||||||
|
ایتم شماره1 |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default DropDown; |
||||||
@ -1,95 +1,38 @@ |
|||||||
import React, { useState } from "react"; |
import React, { useState } from "react"; |
||||||
|
import Table from "./BasicTable"; |
||||||
|
|
||||||
|
import DropDown from "./DropDown"; |
||||||
|
|
||||||
import filter from "./filter.svg"; |
import filter from "./filter.svg"; |
||||||
import plus from "./plus.svg"; |
import plus from "./plus.svg"; |
||||||
import more from "./more2.svg"; |
|
||||||
|
|
||||||
export function EditButtons({ buttons }) { |
export function EditButtons({}) { |
||||||
const [selectedButton, setSelectedButton] = useState(null); |
const [activeFilter, setActiveFilter] = useState(null); |
||||||
|
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
|
||||||
|
|
||||||
return ( |
return ( |
||||||
<div className="flex flex-row items-center justify-end"> |
<div className="flex flex-row items-center justify-end"> |
||||||
{buttons.map((button, index) => ( |
{/* add new row */} |
||||||
<div> |
<button |
||||||
<div |
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600" |
||||||
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${ |
style={{ backgroundColor: "#65A9FF" }} |
||||||
button.border |
> |
||||||
} ${button.borderColor} ${ |
ثبت جدید |
||||||
selectedButton === button ? "border" : "border-0" |
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} /> |
||||||
}`}
|
</button> |
||||||
key={index} |
{/* filter */} |
||||||
style={{ |
<img |
||||||
backgroundColor: button.backgroundColor, |
src={filter} |
||||||
padding: button.padding, |
// onClick={() => setSelectedFilterRow(!selectedFilterRow)}
|
||||||
}} |
alt="" |
||||||
onClick={() => |
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
|
||||||
setSelectedButton(selectedButton === button ? null : button) |
${activeFilter ? "border" : "border-0"}`}
|
||||||
} |
onClick={() => setActiveFilter(!activeFilter)} |
||||||
> |
/> |
||||||
<p className={` text-white`}>{button.title}</p> |
{/* dropDown */} |
||||||
<img |
<DropDown /> |
||||||
src={button.logo} |
|
||||||
alt="" |
|
||||||
className={`cursor-pointer ${button.width} ${button.height} ${ |
|
||||||
button.title === null ? "mr-0" : "mx-2" |
|
||||||
}`}
|
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
EditButtons.defaultProps = { |
EditButtons.defaultProps = {}; |
||||||
buttons: [ |
|
||||||
{ |
|
||||||
logo: plus, |
|
||||||
width: "w-3", |
|
||||||
height: "h-3", |
|
||||||
title: "ثبت جدید", |
|
||||||
backgroundColor: "#65A9FF", |
|
||||||
border: "border-b-4", |
|
||||||
borderColor: "#3686EC", |
|
||||||
padding: "4px 7px", |
|
||||||
components: "d", |
|
||||||
buttonSubItems: [], |
|
||||||
}, |
|
||||||
{ |
|
||||||
logo: filter, |
|
||||||
width: "w-5", |
|
||||||
height: "h-5", |
|
||||||
title: null, |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
border: null, |
|
||||||
borderColor: null, |
|
||||||
components: "a", |
|
||||||
buttonSubItems: [], |
|
||||||
}, |
|
||||||
{ |
|
||||||
logo: more, |
|
||||||
width: "w-5", |
|
||||||
height: "h-5", |
|
||||||
title: null, |
|
||||||
textColor: null, |
|
||||||
backgroundColor: "#F3F8FF", |
|
||||||
border: null, |
|
||||||
borderColor: null, |
|
||||||
components: "a", |
|
||||||
buttonSubItems: [ |
|
||||||
{ |
|
||||||
title: "دراپ داون 1", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
// {
|
|
||||||
// logo: settings,
|
|
||||||
// width: "w-5",
|
|
||||||
// height: "h-5",
|
|
||||||
// title: null,
|
|
||||||
// textColor: null,
|
|
||||||
// backgroundColor: "#F3F8FF",
|
|
||||||
// components: "b",
|
|
||||||
// },
|
|
||||||
|
|||||||
@ -0,0 +1,19 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const GoToPage = ({ pageIndex, gotoPage, pageOptions }) => { |
||||||
|
return ( |
||||||
|
<span className="text-xs text-blue-400 mr-1"> |
||||||
|
صفحه{" "} |
||||||
|
<input |
||||||
|
className="ml-1 text-xs p-1 rounded border-blue-400 w-9" |
||||||
|
type="number" |
||||||
|
defaultValue={pageIndex + 1} |
||||||
|
onChange={(e) => { |
||||||
|
const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0; |
||||||
|
gotoPage(pageNumber); |
||||||
|
}} |
||||||
|
/> |
||||||
|
از {pageOptions.length} |
||||||
|
</span> |
||||||
|
); |
||||||
|
}; |
||||||
@ -1,22 +1,92 @@ |
|||||||
[ |
[ |
||||||
{ |
{ |
||||||
"name": "mahdi", |
"name": "خسرو سهرابی", |
||||||
"order-date": "1399/09/27", |
"order_date": "1400/11/09", |
||||||
"order-price": 25, |
"order_price": 1, |
||||||
"order-number": "09120023100", |
"order_number": "09120023100", |
||||||
"user-job": "مهندس ساختمان", |
"user_job": "مهندس ساختمان", |
||||||
"order-status": 1, |
"order_status": 1, |
||||||
"order-level": 1, |
"order_level": 1, |
||||||
"history": "مهدی" |
"birth_place": "استان تهران شهر تهران", |
||||||
|
"office_phone": "02144407010", |
||||||
|
"education": "کارشناسی", |
||||||
|
"job": "فروشنده لوازم خانگی", |
||||||
|
"field_study": "مدیریت صنعتی", |
||||||
|
"birth_day": "1368/09/02", |
||||||
|
"uni": "تهران", |
||||||
|
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", |
||||||
|
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"name": "tannaz", |
"name": "خسرو شکیبایی", |
||||||
"order-date": "1399/09/27", |
"order_date": "1340/04/13", |
||||||
"order-price": 27, |
"order_price": 2, |
||||||
"order-number": "09120023100", |
"order_number": "09390646589", |
||||||
"user-job": "مهندس ساختمان", |
"user_job": "بازیگر", |
||||||
"order-status": 1, |
"order_status": 2, |
||||||
"order-level": 1, |
"order_level": 2, |
||||||
"history": "tannaz" |
"birth_place": "استان تهران شهر تهران", |
||||||
|
"office_phone": "02144407010", |
||||||
|
"education": "کارشناسی", |
||||||
|
"job": "فروشنده لوازم خانگی", |
||||||
|
"field_study": "مدیریت صنعتی", |
||||||
|
"birth_day": "1368/09/02", |
||||||
|
"uni": "تهران", |
||||||
|
"address": "خیابان شریعتی نرسیده به خیابان دولت کوچه عباسی نبش تهیه غذای فارسی پلاک 4 واحد 3", |
||||||
|
"behaviour": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"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": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"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": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"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": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||||
} |
} |
||||||
] |
] |
||||||
|
|||||||
@ -1,302 +0,0 @@ |
|||||||
import React, { useMemo } from "react"; |
|
||||||
|
|
||||||
import { |
|
||||||
useTable, |
|
||||||
useSortBy, |
|
||||||
useGlobalFilter, |
|
||||||
useFilters, |
|
||||||
usePagination, |
|
||||||
useRowSelect, |
|
||||||
useColumnOrder, |
|
||||||
} from "react-table"; |
|
||||||
|
|
||||||
import { COLUMNS } from "./columns"; |
|
||||||
|
|
||||||
import { GlobalFilter } from "./GlobalFilter"; |
|
||||||
|
|
||||||
import { Checkbox } from "./Checkbox"; |
|
||||||
|
|
||||||
import MOCK_DATA from "./MOCK_DATA.json"; |
|
||||||
|
|
||||||
const BasicTable = () => { |
|
||||||
const columns = React.useMemo(() => COLUMNS, []); |
|
||||||
const data = useMemo(() => MOCK_DATA, []); |
|
||||||
|
|
||||||
const { |
|
||||||
getTableProps, |
|
||||||
getTableBodyProps, |
|
||||||
headerGroups, |
|
||||||
footerGroups, |
|
||||||
rows, |
|
||||||
page, |
|
||||||
nextPage, |
|
||||||
previousPage, |
|
||||||
canNextPage, |
|
||||||
canPreviousPage, |
|
||||||
pageOptions, |
|
||||||
gotoPage, |
|
||||||
pageCount, |
|
||||||
setPageSize, |
|
||||||
prepareRow, |
|
||||||
allColumns, |
|
||||||
getToggleHideAllColumnsProps, |
|
||||||
setColumnOrder, |
|
||||||
selectedFlatRows, |
|
||||||
state, |
|
||||||
setGlobalFilter, |
|
||||||
} = useTable( |
|
||||||
{ |
|
||||||
columns, |
|
||||||
data, |
|
||||||
// initialState: { pageIndex: 2 }
|
|
||||||
}, |
|
||||||
useColumnOrder, |
|
||||||
useFilters, |
|
||||||
useGlobalFilter, |
|
||||||
useSortBy, |
|
||||||
usePagination, |
|
||||||
useRowSelect, |
|
||||||
(hooks) => { |
|
||||||
hooks.visibleColumns.push((columns) => { |
|
||||||
return [ |
|
||||||
{ |
|
||||||
id: "selection", |
|
||||||
Header: ({ getToggleAllRowsSelectedProps }) => ( |
|
||||||
<Checkbox {...getToggleAllRowsSelectedProps()} /> |
|
||||||
), |
|
||||||
Cell: ({ row }) => ( |
|
||||||
<Checkbox {...row.getToggleRowSelectedProps()} /> |
|
||||||
), |
|
||||||
}, |
|
||||||
...columns, |
|
||||||
]; |
|
||||||
}); |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
const changeOrder = () => { |
|
||||||
setColumnOrder([ |
|
||||||
"name", |
|
||||||
"order-number", |
|
||||||
"user-job", |
|
||||||
"order-level", |
|
||||||
"order-status", |
|
||||||
"order-price", |
|
||||||
]); |
|
||||||
}; |
|
||||||
|
|
||||||
const { globalFilter, pageIndex, pageSize } = state; |
|
||||||
// const firstPageRows = rows.slice(0, 10);
|
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div className="bg-yellow-500"> |
|
||||||
{/* search box */} |
|
||||||
<GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} /> |
|
||||||
{/* pagination */} |
|
||||||
</div> |
|
||||||
{/* toggle columns */} |
|
||||||
{/* <div> |
|
||||||
<div> |
|
||||||
<Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All |
|
||||||
</div> |
|
||||||
{allColumns.map((column) => ( |
|
||||||
<div key={column.id}> |
|
||||||
<label> |
|
||||||
<input type="checkbox" {...column.getToggleHiddenProps()} /> |
|
||||||
{column.Header} |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> */} |
|
||||||
|
|
||||||
{/* Change Column Order */} |
|
||||||
{/* <button onClick={changeOrder}> Change Column Order </button> */} |
|
||||||
|
|
||||||
<table |
|
||||||
{...getTableProps()} |
|
||||||
className="min-w-full divide-y divide-gray-200" |
|
||||||
> |
|
||||||
<thead className="bg-gray-300"> |
|
||||||
{headerGroups.map((headerGroup) => ( |
|
||||||
<tr {...headerGroup.getHeaderGroupProps()}> |
|
||||||
{headerGroup.headers.map((column) => ( |
|
||||||
<th |
|
||||||
{...column.getHeaderProps(column.getSortByToggleProps())} |
|
||||||
scope="col" |
|
||||||
className="cursor-pointer px-4 py-2 text-right text-xs" |
|
||||||
style={{ color: "#3287B9" }} |
|
||||||
> |
|
||||||
{column.render("Header")} |
|
||||||
<span> |
|
||||||
{column.isSorted |
|
||||||
? column.isSortedDesc |
|
||||||
? " 🔽" |
|
||||||
: " 🔼" |
|
||||||
: ""} |
|
||||||
</span> |
|
||||||
{/* not using */} |
|
||||||
{/* <div> |
|
||||||
{column.canFilter ? column.render('Filter') : null } |
|
||||||
</div> */} |
|
||||||
</th> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</thead> |
|
||||||
|
|
||||||
<tbody |
|
||||||
{...getTableBodyProps()} |
|
||||||
className="bg-white divide-y divide-gray-200" |
|
||||||
> |
|
||||||
{/* not using */} |
|
||||||
{/* {rows.map((row) => { |
|
||||||
prepareRow(row) |
|
||||||
return( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return <td {...cell.getCellProps()} className="px-4 py-4 whitespace-nowrap text-sm" role="cell" style={{color:'#00253A'}}> |
|
||||||
{cell.render('Cell')} |
|
||||||
</td> |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
) |
|
||||||
})} */} |
|
||||||
{page.map((row) => { |
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-4 py-4 whitespace-nowrap text-sm" |
|
||||||
role="cell" |
|
||||||
style={{ color: "#00253A" }} |
|
||||||
> |
|
||||||
{cell.render("Cell")} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
{/* not using */} |
|
||||||
{/* {firstPageRows.map((row) => { |
|
||||||
prepareRow(row); |
|
||||||
return ( |
|
||||||
<tr {...row.getRowProps()}> |
|
||||||
{row.cells.map((cell) => { |
|
||||||
return ( |
|
||||||
<td |
|
||||||
{...cell.getCellProps()} |
|
||||||
className="px-4 py-4 whitespace-nowrap text-sm" |
|
||||||
role="cell" |
|
||||||
style={{ color: "#00253A" }} |
|
||||||
> |
|
||||||
{cell.render("Cell")} |
|
||||||
</td> |
|
||||||
); |
|
||||||
})} |
|
||||||
</tr> |
|
||||||
); |
|
||||||
})} */} |
|
||||||
</tbody> |
|
||||||
|
|
||||||
<tfoot |
|
||||||
className={`bg-gray-300 ${rows.length > 10 ? "w-full" : "hidden"}`} |
|
||||||
> |
|
||||||
{footerGroups.map((footerGroup) => ( |
|
||||||
<tr {...footerGroup.getFooterGroupProps()}> |
|
||||||
{footerGroup.headers.map((column) => ( |
|
||||||
<td |
|
||||||
{...column.getFooterProps} |
|
||||||
className="px-4 py-2 text-right text-xs" |
|
||||||
style={{ color: "#3287B9" }} |
|
||||||
> |
|
||||||
{column.render("Footer")} |
|
||||||
</td> |
|
||||||
))} |
|
||||||
</tr> |
|
||||||
))} |
|
||||||
</tfoot> |
|
||||||
</table> |
|
||||||
|
|
||||||
<pre> |
|
||||||
<code> |
|
||||||
{JSON.stringify( |
|
||||||
{ |
|
||||||
selectedFlatRows: selectedFlatRows.map((row) => row.original), |
|
||||||
}, |
|
||||||
null, |
|
||||||
2 |
|
||||||
)} |
|
||||||
</code> |
|
||||||
</pre> |
|
||||||
|
|
||||||
<div> |
|
||||||
<span> |
|
||||||
Page{" "} |
|
||||||
<strong> |
|
||||||
{pageIndex + 1} of {pageOptions.length} |
|
||||||
</strong> |
|
||||||
{""} |
|
||||||
</span> |
|
||||||
|
|
||||||
<span> |
|
||||||
| Go to Page:{" "} |
|
||||||
<input |
|
||||||
type="number" |
|
||||||
defaultValue={pageIndex + 1} |
|
||||||
onChange={(e) => { |
|
||||||
const pageNumber = e.target.value |
|
||||||
? Number(e.target.value) - 1 |
|
||||||
: 0; |
|
||||||
gotoPage(pageNumber); |
|
||||||
}} |
|
||||||
style={{ width: "50px" }} |
|
||||||
/> |
|
||||||
</span> |
|
||||||
|
|
||||||
<select |
|
||||||
value={pageSize} |
|
||||||
onChange={(e) => setPageSize(Number(e.target.value))} |
|
||||||
> |
|
||||||
{[7, 10, 25, 50].map((pageSize) => ( |
|
||||||
<option key={pageSize} value={pageSize}> |
|
||||||
Show {pageSize} |
|
||||||
</option> |
|
||||||
))} |
|
||||||
</select> |
|
||||||
|
|
||||||
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}> |
|
||||||
{" "} |
|
||||||
{"<<"}{" "} |
|
||||||
</button> |
|
||||||
|
|
||||||
<button |
|
||||||
className="bg-blue-400 m-2 rounded text-white p-2" |
|
||||||
onClick={() => previousPage()} |
|
||||||
disabled={!canPreviousPage} |
|
||||||
> |
|
||||||
Previous |
|
||||||
</button> |
|
||||||
<button |
|
||||||
className="bg-blue-400 m-2 rounded text-white p-2" |
|
||||||
onClick={() => nextPage()} |
|
||||||
disabled={!canNextPage} |
|
||||||
> |
|
||||||
Next |
|
||||||
</button> |
|
||||||
|
|
||||||
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}> |
|
||||||
{" "} |
|
||||||
{">>"}{" "} |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default BasicTable; |
|
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import React from "react"; |
||||||
|
import dobleLeftArrow from "./double-left-arrow.svg"; |
||||||
|
import leftArrow from "./left-arrow.svg"; |
||||||
|
import rightArrow from "./right-arrow.svg"; |
||||||
|
|
||||||
|
export const Pagination = ({ |
||||||
|
gotoPage, |
||||||
|
canPreviousPage, |
||||||
|
previousPage, |
||||||
|
canNextPage, |
||||||
|
pageCount, |
||||||
|
nextPage, |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<div className="flex flex-row items-center space-x-1"> |
||||||
|
<button |
||||||
|
className="rounded py-1 px-2 text-xs font-bold" |
||||||
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
||||||
|
onClick={() => gotoPage(0)} |
||||||
|
disabled={!canPreviousPage} |
||||||
|
> |
||||||
|
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" /> |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="rounded py-1 px-2 text-xs font-bold" |
||||||
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
||||||
|
onClick={() => previousPage()} |
||||||
|
disabled={!canPreviousPage} |
||||||
|
> |
||||||
|
<img src={rightArrow} className="w-3 h-3" /> |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="rounded py-1 px-2 text-xs font-bold" |
||||||
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
||||||
|
onClick={() => nextPage()} |
||||||
|
disabled={!canNextPage} |
||||||
|
> |
||||||
|
<img src={leftArrow} className="w-3 h-3" /> |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="rounded py-1 px-2 text-xs font-bold" |
||||||
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
||||||
|
onClick={() => gotoPage(pageCount - 1)} |
||||||
|
disabled={!canNextPage} |
||||||
|
> |
||||||
|
<img src={dobleLeftArrow} className="w-4 h-4" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Pagination; |
||||||
|
|
||||||
|
// Pagination.defaultProps = {
|
||||||
|
// pagintaionButtons: [
|
||||||
|
// {
|
||||||
|
// image: { dobleLeftArrow },
|
||||||
|
// click: gotoPage(0),
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// };
|
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const SelectColumnFilter = ({ |
||||||
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
||||||
|
}) => { |
||||||
|
const options = React.useMemo(() => { |
||||||
|
const options = new Set(); |
||||||
|
preFilteredRows.forEach((row) => { |
||||||
|
options.add(row.values[id]); |
||||||
|
}); |
||||||
|
return [...options.values()]; |
||||||
|
}, [id, preFilteredRows]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<select |
||||||
|
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" |
||||||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||||
|
name={id} |
||||||
|
id={id} |
||||||
|
value={filterValue} |
||||||
|
onChange={(e) => { |
||||||
|
setFilter(e.target.value || undefined); |
||||||
|
}} |
||||||
|
> |
||||||
|
<option |
||||||
|
className="text-white" |
||||||
|
value="" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
همه |
||||||
|
</option> |
||||||
|
{options.map((option, i) => ( |
||||||
|
<option |
||||||
|
key={i} |
||||||
|
value={option} |
||||||
|
className="text-right text-white px-2" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
{(() => { |
||||||
|
if (option === 1) { |
||||||
|
return "وضعیت عادی"; |
||||||
|
} else if (option === 2) { |
||||||
|
return "اعلان سطح هشدار"; |
||||||
|
} else if (option === 3) { |
||||||
|
return "بررسی و پیگیری"; |
||||||
|
} else if (option === 4) { |
||||||
|
return "وضعیت بحرانی"; |
||||||
|
} else { |
||||||
|
return " وضعیت پایدار"; |
||||||
|
} |
||||||
|
})()}{" "} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const SelectColumnFilter2 = ({ |
||||||
|
column: { filterValue, setFilter, preFilteredRows, id, render }, |
||||||
|
}) => { |
||||||
|
const options = React.useMemo(() => { |
||||||
|
const options = new Set(); |
||||||
|
preFilteredRows.forEach((row) => { |
||||||
|
options.add(row.values[id]); |
||||||
|
}); |
||||||
|
return [...options.values()]; |
||||||
|
}, [id, preFilteredRows]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<select |
||||||
|
className="text-xs flex flex-row items-start justify-start p-1 text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20" |
||||||
|
style={{ backgroundColor: "#F9FBFF", borderColor: "#B5D6FF" }} |
||||||
|
name={id} |
||||||
|
id={id} |
||||||
|
value={filterValue} |
||||||
|
onChange={(e) => { |
||||||
|
setFilter(e.target.value || undefined); |
||||||
|
}} |
||||||
|
> |
||||||
|
<option |
||||||
|
className="text-white" |
||||||
|
value="" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
همه |
||||||
|
</option> |
||||||
|
{options.map((option, i) => ( |
||||||
|
<option |
||||||
|
key={i} |
||||||
|
value={option} |
||||||
|
className="text-right text-white px-2" |
||||||
|
style={{ backgroundColor: "#65A9FF" }} |
||||||
|
> |
||||||
|
{(() => { |
||||||
|
if (option === 1) { |
||||||
|
return "ارسال شده"; |
||||||
|
} else if (option === 2) { |
||||||
|
return "رسیدگی"; |
||||||
|
} else if (option === 3) { |
||||||
|
return "لغو شده"; |
||||||
|
} else if (option === 4) { |
||||||
|
return "پیگیری"; |
||||||
|
} else { |
||||||
|
return "خطری"; |
||||||
|
} |
||||||
|
})()}{" "} |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import React from "react"; |
||||||
|
import settings from "./settings.svg"; |
||||||
|
|
||||||
|
export const Settings = ({}) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ backgroundColor: "#F9FBFF" }} |
||||||
|
className="mr-2 flex flex-col items-center justify-center p-1 rounded" |
||||||
|
> |
||||||
|
<img src={settings} className="w-6 h-6 cursor-pointer" /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import cancleIcon from "./zarbedar-icon.svg"; |
||||||
|
|
||||||
|
export const SliderColumnFilter = ({ |
||||||
|
column: { filterValue, setFilter, preFilteredRows, id }, |
||||||
|
}) => { |
||||||
|
const [min, max] = React.useMemo(() => { |
||||||
|
let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||||
|
let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0; |
||||||
|
preFilteredRows.forEach((row) => { |
||||||
|
min = Math.min(row.values[id], min); |
||||||
|
max = Math.max(row.values[id], max); |
||||||
|
}); |
||||||
|
return [min, max]; |
||||||
|
}, [id, preFilteredRows]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-row items-center justify-between w-10/12"> |
||||||
|
<input |
||||||
|
className=" w-10/12" |
||||||
|
type="range" |
||||||
|
min={min} |
||||||
|
max={max} |
||||||
|
value={filterValue || min} |
||||||
|
onChange={(e) => { |
||||||
|
setFilter(parseInt(e.target.value, 10)); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<div className="p-1 rounded bg-blue-300 bg-opacity-20"> |
||||||
|
<img |
||||||
|
src={cancleIcon} |
||||||
|
onClick={() => setFilter(undefined)} |
||||||
|
className="cursor-pointer w-2 h-2" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* <button onClick={() => setFilter(undefined)}>ریست</button> */} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
export const ToggleColumns = ({ allColumns, getToggleHideAllColumnsProps }) => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<input type="checkbox" {...getToggleHideAllColumnsProps()} /> Toggle All |
||||||
|
</div> |
||||||
|
{allColumns.map((column) => ( |
||||||
|
<div key={column.id}> |
||||||
|
<label> |
||||||
|
<input type="checkbox" {...column.getToggleHiddenProps()} /> |
||||||
|
{column.Header} |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ToggleColumns; |
||||||
|
After Width: | Height: | Size: 545 B |
Loading…
Reference in new issue