http://www.material-ui.com/#/components/dropdown-menu
Having encountered a styling issue, I was compelled to rearrange the order of components within my material-ui DropdownMenu.
Nevertheless, some buttons (renderNavLink) are now failing to close the Dropdown once clicked.
Here's how I'm rendering:
render() {
return (
<ToolbarGroup>
<DropdownMenu value={defaultSelection} className="quick-dropdown">
{this.renderMenuItems()}
</DropdownMenu>
</ToolbarGroup>
);
}
The renderMenuItems method
The issue lies within the renderNavLink function
renderMenuItems() {
return menuItems.map((item, i) => {
if (item.to) return renderNavLink(i, item, closeMenu);
return renderClickable(i, item, this.props);
});
}
The renderNavLink function
I've included the closeMenu function, but currently it only logs to console
const renderNavLink = (i, { to, primaryText: value }, closeMenu) => (
<NavLink
key={i}
to={to}
style={navLink.default}
onClick={closeMenu}
>
<MenuItem key={i} value={value}>
{value}
</MenuItem>
</NavLink>
);
closeMenu
const closeMenu = () => {
console.log('closeMenu...');
};
Complete Component Code
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';
// Material UI Components
import { ToolbarGroup } from 'material-ui/Toolbar';
import DropdownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
// Actions
import { closeModal, setModal } from 'actions/Modals';
// Styles
import { navLink } from 'components/Styles/material';
// Copy
import { MODAL_CREATEDRAFT_NAME } from 'copy';
// Utils
import { cleanMapStateToProps } from 'utils';
const menuItems = [{
primaryText: 'Quick Menu',
className: 'quickmenu-navlink'
}, {
primaryText: 'Create Draft',
className: 'quickmenu-navlink',
modal: MODAL_CREATEDRAFT_NAME
}, {
primaryText: 'My Drafts',
to: '/drafts/mine'
}, {
primaryText: 'Active Drafts',
to: '/drafts/active'
}, {
primaryText: 'Archived Drafts',
to: '/drafts/archived'
}, {
primaryText: 'Environment Status',
to: '/drafts/environments'
}];
const defaultSelection = menuItems[0].primaryText;
const renderNavLink = (i, { to, primaryText: value }, closeMenu) => (
<NavLink
key={i}
to={to}
style={navLink.default}
onClick={closeMenu}
>
<MenuItem key={i} value={value}>
{value}
</MenuItem>
</NavLink>
);
const renderClickable = (i, {
modal, onClick, className, primaryText: value
}, {
setModal: setModalAction
}) => (
<MenuItem
key={i}
value={value}
primaryText={value}
style={navLink.special}
className={className || ''}
onClick={modal ? () => setModalAction(modal) : onClick}
/>
);
const closeMenu = () => {
console.log('closeMenu...');
};
class QuickMenu extends React.Component {
componentWillReceiveProps(nextProps) {
const { currentDraft } = nextProps;
if (currentDraft && currentDraft.id) {
this.props.closeModal();
}
}
renderMenuItems() {
return menuItems.map((item, i) => {
if (item.to) return renderNavLink(i, item, closeMenu);
return renderClickable(i, item, this.props);
});
}
render() {
return (
<ToolbarGroup>
<DropdownMenu value={defaultSelection} className="quick-dropdown">
{this.renderMenuItems()}
</DropdownMenu>
</ToolbarGroup>
);
}
}
export const QuickMenuJest = QuickMenu;
const mapDispatchToProps = dispatch => ({
closeModal: (...args) => { dispatch(closeModal(...args)); },
setModal: (...args) => { dispatch(setModal(...args)); }
});
export default connect(cleanMapStateToProps(['location', 'currentDraft']), mapDispatchToProps)(QuickMenu);