Independent Dropdown React Component

independent-dropdown.jsx

import React, { Component } 				from 'react';
import PropTypes 					from 'prop-types';

import map 						from 'lodash/map';

export default class IndependentDropdown extends Component {
	constructor(props) {
		super(props);
		
		this.onClickOutside = this.onClickOutside.bind(this);
	}
	
	onClickOutside(e) {
		const { contentNode } = this;
        	const { id, display, onClickOutsideAction } = this.props;

        	if ( display && !contentNode.contains(e.target)) {
            		onClickOutsideAction(id);
        	}
	}
	
	attachEvent() {
		document.addEventListener('click', this.onClickOutside);
	}
	
	detachEvent() {
		document.removeEventListener('click', this.onClickOutside);
	}
	
	setEventState(display) {
		display ? this.attachEvent() : this.detachEvent();
	}
	
	componentWillReceiveProps(nextProps) {
		this.setEventState(nextProps.display);
	}
	
	componentWillMount() {
		this.setEventState(this.props.display);
	}
	
	renderContent() {
		const { items } = this.props;
		
		return (
			<div className='independent-dropdown' ref={(node) => {this.contentNode = node;}}>
				{
					map(items, (item, key) => (
						<a href='#' className='item' key={key}>
							<h3>Some items here</h3>
						</a>
					))
				}
			</div>
		);
	}
	
	render() {
		const { display } = this.props;
		
		// the node independent-dropdown-box must have a CSS like
		// position: absolute;
		// bottom: 0;
		// left: 0;
		// display: block;
		// width: 100%;
		// height: 0;
		// z-index: 1;
		return (
			<div className='independent-dropdown-box'>
				{display && this.renderContent()}
			</div>
		);
	}
}

IndependentDropdown.propTypes = {
	id: PropTypes.string.isRequired,
	display: PropTypes.bool.isRequired,
	items: PropTypes.array.isRequired,
	onClickOutsideAction: PropTypes.func.isRequired
};