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