85 lines
1.6 KiB
React
85 lines
1.6 KiB
React
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
|
|
import styles from './menu.css';
|
|
|
|
const MenuComponent = ({
|
|
className = '',
|
|
children,
|
|
componentRef,
|
|
place = 'right'
|
|
}) => (
|
|
<ul
|
|
className={classNames(
|
|
styles.menu,
|
|
className,
|
|
{
|
|
[styles.left]: place === 'left',
|
|
[styles.right]: place === 'right'
|
|
}
|
|
)}
|
|
ref={componentRef}
|
|
>
|
|
{children}
|
|
</ul>
|
|
);
|
|
|
|
MenuComponent.propTypes = {
|
|
children: PropTypes.node,
|
|
className: PropTypes.string,
|
|
componentRef: PropTypes.func,
|
|
place: PropTypes.oneOf(['left', 'right'])
|
|
};
|
|
|
|
|
|
const MenuItem = ({
|
|
children,
|
|
className,
|
|
onClick
|
|
}) => (
|
|
<li
|
|
className={classNames(
|
|
styles.menuItem,
|
|
styles.hoverable,
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</li>
|
|
);
|
|
|
|
MenuItem.propTypes = {
|
|
children: PropTypes.node,
|
|
className: PropTypes.string,
|
|
onClick: PropTypes.func
|
|
};
|
|
|
|
|
|
const addDividerClassToFirstChild = (child, id) => (
|
|
child && React.cloneElement(child, {
|
|
className: classNames(
|
|
child.className,
|
|
{[styles.menuSection]: id === 0}
|
|
),
|
|
key: id
|
|
})
|
|
);
|
|
|
|
const MenuSection = ({children}) => (
|
|
<React.Fragment>{
|
|
React.Children.map(children, addDividerClassToFirstChild)
|
|
}</React.Fragment>
|
|
);
|
|
|
|
MenuSection.propTypes = {
|
|
children: PropTypes.node
|
|
};
|
|
|
|
export {
|
|
MenuComponent as default,
|
|
MenuItem,
|
|
MenuSection
|
|
};
|