// 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", }, ], };