diff options
author | Dan <danjm.com@gmail.com> | 2018-06-20 23:48:23 +0800 |
---|---|---|
committer | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2018-07-16 23:28:32 +0800 |
commit | b3d78ed8a1fbea059344b04416fb21bdb1b73f86 (patch) | |
tree | 6a2d8f6dda690961331c9bcbf5e2c6bf7102bced /ui/app/components/send/to-autocomplete | |
parent | f31e87dcd5cec09e81c741e311efc3793c9d9b98 (diff) | |
download | tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.gz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.bz2 tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.lz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.xz tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.tar.zst tangerine-wallet-browser-b3d78ed8a1fbea059344b04416fb21bdb1b73f86.zip |
Remove send_ directory, revert to just having send
Revert accidentally changed constants.
Require defaults in ens-input, gas-fee-display and confirm screens.
Diffstat (limited to 'ui/app/components/send/to-autocomplete')
-rw-r--r-- | ui/app/components/send/to-autocomplete/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/send/to-autocomplete/to-autocomplete.js | 120 |
2 files changed, 121 insertions, 0 deletions
diff --git a/ui/app/components/send/to-autocomplete/index.js b/ui/app/components/send/to-autocomplete/index.js new file mode 100644 index 000000000..afa2eb5a4 --- /dev/null +++ b/ui/app/components/send/to-autocomplete/index.js @@ -0,0 +1 @@ +export { default } from './to-autocomplete.js'
\ No newline at end of file diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js new file mode 100644 index 000000000..80cfa7a85 --- /dev/null +++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js @@ -0,0 +1,120 @@ +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 + +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(), + + ]) +} |