mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-22 09:13:37 +01:00
71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import styles from './Menu.module.css';
|
|
|
|
function Menu({
|
|
options = [],
|
|
selectedOption,
|
|
className,
|
|
float,
|
|
align = 'left',
|
|
optionClassName,
|
|
selectedClassName,
|
|
onSelect = () => {},
|
|
}) {
|
|
return (
|
|
<div
|
|
className={classNames(styles.menu, className, {
|
|
[styles.float]: float,
|
|
[styles.top]: float === 'top',
|
|
[styles.bottom]: float === 'bottom',
|
|
[styles.left]: align === 'left',
|
|
[styles.right]: align === 'right',
|
|
})}
|
|
>
|
|
{options
|
|
.filter(({ hidden }) => !hidden)
|
|
.map(option => {
|
|
const { label, value, className: customClassName, render, divider } = option;
|
|
|
|
return render ? (
|
|
render(option)
|
|
) : (
|
|
<div
|
|
key={value}
|
|
className={classNames(styles.option, optionClassName, customClassName, {
|
|
[selectedClassName]: selectedOption === option,
|
|
[styles.selected]: selectedOption === option,
|
|
[styles.divider]: divider,
|
|
})}
|
|
onClick={e => onSelect(value, e)}
|
|
>
|
|
{label}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Menu.propTypes = {
|
|
options: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
label: PropTypes.node,
|
|
value: PropTypes.any,
|
|
className: PropTypes.string,
|
|
render: PropTypes.func,
|
|
divider: PropTypes.bool,
|
|
}),
|
|
),
|
|
selectedOption: PropTypes.any,
|
|
className: PropTypes.string,
|
|
float: PropTypes.oneOf(['top', 'bottom']),
|
|
align: PropTypes.oneOf(['left', 'right']),
|
|
optionClassName: PropTypes.string,
|
|
selectedClassName: PropTypes.string,
|
|
onSelect: PropTypes.func,
|
|
};
|
|
|
|
export default Menu;
|