You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

124 lines
2.9 KiB

import React, { useState, useRef } from "react";
3 years ago
import ScrollContainer from "react-indiana-drag-scroll";
3 years ago
import "./index.scss";
import arrowDown from "./arrow-down.svg";
import arrowUp from "./arrow-up.svg";
import Month from "./Month.js";
const SelectYear = ({ items }) => {
const [selectedYear, setSelectedYear] = useState(null);
const yearEl = useRef(null);
const h = 40
const up = () => {
if (yearEl.current) yearEl.current.scrollTop -= h;
};
const down = () => {
if (yearEl.current) yearEl.current.scrollTop += h;
};
const scrollTo = (index)=>{
yearEl.current.scrollTop = (index-1)*h
}
3 years ago
return (
3 years ago
<section className="flex flex-row items-center mx-auto w-8/12 my-20">
<div className="flex flex-col items-center">
<img src={arrowUp} onClick={up} alt="" />
<div
ignoreElements={"#not-work-drag"}
className={`overflow-y-hidden transition-all ease-in-out delay-150 scroll-smooth h-[${3*h}px] mb-2`}
ref={yearEl}
>
{/* <div
className="transition ease-in-out delay-500"
id="not-work-drag"
3 years ago
style={{
height: "100%",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
left: "12%",
}}
></div> */}
<div className="flex flex-col h-28 ">
3 years ago
{items.map((item, index) => (
3 years ago
<p
id={item.id}
// href={`#${item.id}`}
onClick={() => {
scrollTo(index)
setSelectedYear(item);
// if(index<items.length-2) setTimeout(up, 1);
}}
3 years ago
key={index}
className={`text-base my-2 cursor-pointer text-center transition ease-in-out delay-150 ${
3 years ago
selectedYear === item
? "text-[#06BACE] font-bold text-2xl"
: "text-gray-500"
3 years ago
}`}
>
{item.year}
</p>
3 years ago
))}
</div>
</div>
<img src={arrowDown} onClick={down} alt= ""/>
3 years ago
</div>
3 years ago
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
3 years ago
<div className={`flex flex-col items-center`}>
<Month />
3 years ago
</div>
3 years ago
</section>
);
};
export default SelectYear;
3 years ago
SelectYear.defaultProps = {
items: [
{
id: 1,
year: "1400",
},
{
id: 2,
year: "1399",
},
{
id: 3,
year: "1398",
},
{
id: 4,
year: "1397",
},
{
id: 5,
year: "1396",
},
{
id: 6,
year: "1400",
},
3 years ago
{
id: 7,
year: "1399",
},
3 years ago
{
id: 8,
year: "1398",
},
3 years ago
{
id: 9,
year: "1397",
},
3 years ago
{
id: 10,
year: "1396",
},
3 years ago
],
};