import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import PropTypes from 'prop-types'; export default class DropdownMenu extends React.PureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { isUserTouching: PropTypes.func, isModalOpen: PropTypes.bool.isRequired, onModalOpen: PropTypes.func, onModalClose: PropTypes.func, icon: PropTypes.string.isRequired, items: PropTypes.array.isRequired, size: PropTypes.number.isRequired, direction: PropTypes.string, status: ImmutablePropTypes.map, ariaLabel: PropTypes.string, disabled: PropTypes.bool, }; static defaultProps = { ariaLabel: 'Menu', isModalOpen: false, isUserTouching: () => false, }; state = { direction: 'left', expanded: false, }; setRef = (c) => { this.dropdown = c; } handleClick = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); const { action, to } = this.props.items[i]; if (this.props.isModalOpen) { this.props.onModalClose(); } // Don't call e.preventDefault() when the item uses 'href' property. // ex. "Edit profile" on the account action bar if (typeof action === 'function') { e.preventDefault(); action(); } else if (to) { e.preventDefault(); this.context.router.history.push(to); } this.dropdown.hide(); } handleShow = () => { if (this.props.isUserTouching()) { this.props.onModalOpen({ status: this.props.status, actions: this.props.items, onClick: this.handleClick, }); } else { this.setState({ expanded: true }); } } handleHide = () => this.setState({ expanded: false }) renderItem = (item, i) => { if (item === null) { return
  • ; } const { text, href = '#' } = item; return (
  • {text}
  • ); } render () { const { icon, items, size, direction, ariaLabel, disabled } = this.props; const { expanded } = this.state; const isUserTouching = this.props.isUserTouching(); const directionClass = (direction === 'left') ? 'dropdown__left' : 'dropdown__right'; const iconStyle = { fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }; const iconClassname = `fa fa-fw fa-${icon} dropdown__icon`; if (disabled) { return (
    ); } const dropdownItems = expanded && ( ); // No need to render the actual dropdown if we use the modal. If we // don't render anything breaks, so we just put an empty div. const dropdownContent = !isUserTouching ? ( {dropdownItems} ) :
    ; return ( {dropdownContent} ); } }