From 1f6bf0a80d43252d7b84e8e0247a524b77569810 Mon Sep 17 00:00:00 2001
From: trejgun <trejgun@gmail.com>
Date: Tue, 3 Jul 2018 10:34:39 +0800
Subject: fixes #4664

---
 .../components/send/to-autocomplete.component.js   | 138 +++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 ui/app/components/send/to-autocomplete.component.js

(limited to 'ui/app/components/send/to-autocomplete.component.js')

diff --git a/ui/app/components/send/to-autocomplete.component.js b/ui/app/components/send/to-autocomplete.component.js
new file mode 100644
index 000000000..86a3172c2
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.component.js
@@ -0,0 +1,138 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+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={'send-v2__to-autocomplete__input' + (inError ? `send-v2__error-border` : '')}
+          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>
+    )
+  }
+
+}
-- 
cgit v1.2.3


From b427743ab8bd1d721c717a2108c573e225c55a07 Mon Sep 17 00:00:00 2001
From: TrejGun <trejgun@gmail.com>
Date: Thu, 5 Jul 2018 11:21:27 +0800
Subject: fix classname

---
 ui/app/components/send/to-autocomplete.component.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/send/to-autocomplete.component.js')

diff --git a/ui/app/components/send/to-autocomplete.component.js b/ui/app/components/send/to-autocomplete.component.js
index 86a3172c2..19f534b94 100644
--- a/ui/app/components/send/to-autocomplete.component.js
+++ b/ui/app/components/send/to-autocomplete.component.js
@@ -1,5 +1,6 @@
 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'
 
 
@@ -107,7 +108,9 @@ export default class ToAutoComplete extends Component {
     return (
       <div className={'send-v2__to-autocomplete'}>
         <input
-          className={'send-v2__to-autocomplete__input' + (inError ? `send-v2__error-border` : '')}
+          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)}
-- 
cgit v1.2.3