import React from 'react' import enhanceWithClickOutside from 'react-click-outside' import ArrowDown from './svg/Arrowdown' import Checkmark from './svg/Checkmark' import { PALETTE } from '../lib/constants' class Dropdown extends React.Component { constructor(props) { super() this.state = { isVisible: false, selected: props.selected || props.list[0] } this.select = this.select.bind(this) this.toggle = this.toggle.bind(this) } select(item) { if (this.state.selected !== item) { this.props.onChange(item) this.setState({ selected: item }) } } toggle() { this.setState({ isVisible: !this.state.isVisible }) } handleClickOutside() { this.setState({ isVisible: false }); } renderListItems() { return this.props.list.map((item, i) => (
{ item.name } { this.state.selected === item ? : null }
)) } 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)