New Address Selector Component (#3829)

* WIP new address selector

* WIP Working New Account Selector

* WIP Fully working Addres Selector (missing keyboards navigation)

* WIP Address Selector

* Fully functionnal new Address Selector!

* Implement disabled prop

* Don't auto-open on focus + Text Selection fix

* Add copy address capabilities

* Better Address Selector Focus

* Search from tags

* [Address Selector] Better Focus // Parity Background

* Linting

* [Adress Selector] Better focused input style

* Better focus support for inputs

* Fix style issue

* Add tags to accounts

* linting

* Add label to address selector

* Removed old address selector + improved styling

* Fixing address selection issues

* fix test

* Better logs...

* PR Grumbles Part 1

* PR Grumbles Part 2

* PR Grumbles Part 3.1

* PR Grumbles Part 3.2

* PR Grumbles Part 3.3

* New Portal Component

* Simpler Transition for Portal

* PR Grumbles Part 4

* Align font-family with rest of UI

* Fix null value input

* Fix Webpack build...

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

@@ -34,12 +34,17 @@ class InputAddress extends Component {
     className: PropTypes.string,
     disabled: PropTypes.bool,
     error: PropTypes.string,
+    focused: PropTypes.bool,
     hideUnderline: PropTypes.bool,
     hint: nodeOrStringProptype(),
     label: nodeOrStringProptype(),
     onChange: PropTypes.func,
+    onClick: PropTypes.func,
+    onFocus: PropTypes.func,
     onSubmit: PropTypes.func,
+    readOnly: PropTypes.bool,
     small: PropTypes.bool,
+    tabIndex: PropTypes.number,
     text: PropTypes.bool,
     tokens: PropTypes.object,
     value: PropTypes.string
@@ -52,10 +57,11 @@ class InputAddress extends Component {
   };
 
   render () {
-    const { className, disabled, error, hint, label, text, value } = this.props;
-    const { accountsInfo, allowCopy, hideUnderline, onSubmit, small, tokens } = this.props;
+    const { accountsInfo, allowCopy, className, disabled, error, focused, hint } = this.props;
+    const { hideUnderline, label, onClick, onFocus, onSubmit, readOnly, small } = this.props;
+    const { tabIndex, text, tokens, value } = this.props;
 
-    const account = accountsInfo[value] || tokens[value];
+    const account = value && (accountsInfo[value] || tokens[value]);
 
     const icon = this.renderIcon();
 
@@ -63,7 +69,7 @@ class InputAddress extends Component {
     classes.push(!icon ? styles.inputEmpty : styles.input);
 
     const containerClasses = [ styles.container ];
-    const nullName = new BigNumber(value).eq(0) ? 'null' : null;
+    const nullName = value && new BigNumber(value).eq(0) ? 'null' : null;
 
     if (small) {
       containerClasses.push(styles.small);
@@ -76,11 +82,16 @@ class InputAddress extends Component {
           className={ classes.join(' ') }
           disabled={ disabled }
           error={ error }
+          focused={ focused }
           hideUnderline={ hideUnderline }
           hint={ hint }
           label={ label }
           onChange={ this.handleInputChange }
+          onClick={ onClick }
+          onFocus={ onFocus }
           onSubmit={ onSubmit }
+          readOnly={ readOnly }
+          tabIndex={ tabIndex }
           value={
             text && account
               ? account.name