import React from 'react' import enhanceWithClickOutside from 'react-click-outside' import ArrowDown from './svg/arrowdown' class Dropdown extends React.Component { constructor(props) { super() this.state = { listVisible: false, selected: props.selected || props.list[0] } this.select = this.select.bind(this) this.toggle = this.toggle.bind(this) } select(item) { this.setState({ selected: item }) } toggle() { this.setState({ listVisible: !this.state.listVisible }) } handleClickOutside() { this.setState({ listVisible: false }); } renderListItems() { return this.props.list.map((item, i) => (
{ item.name }
)) } render() { // find longest list value in number of characters const MIN_WIDTH = this.props.list.reduce((max, { name }) => (name.length > max ? name.length : max), 0) return (
{ this.state.selected.name }
{ this.renderListItems() }
) } } export default enhanceWithClickOutside(Dropdown)