Small refactoring to input field

SpareBank1 · Jan 24, 2017 · 0fce18c · 0fce18c
1 parent 232742c
commit 0fce18c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 27 deletions.
diff --git a/examples/account-selector.js b/examples/account-selector.js
@@ -36,10 +36,21 @@ const AccountSelectorExample = () => {
     );
   }
 
+  function renderNoSuggestion() {
+    return (
+      <h2>Ingen treff</h2>
+    );
+  }
+
   return (
     <div className="selector">
       <label htmlFor="custom-id" className="ffe-form-label ffe-form-label--block selector-label">Velg konto</label>
-      <SuggestionListContainer suggestions={accountArray} onSelect={onAccountSelected} renderSuggestion={(account) => renderAccount(account)}/>
+      <SuggestionListContainer
+        suggestions={accountArray}
+        onSelect={onAccountSelected}
+        renderSuggestion={(account) => renderAccount(account)}
+        renderNoSuggestion={() => renderNoSuggestion()}
+      />
     </div>
   );
 };

diff --git a/src/selectors/input-field.js b/src/selectors/input-field.js
@@ -1,7 +1,6 @@
 import React, { PropTypes, Component } from 'react';
 import classNames from 'classnames';
 import ChevronIkon from 'ffe-icons-react/chevron-ikon';
-import i18n from '../i18n/i18n';
 import KryssIkon from 'ffe-icons-react/kryss-ikon';
 
 import KeyCode from '../util/keyCode';
@@ -11,8 +10,9 @@ class BaseSelector extends Component {
   constructor(props) {
     super(props);
     this.onKeyDown = this.onKeyDown.bind(this);
-  };
-
+    this.inputClassName = this.inputClassName.bind(this);
+    this.dropdownIconClassName = this.dropdownIconClassName.bind(this);
+  }
 
   onKeyDown({which, altKey}) {
     const {onShowSuggestions, onHideSuggestions} = this.props;
@@ -25,20 +25,31 @@ class BaseSelector extends Component {
     }
   }
 
-  render() {
-    const {onFocus, onChange, value, id, placeholder, isSuggestionsShowing, ariaInvalid} = this.props;
+  inputClassName() {
+    return classNames('ffe-input-field nfe-account-selector__search',
+      {'nfe-account-selector__search--open': this.props.isSuggestionsShowing}
+    );
+  }
 
-    const inputClassName = () => { //TODO class function
-      return classNames('ffe-input-field nfe-account-selector__search',
-        {'nfe-account-selector__search--open': isSuggestionsShowing}
-      );
-    };
+  dropdownIconClassName() {
+    return classNames('nfe-account-selector__dropdown-icon',
+      {'nfe-account-selector__dropdown-icon--reverse': this.props.isSuggestionsShowing}
+    );
+  }
 
-    const dropdownIconClassName = () => { //TODO class function
-      return classNames('nfe-account-selector__dropdown-icon',
-        {'nfe-account-selector__dropdown-icon--reverse': isSuggestionsShowing}
-      );
-    };
+  render() {
+    const {
+      onFocus,
+      onChange,
+      value,
+      id,
+      placeholder,
+      isSuggestionsShowing,
+      ariaInvalid,
+      resetLabel,
+      onBlur,
+      onReset
+    } = this.props;
 
     return (
       <div
@@ -50,29 +61,30 @@ class BaseSelector extends Component {
           onFocus={ onFocus }
           onChange={ onChange }
           onBlur={ onBlur }
-          className={ inputClassName() }
+          className={ this.inputClassName() }
           onKeyDown={ this.onKeyDown }
           autoComplete='off'
           value={ value }
           id={ id }
           placeholder={ placeholder }
           ref={(el) => {
-            this.inputField = el
+            this.inputField = el;
           }}
           aria-invalid={ ariaInvalid } // add aria with hoc?
           aria-autocomplete='list'
         />
         { value.length > 0 &&
         <button
-          aria-label={ i18n[this.props.locale].RESET_SEARCH }
+          aria-label={ resetLabel }
           className='nfe-account-selector__reset-button'
-          onMouseDown={ () => onChange('') }
+          onClick={ onReset }
           tabIndex={-1}
+          type="button"
         >
           <KryssIkon className='nfe-account-selector__reset-icon'/>
         </button>
         }
-        <div onClick={() => this.inputField.focus()} className={dropdownIconClassName()}>
+        <div onClick={() => this.inputField.focus()} className={this.dropdownIconClassName()}>
           <ChevronIkon focusable={ false }/>
         </div>
       </div>
@@ -90,7 +102,9 @@ BaseSelector.propTypes = {
   placeholder: PropTypes.string,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
-  ariaInvalid: PropTypes.bool
+  ariaInvalid: PropTypes.bool,
+  resetLabel: PropTypes.string.isRequired,
+  onReset: PropTypes.func.isRequired
 };
 
 BaseSelector.defaultProps = {

diff --git a/src/suggestion/suggestion-list-container.js b/src/suggestion/suggestion-list-container.js
@@ -138,10 +138,7 @@ class SuggestionListContainer extends React.Component {
     return (
       <div className='nfe-account-selector__dropdown' onKeyDown={(evt) => this.onKeyDown(evt)}>
         <Scrollbars style={{width: '100%', height: 300}}>
-          {this.props.suggestions.length ? (
-            <SuggestionList highlightedIndex={this.state.highlightedIndex} {...this.props}/>)
-            : null
-          }
+          <SuggestionList highlightedIndex={this.state.highlightedIndex} {...this.props}/>
         </Scrollbars>
       </div>
     );

diff --git a/src/suggestion/suggestion-list.js b/src/suggestion/suggestion-list.js
@@ -61,7 +61,7 @@ export default class SuggestionList extends Component {
               onSelect={onSelect}
             />
           )) :
-          renderNoSuggestion()
+          <li>{renderNoSuggestion()}</li>
         }
       </ul>
     );