Add dividers to AutoComplete

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -47,23 +47,41 @@ export default class AddressSelect extends Component {
   }
 
   state = {
+    autocompleteEntries: [],
     entries: {},
     addresses: [],
     value: ''
   }
 
   entriesFromProps (props = this.props) {
-    const { accounts, contacts, contracts, wallets } = props;
-    const entries = Object.assign({}, accounts || {}, wallets || {}, contacts || {}, contracts || {});
-    return entries;
+    const { accounts = {}, contacts = {}, contracts = {}, wallets = {} } = props;
+
+    const autocompleteEntries = [].concat(
+      Object.values(wallets),
+      'divider',
+      Object.values(accounts),
+      'divider',
+      Object.values(contacts),
+      'divider',
+      Object.values(contracts)
+    );
+
+    const entries = {
+      ...wallets,
+      ...accounts,
+      ...contacts,
+      ...contracts
+    };
+
+    return { autocompleteEntries, entries };
   }
 
   componentWillMount () {
     const { value } = this.props;
-    const entries = this.entriesFromProps();
+    const { entries, autocompleteEntries } = this.entriesFromProps();
     const addresses = Object.keys(entries).sort();
 
-    this.setState({ entries, addresses, value });
+    this.setState({ autocompleteEntries, entries, addresses, value });
   }
 
   componentWillReceiveProps (newProps) {
@@ -74,7 +92,7 @@ export default class AddressSelect extends Component {
 
   render () {
     const { allowInput, disabled, error, hint, label } = this.props;
-    const { entries, value } = this.state;
+    const { autocompleteEntries, value } = this.state;
 
     const searchText = this.getSearchText();
     const icon = this.renderIdentityIcon(value);
@@ -92,7 +110,7 @@ export default class AddressSelect extends Component {
           onUpdateInput={ allowInput && this.onUpdateInput }
           value={ searchText }
           filter={ this.handleFilter }
-          entries={ entries }
+          entries={ autocompleteEntries }
           entry={ this.getEntry() || {} }
           renderItem={ this.renderItem }
         />