From 88665ba150c74955ef11a1b3fbc0f158a1c321de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 08:31:49 +0200 Subject: [PATCH] Extract dropdown component into components/dropdowns, hook up to app --- .../dropdowns/account-options-dropdown.js | 28 +++++++++++++++++++ .../dropdowns/account-selection-dropdown.js | 28 +++++++++++++++++++ .../components}/account-dropdowns.js | 11 ++++---- .../{ => dropdowns/components}/dropdown.js | 2 +- ui/app/components/dropdowns/index.js | 18 ++++++------ ui/app/components/wallet-view.js | 2 +- 6 files changed, 73 insertions(+), 16 deletions(-) create mode 100644 ui/app/components/dropdowns/account-options-dropdown.js create mode 100644 ui/app/components/dropdowns/account-selection-dropdown.js rename ui/app/components/{ => dropdowns/components}/account-dropdowns.js (97%) rename ui/app/components/{ => dropdowns/components}/dropdown.js (97%) diff --git a/ui/app/components/dropdowns/account-options-dropdown.js b/ui/app/components/dropdowns/account-options-dropdown.js new file mode 100644 index 000000000..7d7188ec4 --- /dev/null +++ b/ui/app/components/dropdowns/account-options-dropdown.js @@ -0,0 +1,28 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const AccountDropdowns = require('./components/account-dropdowns') + +inherits(AccountOptionsDropdown, Component) +function AccountOptionsDropdown () { + Component.call(this) +} + +module.exports = AccountOptionsDropdown + +// TODO: specify default props and proptypes +// TODO: hook up to state, connect to redux to clean up API +AccountOptionsDropdown.prototype.render = function () { + const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props + + return h(AccountDropdowns, { + enableAccountOptions: true, + enableAccountsSelector: false, + selected: selectedAddress, + network, + identities, + style: !!style ? style : {}, + dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, + menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + }, []) +} diff --git a/ui/app/components/dropdowns/account-selection-dropdown.js b/ui/app/components/dropdowns/account-selection-dropdown.js new file mode 100644 index 000000000..ccb73bde7 --- /dev/null +++ b/ui/app/components/dropdowns/account-selection-dropdown.js @@ -0,0 +1,28 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const AccountDropdowns = require('./components/account-dropdowns') + +inherits(AccountSelectionDropdown, Component) +function AccountSelectionDropdown () { + Component.call(this) +} + +module.exports = AccountSelectionDropdown + +// TODO: specify default props and proptypes +// TODO: hook up to state, connect to redux to clean up API +AccountSelectionDropdown.prototype.render = function () { + const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props + + return h(AccountDropdowns, { + enableAccountOptions: false, + enableAccountsSelector: true, + selected: selectedAddress, + network, + identities, + style: !!style ? style : {}, + dropdownWrapperStyle: !!dropdownWrapperStyle ? dropdownWrapperStyle : {}, + menuItemStyles: !!menuItemStyles ? menuItemStyles : {}, + }, []) +} diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js similarity index 97% rename from ui/app/components/account-dropdowns.js rename to ui/app/components/dropdowns/components/account-dropdowns.js index 3f1b0ee53..ee41829c9 100644 --- a/ui/app/components/account-dropdowns.js +++ b/ui/app/components/dropdowns/components/account-dropdowns.js @@ -1,12 +1,12 @@ const Component = require('react').Component const PropTypes = require('react').PropTypes const h = require('react-hyperscript') -const actions = require('../actions') -const genAccountLink = require('../../lib/account-link.js') +const actions = require('../../../actions') +const genAccountLink = require('../../../../lib/account-link.js') const connect = require('react-redux').connect const Dropdown = require('./dropdown').Dropdown const DropdownMenuItem = require('./dropdown').DropdownMenuItem -const Identicon = require('./identicon') +const Identicon = require('../../identicon') const ethUtil = require('ethereumjs-util') const copyToClipboard = require('copy-to-clipboard') @@ -314,6 +314,5 @@ const mapDispatchToProps = (dispatch) => { } } -module.exports = { - AccountDropdowns: connect(null, mapDispatchToProps)(AccountDropdowns), -} +module.exports = connect(null, mapDispatchToProps)(AccountDropdowns) + diff --git a/ui/app/components/dropdown.js b/ui/app/components/dropdowns/components/dropdown.js similarity index 97% rename from ui/app/components/dropdown.js rename to ui/app/components/dropdowns/components/dropdown.js index 07ef75f12..1f35f0c70 100644 --- a/ui/app/components/dropdown.js +++ b/ui/app/components/dropdowns/components/dropdown.js @@ -1,7 +1,7 @@ const Component = require('react').Component const PropTypes = require('react').PropTypes const h = require('react-hyperscript') -const MenuDroppo = require('./menu-droppo') +const MenuDroppo = require('../../menu-droppo') const extend = require('xtend') const noop = () => {} diff --git a/ui/app/components/dropdowns/index.js b/ui/app/components/dropdowns/index.js index 6723a2048..d21c795f5 100644 --- a/ui/app/components/dropdowns/index.js +++ b/ui/app/components/dropdowns/index.js @@ -1,16 +1,18 @@ // Reusable Dropdown Components -// const Dropdown = require('./dropdown') //TODO: Refactor into separate components -// const AccountDropdowns = require('./account-dropdowns') +//TODO: Refactor into separate components +const Dropdown = require('./components/dropdown').Dropdown +const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem +const AccountDropdowns = require('./components/account-dropdowns') // App-Specific Instances -// const AccountSelectionDropdown = require('./account-selection-dropdown') -// const AccountOptionsDropdown = require('./account-options-dropdown') +const AccountSelectionDropdown = require('./account-selection-dropdown') +const AccountOptionsDropdown = require('./account-options-dropdown') const NetworkDropdown = require('./network-dropdown').default module.exports = { - // AccountSelectionDropdown, - // AccountOptionsDropdown, + AccountSelectionDropdown, + AccountOptionsDropdown, NetworkDropdown, - // Dropdown, - // AccountDropdowns, + Dropdown, + AccountDropdowns, } \ No newline at end of file diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 38b2787d5..2b3b55b6a 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -3,7 +3,7 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const inherits = require('util').inherits const Identicon = require('./identicon') -const AccountDropdowns = require('./account-dropdowns').AccountDropdowns +const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns const Content = require('./wallet-content-display') const actions = require('../actions') const BalanceComponent = require('./balance-component')