diff options
author | Dan <danjm.com@gmail.com> | 2017-10-06 12:34:00 +0800 |
---|---|---|
committer | Chi Kei Chan <chikeichan@gmail.com> | 2017-10-10 09:24:14 +0800 |
commit | 80463072b5c0c9e826582e066fbc962b667ee355 (patch) | |
tree | e284db8c899aeda545e90eead477bc7b4b8de7b4 /ui/app/components/send/from-dropdown.js | |
parent | db1258f3de88f14cd54e2b4fd1cecc62cf6361e5 (diff) | |
download | tangerine-wallet-browser-80463072b5c0c9e826582e066fbc962b667ee355.tar.gz tangerine-wallet-browser-80463072b5c0c9e826582e066fbc962b667ee355.tar.zst tangerine-wallet-browser-80463072b5c0c9e826582e066fbc962b667ee355.zip |
UI for readonly from component. From dropdown opening and closing. Mockdata.
Diffstat (limited to 'ui/app/components/send/from-dropdown.js')
-rw-r--r-- | ui/app/components/send/from-dropdown.js | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/ui/app/components/send/from-dropdown.js b/ui/app/components/send/from-dropdown.js new file mode 100644 index 000000000..c438cefd5 --- /dev/null +++ b/ui/app/components/send/from-dropdown.js @@ -0,0 +1,94 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const Identicon = require('../identicon') + +module.exports = FromDropdown + +inherits(FromDropdown, Component) +function FromDropdown () { + Component.call(this) +} + +FromDropdown.prototype.renderSingleIdentity = function ( + account, + handleClick, + inList = false, + selectedIdentity = {} +) { + const { identity, balancesToRender } = account + const { name, address } = identity + const { primary, secondary } = balancesToRender + + const iconType = inList ? 'check' : 'caret-down' + const showIcon = !inList || address === selectedIdentity.address + + return h('div.send-v2__from-dropdown__account', { + onClick: () => handleClick(identity), + }, [ + + h('div.send-v2__from-dropdown__top-row', {}, [ + + h( + Identicon, + { + address, + diameter: 18, + className: 'send-v2__from-dropdown__identicon', + }, + ), + + h('div.send-v2__from-dropdown__account-name', {}, name), + + showIcon && h(`i.fa.fa-${iconType}.fa-lg.send-v2__from-dropdown__${iconType}`), + + ]), + + h('div.send-v2__from-dropdown__account-primary-balance', {}, primary), + + h('div.send-v2__from-dropdown__account-secondary-balance', {}, secondary), + + ]) +} + +FromDropdown.prototype.renderDropdown = function (identities, selectedIdentity, closeDropdown) { + return h('div', {}, [ + + h('div.send-v2__from-dropdown__close-area', { + onClick: closeDropdown, + }), + + h('div.send-v2__from-dropdown__list', {}, [ + + ...identities.map(identity => this.renderSingleIdentity( + identity, + () => console.log('Select identity'), + true, + selectedIdentity + )) + + ]), + + ]) +} + +FromDropdown.prototype.render = function () { + const { + identities, + selectedIdentity, + setFromField, + openDropdown, + closeDropdown, + dropdownOpen, + } = this.props + + return h('div.send-v2__from-dropdown', {}, [ + + this.renderSingleIdentity(selectedIdentity, openDropdown), + + dropdownOpen && this.renderDropdown(identities, selectedIdentity.identity, closeDropdown), + + ]) + +} + |