new InputAddressSelect component (#3071)

* basic address autocomplete

* validate input, propagate changes

* show IdentityIcon in menu

* show IdentityIcon next to input

* refactoring, better variable names, linting

* show default IdentityIcon if search by name

* port #3065 over

* show accounts in the beginning

* show accounts before contacts

* filter deleted accounts

* UX improvements

- limit number of search results shown
- hint text

* only render identity icon if valid address

* UX improvements

- align IdentityIcon
- better hint text

* align label & error with other inputs

This probably needs to be changed soon again. Therefore this ugly hack has been put in place.

* Align component with coding style for app

* Use standard/tested AddressAutocmplete (WIP)

* Address selection & inputs operational

* Update TODOs, remove unused CSS

* only handle input changes when editing

* Simplify

* Cleanup unused modules

* Add contracts to address search

* Updates Address Selector to handle valid input address #3071

* Added Address Selector to contracts read queries

js/src/ui/Form/InputAddressSelect/inputAddressSelect.css

@@ -1,31 +0,0 @@
-/* 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/>.
-*/
-.inputselect {
-  position: relative;
-}
-
-.inputselect svg {
-  padding-right: 84px;
-}
-
-.toggle {
-  position: absolute !important;
-  top: 38px;
-  right: 0;
-  display: inline-block !important;
-  width: auto !important;
-}

js/src/ui/Form/InputAddressSelect/inputAddressSelect.js

@@ -17,103 +17,46 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Toggle } from 'material-ui';
 
 import AddressSelect from '../AddressSelect';
-import InputAddress from '../InputAddress';
-
-import styles from './inputAddressSelect.css';
 
 class InputAddressSelect extends Component {
   static propTypes = {
-    accounts: PropTypes.object,
-    contacts: PropTypes.object,
-    disabled: PropTypes.bool,
-    editing: PropTypes.bool,
+    accounts: PropTypes.object.isRequired,
+    contacts: PropTypes.object.isRequired,
+    contracts: PropTypes.object.isRequired,
     error: PropTypes.string,
     label: PropTypes.string,
     hint: PropTypes.string,
     value: PropTypes.string,
-    tokens: PropTypes.object,
     onChange: PropTypes.func
   };
 
-  state = {
-    editing: this.props.editing || false,
-    entries: []
-  }
-
   render () {
-    const { editing } = this.state;
-
-    return (
-      <div className={ styles.inputselect }>
-        { editing ? this.renderInput() : this.renderSelect() }
-        <Toggle
-          className={ styles.toggle }
-          label='Edit'
-          labelPosition='right'
-          toggled={ editing }
-          onToggle={ this.onToggle } />
-      </div>
-    );
-  }
-
-  renderInput () {
-    const { disabled, error, hint, label, value, tokens } = this.props;
-
-    return (
-      <InputAddress
-        disabled={ disabled }
-        error={ error }
-        hint={ hint }
-        label={ label }
-        value={ value }
-        tokens={ tokens }
-        onChange={ this.onChangeInput } />
-    );
-  }
-
-  renderSelect () {
-    const { accounts, contacts, disabled, error, hint, label, value, tokens } = this.props;
+    const { accounts, contacts, contracts, label, hint, error, value, onChange } = this.props;
 
     return (
       <AddressSelect
+        allowInput
         accounts={ accounts }
         contacts={ contacts }
-        disabled={ disabled }
+        contracts={ contracts }
+        error={ error }
         label={ label }
         hint={ hint }
-        error={ error }
         value={ value }
-        tokens={ tokens }
-        onChange={ this.onChangeSelect } />
+        onChange={ onChange } />
     );
   }
-
-  onToggle = () => {
-    const { editing } = this.state;
-
-    this.setState({
-      editing: !editing
-    });
-  }
-
-  onChangeInput = (event, value) => {
-    this.props.onChange(event, value);
-  }
-
-  onChangeSelect = (event, value) => {
-    this.props.onChange(event, value);
-  }
 }
 
 function mapStateToProps (state) {
-  const { accounts, contacts } = state.personal;
+  const { accounts, contacts, contracts } = state.personal;
 
   return {
     accounts,
-    contacts
+    contacts,
+    contracts
   };
 }