import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import { colors, COLOR_GREEN } from 'components/ui'; import styles from './dropdown.scss'; import FormInputComponent from './FormInputComponent'; export default class Dropdown extends FormInputComponent { static displayName = 'Dropdown'; static propTypes = { label: PropTypes.oneOfType([ PropTypes.shape({ id: PropTypes.string }), PropTypes.string ]).isRequired, items: PropTypes.arrayOf(PropTypes.oneOfType([ PropTypes.string, PropTypes.shape({ id: PropTypes.string }) ])).isRequired, block: PropTypes.bool, color: PropTypes.oneOf(colors) }; static defaultProps = { color: COLOR_GREEN }; state = { isActive: false, activeItem: null }; componentDidMount() { document.addEventListener('click', this.onBodyClick); } componentWillUnmount() { document.removeEventListener('click', this.onBodyClick); } render() { const { color, block, items } = this.props; const {isActive} = this.state; const activeItem = this.getActiveItem(); const label = this.formatMessage(activeItem.label); return (