aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/ens-input.js2
-rw-r--r--ui/app/components/send/to-autocomplete.component.js141
-rw-r--r--ui/app/components/send/to-autocomplete.js120
3 files changed, 142 insertions, 121 deletions
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index 292dcdde6..adbf2dba8 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -10,7 +10,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
const ensRE = /.+\..+$/
const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
const connect = require('react-redux').connect
-const ToAutoComplete = require('./send/to-autocomplete')
+const ToAutoComplete = require('./send/to-autocomplete.component').default
const log = require('loglevel')
const { isValidENSAddress } = require('../util')
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..19f534b94
--- /dev/null
+++ b/ui/app/components/send/to-autocomplete.component.js
@@ -0,0 +1,141 @@
+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>
+ )
+ }
+
+}
diff --git a/ui/app/components/send/to-autocomplete.js b/ui/app/components/send/to-autocomplete.js
deleted file mode 100644
index df74ef194..000000000
--- a/ui/app/components/send/to-autocomplete.js
+++ /dev/null
@@ -1,120 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('../send_/account-list-item/account-list-item.component').default
-const connect = require('react-redux').connect
-
-ToAutoComplete.contextTypes = {
- t: PropTypes.func,
-}
-
-module.exports = connect()(ToAutoComplete)
-
-
-inherits(ToAutoComplete, Component)
-function ToAutoComplete () {
- Component.call(this)
-
- this.state = { accountsToRender: [] }
-}
-
-ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
- const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
- return toAddress && listItemAddress === toAddress
- ? listItemIcon
- : null
-}
-
-ToAutoComplete.prototype.renderDropdown = function () {
- const {
- closeDropdown,
- onChange,
- to,
- } = this.props
- const { accountsToRender } = this.state
-
- return accountsToRender.length && h('div', {}, [
-
- h('div.send-v2__from-dropdown__close-area', {
- onClick: closeDropdown,
- }),
-
- h('div.send-v2__from-dropdown__list', {}, [
-
- ...accountsToRender.map(account => h(AccountListItem, {
- account,
- className: 'account-list-item__dropdown',
- handleClick: () => {
- onChange(account.address)
- closeDropdown()
- },
- icon: this.getListItemIcon(account.address, to),
- displayBalance: false,
- displayAddress: true,
- })),
-
- ]),
-
- ])
-}
-
-ToAutoComplete.prototype.handleInputEvent = function (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)
-}
-
-ToAutoComplete.prototype.componentDidUpdate = function (nextProps, nextState) {
- if (this.props.to !== nextProps.to) {
- this.handleInputEvent()
- }
-}
-
-ToAutoComplete.prototype.render = function () {
- const {
- to,
- dropdownOpen,
- onChange,
- inError,
- } = this.props
-
- return h('div.send-v2__to-autocomplete', {}, [
-
- h('input.send-v2__to-autocomplete__input', {
- placeholder: this.context.t('recipientAddress'),
- className: inError ? `send-v2__error-border` : '',
- value: to,
- onChange: event => onChange(event.target.value),
- onFocus: event => this.handleInputEvent(event),
- style: {
- borderColor: inError ? 'red' : null,
- },
- }),
-
- !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
- style: { color: '#dedede' },
- onClick: () => this.handleInputEvent(),
- }),
-
- dropdownOpen && this.renderDropdown(),
-
- ])
-}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-06 11:45:40 +0800