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.
 
 
 

127 lines
3.0 KiB

// it has style inside index.scss ---> // Start SelectYear && end SelectYear
import React, { useState, useRef } from "react";
import ScrollContainer from "react-indiana-drag-scroll";
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;
};
return (
<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"
style={{
height: "100%",
position: "absolute",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
left: "12%",
}}
></div> */}
<div className="flex flex-col h-28 ">
{items.map((item, index) => (
<p
id={item.id}
// href={`#${item.id}`}
onClick={() => {
scrollTo(index);
setSelectedYear(item);
// if(index<items.length-2) setTimeout(up, 1);
}}
key={index}
className={`text-base my-2 cursor-pointer text-center transition ease-in-out delay-150 ${
selectedYear === item
? "text-[#06BACE] font-sansbold text-2xl"
: "text-gray-500"
}`}
>
{item.year}
</p>
))}
</div>
</div>
<img src={arrowDown} onClick={down} alt="" />
</div>
<div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
<div className={`flex flex-col items-center`}>
<Month />
</div>
</section>
);
};
export default SelectYear;
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",
},
{
id: 7,
year: "1399",
},
{
id: 8,
year: "1398",
},
{
id: 9,
year: "1397",
},
{
id: 10,
year: "1396",
},
],
};