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 Table from "./BasicTable"; |
||||
|
||||
import DropDown from "./DropDown"; |
||||
|
||||
import filter from "./filter.svg"; |
||||
import plus from "./plus.svg"; |
||||
import more from "./more2.svg"; |
||||
|
||||
export function EditButtons({ buttons }) { |
||||
const [selectedButton, setSelectedButton] = useState(null); |
||||
export function EditButtons({}) { |
||||
const [activeFilter, setActiveFilter] = useState(null); |
||||
// const [selectedFilterRow, setSelectedFilterRow] = useState(null);
|
||||
|
||||
return ( |
||||
<div className="flex flex-row items-center justify-end"> |
||||
{buttons.map((button, index) => ( |
||||
<div> |
||||
<div |
||||
className={`flex flex-row items-center justify-around p-1 rounded-md bg-opacity-30 mx-1 ${ |
||||
button.border |
||||
} ${button.borderColor} ${ |
||||
selectedButton === button ? "border" : "border-0" |
||||
}`}
|
||||
key={index} |
||||
style={{ |
||||
backgroundColor: button.backgroundColor, |
||||
padding: button.padding, |
||||
}} |
||||
onClick={() => |
||||
setSelectedButton(selectedButton === button ? null : button) |
||||
} |
||||
> |
||||
<p className={` text-white`}>{button.title}</p> |
||||
<img |
||||
src={button.logo} |
||||
alt="" |
||||
className={`cursor-pointer ${button.width} ${button.height} ${ |
||||
button.title === null ? "mr-0" : "mx-2" |
||||
}`}
|
||||
/> |
||||
</div> |
||||
</div> |
||||
))} |
||||
{/* add new row */} |
||||
<button |
||||
className="mx-1 flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600" |
||||
style={{ backgroundColor: "#65A9FF" }} |
||||
> |
||||
ثبت جدید |
||||
<img src={plus} alt="" className={`cursor-pointer w-2 mr-1 `} /> |
||||
</button> |
||||
{/* filter */} |
||||
<img |
||||
src={filter} |
||||
// onClick={() => setSelectedFilterRow(!selectedFilterRow)}
|
||||
alt="" |
||||
className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer w-8
|
||||
${activeFilter ? "border" : "border-0"}`}
|
||||
onClick={() => setActiveFilter(!activeFilter)} |
||||
/> |
||||
{/* dropDown */} |
||||
<DropDown /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
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",
|
||||
// },
|
||||
EditButtons.defaultProps = {}; |
||||
|
||||
@ -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", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 25, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1, |
||||
"history": "مهدی" |
||||
"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": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||
}, |
||||
{ |
||||
"name": "tannaz", |
||||
"order-date": "1399/09/27", |
||||
"order-price": 27, |
||||
"order-number": "09120023100", |
||||
"user-job": "مهندس ساختمان", |
||||
"order-status": 1, |
||||
"order-level": 1, |
||||
"history": "tannaz" |
||||
"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": "بچه پرو و دریده شاخ اما کم آزار اهل رفاقت و مرام خلاق نوآور آشنا به صنایع خلاق" |
||||
}, |
||||
{ |
||||
"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