mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Delete unused to-autocomplete (#7533)
This commit is contained in:
Whymarrh Whitby
GitHub
parent
340559b805
commit
6849595326
@ -749,66 +749,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__to-autocomplete {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&__qr-code {
|
|
||||||
z-index: 1026;
|
|
||||||
top: 13px;
|
|
||||||
right: 33px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 8px 5px 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__qr-code:hover {
|
|
||||||
background: #f1f1f1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__to-autocomplete {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
z-index: 1025;
|
|
||||||
position: relative;
|
|
||||||
height: 54px;
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid $Grey-100;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: $white;
|
|
||||||
color: $tundora;
|
|
||||||
padding: 0 10px;
|
|
||||||
font-family: Roboto;
|
|
||||||
line-height: 21px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&__input {
|
|
||||||
font-size: 16px;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 0;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: #A1A5B3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__resolved {
|
|
||||||
font-size: 12px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
height: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
+ .send-v2__to-autocomplete__qr-code {
|
|
||||||
top: 2px;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__memo-text-area, &__hex-data {
|
&__memo-text-area, &__hex-data {
|
||||||
&__input {
|
&__input {
|
||||||
z-index: 1025;
|
z-index: 1025;
|
||||||
|
|||||||
@ -1,141 +0,0 @@
|
|||||||
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
|
|
||||||
? <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
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
export { default } from './to-autocomplete.js'
|
|
||||||
@ -1,121 +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('../account-list-item/account-list-item.component').default
|
|
||||||
const connect = require('react-redux').connect
|
|
||||||
const Tooltip = require('../../../components/ui/tooltip')
|
|
||||||
const checksumAddress = require('../../../helpers/utils/util').checksumAddress
|
|
||||||
|
|
||||||
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__list', {}, [
|
|
||||||
|
|
||||||
...accountsToRender.map(account => h(AccountListItem, {
|
|
||||||
account,
|
|
||||||
className: 'account-list-item__dropdown',
|
|
||||||
handleClick: () => {
|
|
||||||
onChange(checksumAddress(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) {
|
|
||||||
if (this.props.to !== nextProps.to) {
|
|
||||||
this.handleInputEvent()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ToAutoComplete.prototype.render = function () {
|
|
||||||
const {
|
|
||||||
to,
|
|
||||||
onChange,
|
|
||||||
inError,
|
|
||||||
qrScanner,
|
|
||||||
} = this.props
|
|
||||||
|
|
||||||
return h('div.send-v2__to-autocomplete', {}, [
|
|
||||||
|
|
||||||
h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
|
|
||||||
placeholder: this.context.t('recipientAddress'),
|
|
||||||
className: inError ? `send-v2__error-border` : '',
|
|
||||||
dir: 'auto',
|
|
||||||
value: to,
|
|
||||||
onChange: event => onChange(event.target.value),
|
|
||||||
onFocus: event => this.handleInputEvent(event),
|
|
||||||
style: {
|
|
||||||
borderColor: inError ? 'red' : null,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
qrScanner && h(Tooltip, {
|
|
||||||
title: this.context.t('scanQrCode'),
|
|
||||||
position: 'bottom',
|
|
||||||
}, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
|
|
||||||
style: { color: '#33333' },
|
|
||||||
onClick: () => this.props.scanQrCode(),
|
|
||||||
})),
|
|
||||||
|
|
||||||
this.renderDropdown(),
|
|
||||||
|
|
||||||
])
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user