35 lines
900 B
TypeScript
35 lines
900 B
TypeScript
import {useRef} from 'react';
|
|
import './dropdown.css';
|
|
|
|
type ItemClick = (e: MouseEvent) => void;
|
|
|
|
const Dropdown = (title: string, list: Array<{ title: string, onClick: ItemClick }>) => {
|
|
|
|
const ulRef = useRef<HTMLUListElement>(null);
|
|
|
|
const onMouseMove = () => {
|
|
if (ulRef.current == null) {
|
|
return;
|
|
}
|
|
ulRef.current.style.display = 'block';
|
|
}
|
|
|
|
const onMouseOut = () => {
|
|
if (ulRef.current == null) {
|
|
return;
|
|
}
|
|
ulRef.current.style.display = 'none';
|
|
}
|
|
const items = list.map(item => <li onClick={item.onClick}>{item.title}</li>)
|
|
|
|
return (
|
|
<div className="dropdown"
|
|
onMouseMove={onMouseMove}
|
|
onMouseOut={onMouseOut}
|
|
>
|
|
<span className="title">{title}</span>
|
|
<ul ref={ulRef}>{items}</ul>
|
|
</div>
|
|
);
|
|
}
|
|
export default Dropdown; |