58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
import React, {
|
|
useState
|
|
} from 'react'
|
|
import PropTypes from 'prop-types';
|
|
import classes from './dropdown.module.scss'
|
|
|
|
export default function Dropdown(props) {
|
|
const [hidden, setHidden] = useState(true)
|
|
|
|
const toggleDropdown = () => {
|
|
setHidden(!hidden)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''}`} >
|
|
<section
|
|
className={classes.text}
|
|
onClick={() => toggleDropdown()}
|
|
>
|
|
<span className={classes.content}>{props.text}</span>
|
|
<span className={classes.icon}></span>
|
|
</section>
|
|
<ul className={classes.menu} style={props.activeColor}>
|
|
{
|
|
props.menu.map((item) => {
|
|
return (
|
|
<li
|
|
key={item.name}
|
|
className={`${classes.item} ${item.name === props.text || (props.activeRule && props.activeRule(item)) ? classes.active : ''}`}
|
|
onClick={() => {
|
|
props.onClick(item)
|
|
toggleDropdown()
|
|
}}
|
|
>
|
|
<section className={classes.text}>{item.name}</section>
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
</ul>
|
|
<section
|
|
className={classes.overlay}
|
|
hidden={hidden}
|
|
onClick={() => toggleDropdown()}
|
|
/>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
Dropdown.propTypes = {
|
|
className: PropTypes.string,
|
|
text: PropTypes.string,
|
|
menu: PropTypes.array,
|
|
onClick: PropTypes.func,
|
|
activeColor: PropTypes.object,
|
|
activeRule: PropTypes.func,
|
|
}; |