Adds AutoComplete Wrapper (#2141)

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

@@ -15,8 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { MenuItem, AutoComplete } from 'material-ui';
+import { MenuItem } from 'material-ui';
 
+import AutoComplete from '../AutoComplete';
 import IdentityIcon from '../../IdentityIcon';
 import IdentityName from '../../IdentityName';
 
@@ -53,26 +54,21 @@ export default class AddressSelect extends Component {
 
   render () {
     const { disabled, error, hint, label } = this.props;
+    const { entries } = this.state;
 
     return (
       <div>
         <AutoComplete
           className={ error ? '' : styles.paddedInput }
           disabled={ disabled }
-          floatingLabelText={ label }
-          hintText={ `search for ${hint}` }
-          errorText={ error }
-          onNewRequest={ this.onChange }
-          searchText={ this.getSearchText() }
-          onBlur={ this.onBlur }
-          onFocus={ this.onFocus }
-          onUpdateInput={ this.onUpdateInput }
-
+          label={ label }
+          hint={ `search for ${hint}` }
+          error={ error }
+          onChange={ this.onChange }
+          value={ this.getSearchText() }
           filter={ this.handleFilter }
-          openOnFocus
-          fullWidth
-          floatingLabelFixed
-          dataSource={ this.renderSelectEntries() }
+          entries={ entries }
+          renderItem={ this.renderItem }
         />
 
         { this.renderIdentityIcon() }
@@ -81,7 +77,9 @@ export default class AddressSelect extends Component {
   }
 
   renderIdentityIcon () {
-    if (this.props.error) return null;
+    if (this.props.error) {
+      return null;
+    }
 
     const { value } = this.props;
 
@@ -93,17 +91,11 @@ export default class AddressSelect extends Component {
     );
   }
 
-  renderSelectEntries () {
-    const values = Object.values(this.state.entries);
-
-    if (!values.length) {
-      return null;
-    }
-
-    return values.map(entry => ({
+  renderItem = (entry) => {
+    return {
       text: entry.address,
       value: this.renderSelectEntry(entry)
-    }));
+    };
   }
 
   renderSelectEntry = (entry) => {
@@ -134,10 +126,9 @@ export default class AddressSelect extends Component {
 
   getSearchText () {
     const { value } = this.props;
-    const entries = this.state.entries;
-
     if (!value) return '';
 
+    const { entries } = this.state;
     const entry = entries[value];
     if (!entry) return '';
 
@@ -152,25 +143,8 @@ export default class AddressSelect extends Component {
       .some(text => text.toLowerCase().indexOf(lowCaseSearch) !== -1);
   }
 
-  onChange = (item, idx) => {
-    if (idx === -1) {
-      this.props.onChange(null, '');
-      return null;
-    }
-
-    const entries = Object.values(this.state.entries);
-    const address = entries[idx].address;
-
+  onChange = (entry) => {
+    const address = entry ? entry.address : '';
     this.props.onChange(null, address);
   }
-
-  onFocus = () => {
-    this.props.onChange(null, '');
-  }
-
-  onBlur = () => {
-    if (this.props.error) {
-      this.props.onChange(null, '');
-    }
-  }
 }

js/src/ui/Form/AutoComplete/autocomplete.js

@@ -0,0 +1,95 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { MenuItem, AutoComplete as MUIAutoComplete } from 'material-ui';
+
+export default class AutoComplete extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    error: PropTypes.string,
+    value: PropTypes.string,
+    className: PropTypes.string,
+    filter: PropTypes.func,
+    renderItem: PropTypes.func,
+    entries: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.object
+    ])
+  }
+
+  render () {
+    const { disabled, error, hint, label, value, className, filter } = this.props;
+
+    return (
+      <MUIAutoComplete
+        className={ className }
+        disabled={ disabled }
+        floatingLabelText={ label }
+        hintText={ hint }
+        errorText={ error }
+        onNewRequest={ this.onChange }
+        searchText={ value }
+        onFocus={ this.onFocus }
+
+        filter={ filter }
+        openOnFocus
+        fullWidth
+        floatingLabelFixed
+        dataSource={ this.getDataSource() }
+      />
+    );
+  }
+
+  getDataSource () {
+    const { renderItem, entries } = this.props;
+    const entriesArray = (entries instanceof Array)
+      ? entries
+      : Object.values(entries);
+
+    if (renderItem && typeof renderItem === 'function') {
+      return entriesArray.map(entry => renderItem(entry));
+    }
+
+    return entriesArray.map(entry => ({
+      text: entry,
+      value: (
+        <MenuItem
+          primaryText={ entry }
+        />
+      )
+    }));
+  }
+
+  onChange = (item, idx) => {
+    const { onChange, entries } = this.props;
+    const entriesArray = (entries instanceof Array)
+      ? entries
+      : Object.values(entries);
+
+    const entry = (idx === -1) ? null : entriesArray[idx];
+
+    onChange(entry);
+  }
+
+  onFocus = () => {
+    this.props.onChange(null);
+  }
+
+}

js/src/ui/Form/AutoComplete/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './autocomplete';

js/src/ui/Form/InputAddress/inputAddress.js

@@ -95,7 +95,7 @@ class InputAddress extends Component {
   }
 
   handleInputChange = (event, value) => {
-    let isEmpty = (value.length === 0);
+    const isEmpty = (value.length === 0);
 
     this.setState({ isEmpty });
     this.props.onChange(event, value);