import PropTypes from 'prop-types'; import React from 'react'; import ReactDOM from 'react-dom'; import classNames from 'classnames'; import { omit } from 'app/functions'; import { colors, COLOR_GREEN } from 'app/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() { // listen to capturing phase to ensure, that our event handler will be // called before all other document.addEventListener('click', this.onBodyClick, true); } 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); const props = omit(this.props, Object.keys(Dropdown.propTypes)); return (