Extract dropdown component into components/dropdowns, hook up to app

6 files changed, 73 insertions, 16 deletions

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
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
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')