83 lines
2.1 KiB
JavaScript
Executable File
83 lines
2.1 KiB
JavaScript
Executable File
import React from 'react';
|
|
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import uuid from 'uuid/v4';
|
|
|
|
import { Consumer } from './context';
|
|
|
|
class NestedDropdownSubmenu extends React.Component {
|
|
componentDidMount() {
|
|
this.id = uuid();
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
tag: Tag,
|
|
subMenuTag: SubMenuTag,
|
|
title,
|
|
children,
|
|
className,
|
|
openId,
|
|
onOpen
|
|
} = this.props;
|
|
const itemClass = classNames(className, 'nested-dropdown__submenu-item', {
|
|
'nested-dropdown__submenu-item--open': openId === this.id
|
|
});
|
|
const linkClass = classNames('nested-dropdown__submenu-item__link', 'dropdown-item');
|
|
|
|
return (
|
|
<Tag className={ itemClass }>
|
|
<a
|
|
href="javascript:;"
|
|
className={ linkClass }
|
|
onClick={ () => { onOpen(this.id) } }
|
|
>
|
|
{ title }
|
|
</a>
|
|
<div className="nested-dropdown__submenu-item__menu-wrap">
|
|
<SubMenuTag className="nested-dropdown__submenu-item__menu dropdown-menu">
|
|
{ children }
|
|
</SubMenuTag>
|
|
</div>
|
|
</Tag>
|
|
);
|
|
}
|
|
}
|
|
NestedDropdownSubmenu.propTypes = {
|
|
children: PropTypes.node,
|
|
title: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.node
|
|
]),
|
|
tag: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.func
|
|
]),
|
|
subMenuTag: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.func
|
|
]),
|
|
className: PropTypes.string,
|
|
// Context Provided:
|
|
openId: PropTypes.string,
|
|
onOpen: PropTypes.func.isRequired
|
|
};
|
|
NestedDropdownSubmenu.defaultProps = {
|
|
tag: "div",
|
|
subMenuTag: "div"
|
|
};
|
|
|
|
const ContextNestedDropdownSubmenu = (props) => (
|
|
<Consumer>
|
|
{
|
|
(contextProps) => (
|
|
<NestedDropdownSubmenu { ...contextProps } { ...props } />
|
|
)
|
|
}
|
|
</Consumer>
|
|
);
|
|
|
|
export {
|
|
ContextNestedDropdownSubmenu as NestedDropdownSubmenu
|
|
};
|