import React from 'react' import Downshift from 'downshift' import matchSorter from 'match-sorter' import { Down as ArrowDown } from './svg/Arrows' import CheckMark from './svg/Checkmark' import { COLORS } from '../lib/constants' class Dropdown extends React.PureComponent { state = { inputValue: this.props.selected.name, itemsToShow: this.props.list } onUserAction = changes => { this.setState(({ inputValue, itemsToShow }) => { if (Object.prototype.hasOwnProperty.call(changes, 'inputValue')) { if (changes.type === Downshift.stateChangeTypes.keyDownEscape) { inputValue = this.userInputtedValue } else if (changes.type === Downshift.stateChangeTypes.changeInput) { inputValue = changes.inputValue this.userInputtedValue = changes.inputValue } else { inputValue = changes.inputValue } } itemsToShow = this.userInputtedValue ? matchSorter(this.props.list, this.userInputtedValue, { keys: ['name'] }) : this.props.list if ( Object.prototype.hasOwnProperty.call(changes, 'highlightedIndex') && (changes.type === Downshift.stateChangeTypes.keyDownArrowUp || changes.type === Downshift.stateChangeTypes.keyDownArrowDown) ) { inputValue = itemsToShow[changes.highlightedIndex].name this.props.onChange(itemsToShow[changes.highlightedIndex]) } if (Object.prototype.hasOwnProperty.call(changes, 'isOpen')) { this.userInputtedValue = '' // clear on open if (changes.isOpen) { inputValue = '' this.props.onOpen && this.props.onOpen() } else if (changes.isOpen === false && !inputValue) { // set on close inputValue = this.props.selected.name } } return { inputValue, itemsToShow } }) } userInputtedValue = '' render() { const { innerRef, color, selected, onChange, itemWrapper, icon, disableInput } = this.props const { itemsToShow, inputValue } = this.state const minWidth = calcMinWidth(itemsToShow) return ( it === selected)} itemToString={item => item.name} onChange={onChange} onUserAction={this.onUserAction} > {renderDropdown({ color, list: itemsToShow, selected, minWidth, itemWrapper, icon, disableInput })} ) } } const renderDropdown = ({ color, list, minWidth, itemWrapper, icon, disableInput }) => ({ isOpen, highlightedIndex, selectedItem, getRootProps, getToggleButtonProps, getInputProps, getItemProps }) => { return ( {icon} {selectedItem.name} {isOpen ? ( {list.map((item, index) => ( {item.name} ))} ) : null} ) } const DropdownContainer = ({ children, innerRef, minWidth, ...rest }) => { return (
{children}
) } const DropdownIcon = ({ children, isOpen }) => { if (children) { return (
{children}
) } else { return null } } const SelectedItem = ({ getToggleButtonProps, getInputProps, children, isOpen, color, hasIcon, disabled }) => { const itemColor = color || COLORS.SECONDARY return (
) } const ListItems = ({ children, color }) => { return ( ) } const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, item, ...rest }) => { const itemColor = color || COLORS.SECONDARY return (
  • {itemWrapper ? ( itemWrapper({ children, color: itemColor, item, isSelected }) ) : ( {children} )} {isSelected ? : null}
  • ) } function calcMinWidth(items) { return items.reduce((max, { name }) => { const wordSize = name.length * 10 + 32 return wordSize > max ? wordSize : max }, 0) } export default Dropdown