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