106 lines
3.4 KiB
JavaScript
106 lines
3.4 KiB
JavaScript
import React, {
|
|
useState,
|
|
useCallback
|
|
} from 'react'
|
|
import PropTypes from 'prop-types';
|
|
import classes from './scss/dropdown.module.scss'
|
|
|
|
export default function Dropdown(props) {
|
|
const [hidden, setHidden] = useState(true)
|
|
|
|
const toggleDropdown = () => {
|
|
setHidden(!hidden)
|
|
}
|
|
|
|
const onMouseEnter = useCallback((item) => {
|
|
document.documentElement.style.setProperty('--cursor-color', item.color ? item.color : 'var(--text-color)');
|
|
}, [])
|
|
|
|
const onMouseLeave = useCallback(() => {
|
|
document.documentElement.style.setProperty('--cursor-color', 'var(--text-color)');
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<section className={`${classes.dropdown} ${hidden ? '' : classes.active} ${props.className ? props.className : ''} ${props.left ? classes.left : ''}`} data-type="clickable">
|
|
<section
|
|
className={classes.text}
|
|
onClick={() => toggleDropdown()}
|
|
>
|
|
<span className={classes.content}>{props.text}</span>
|
|
<span className={classes.icon} style={props.iconStyle}></span>
|
|
<section
|
|
className={classes.popup}
|
|
>
|
|
<span className={classes.text}>{props.altText}</span>
|
|
</section>
|
|
</section>
|
|
<ul className={classes.menu} style={props.activeColor}>
|
|
{
|
|
props.menu.map((item) => {
|
|
switch (item.type) {
|
|
case 'date': {
|
|
return (
|
|
<section
|
|
key={item.name}
|
|
className={classes.date}
|
|
>
|
|
<section className={classes.line} />
|
|
<section className={classes.text}>{item.name}</section>
|
|
</section>
|
|
)
|
|
}
|
|
case 'custom': {
|
|
return (
|
|
item.component
|
|
)
|
|
}
|
|
default: {
|
|
return (
|
|
<li
|
|
key={item.name}
|
|
className={`${classes.item} ${item.name === props.text || (props.activeRule && props.activeRule(item)) ? classes.active : ''}`}
|
|
onClick={() => {
|
|
props.onClick(item)
|
|
toggleDropdown()
|
|
}}
|
|
style={item.color ? { color: item.color } : {}}
|
|
data-type="clickable"
|
|
onMouseEnter={() => onMouseEnter(item)}
|
|
onMouseLeave={() => onMouseLeave()}
|
|
>
|
|
{
|
|
item.icon ? (
|
|
<section className={classes.item_icon}>
|
|
{item.icon}
|
|
</section>
|
|
) : null
|
|
}
|
|
<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,
|
|
altText: PropTypes.string,
|
|
iconStyle: PropTypes.object,
|
|
left: PropTypes.bool,
|
|
}; |