import React, {Component} from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import AccountListItem from './account-list-item/account-list-item.component' export default class ToAutoComplete extends Component { static propTypes = { dropdownOpen: PropTypes.bool, openDropdown: PropTypes.func, closeDropdown: PropTypes.func, onChange: PropTypes.func, to: PropTypes.string, accounts: PropTypes.array, inError: PropTypes.bool, } static contextTypes = { t: PropTypes.func, } state = { accountsToRender: [], } getListItemIcon (listItemAddress, toAddress) { return toAddress && listItemAddress === toAddress ? : null } renderDropdown () { const { closeDropdown, onChange, to, } = this.props const {accountsToRender} = this.state if (!accountsToRender.length) { return null } return (
{accountsToRender.map((account, i) => ( { onChange(account.address) closeDropdown() }} icon={this.getListItemIcon(account.address, to)} displayBalance={false} displayAddress={true} /> ))}
) } handleInputEvent (event = {}, cb) { const { to, accounts, closeDropdown, openDropdown, } = this.props const matchingAccounts = accounts.filter(({address}) => address.match(to || '')) const matches = matchingAccounts.length if (!matches || matchingAccounts[0].address === to) { this.setState({accountsToRender: []}) event.target && event.target.select() closeDropdown() } else { this.setState({accountsToRender: matchingAccounts}) openDropdown() } cb && cb(event.target.value) } componentDidUpdate (nextProps) { if (this.props.to !== nextProps.to) { this.handleInputEvent() } } render () { const { to, dropdownOpen, onChange, inError, } = this.props return (
onChange(event.target.value)} onFocus={event => this.handleInputEvent(event)} style={{ borderColor: inError ? 'red' : null, }} /> { to ? null : this.handleInputEvent()} style={{ style: {color: '#dedede'}, }} /> } { dropdownOpen ? this.renderDropdown() : null }
) } }