diff options
Diffstat (limited to 'ui/app/components/send/to-autocomplete.component.js')
-rw-r--r-- | ui/app/components/send/to-autocomplete.component.js | 141 |
1 files changed, 0 insertions, 141 deletions
diff --git a/ui/app/components/send/to-autocomplete.component.js b/ui/app/components/send/to-autocomplete.component.js deleted file mode 100644 index 9e270db75..000000000 --- a/ui/app/components/send/to-autocomplete.component.js +++ /dev/null @@ -1,141 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import AccountListItem from '../send/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 - ? <i className={'fa fa-check fa-lg'} - style={{ - color: '#02c9b1', - }} - /> - : null - } - - renderDropdown () { - const { - closeDropdown, - onChange, - to, - } = this.props - const {accountsToRender} = this.state - - if (!accountsToRender.length) { - return null - } - - return ( - <div> - <div className={'send-v2__from-dropdown__close-area'} onClick={closeDropdown} /> - <div className={'send-v2__from-dropdown__list'}> - {accountsToRender.map((account, i) => ( - <AccountListItem - key={i} - account={account} - className={'account-list-item__dropdown'} - handleClick={() => { - onChange(account.address) - closeDropdown() - }} - icon={this.getListItemIcon(account.address, to)} - displayBalance={false} - displayAddress={true} - /> - ))} - </div> - </div> - ) - } - - 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 ( - <div className={'send-v2__to-autocomplete'}> - <input - className={classnames('send-v2__to-autocomplete__input', { - 'send-v2__error-border': inError, - })} - placeholder={this.context.t('recipientAddress')} - value={to} - onChange={event => onChange(event.target.value)} - onFocus={event => this.handleInputEvent(event)} - style={{ - borderColor: inError ? 'red' : null, - }} - /> - { - to - ? null - : <i className={'fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret'} - onClick={() => this.handleInputEvent()} - style={{ - style: {color: '#dedede'}, - }} - /> - } - { - dropdownOpen - ? this.renderDropdown() - : null - } - </div> - ) - } - -} |