From 1f6bf0a80d43252d7b84e8e0247a524b77569810 Mon Sep 17 00:00:00 2001 From: trejgun Date: Tue, 3 Jul 2018 10:34:39 +0800 Subject: fixes #4664 --- ui/app/components/ens-input.js | 2 +- .../components/send/to-autocomplete.component.js | 138 +++++++++++++++++++++ ui/app/components/send/to-autocomplete.js | 120 ------------------ 3 files changed, 139 insertions(+), 121 deletions(-) create mode 100644 ui/app/components/send/to-autocomplete.component.js delete mode 100644 ui/app/components/send/to-autocomplete.js (limited to 'ui') 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..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 + ? + : 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 + } +
+ ) + } + +} 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(), - - ]) -} -- cgit v1.2.3 From b427743ab8bd1d721c717a2108c573e225c55a07 Mon Sep 17 00:00:00 2001 From: TrejGun 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') 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 (
onChange(event.target.value)} -- cgit v1.2.3