diff --git a/examples/account-selector.js b/examples/account-selector.js index 1a3a5781ff..d014f2f820 100644 --- a/examples/account-selector.js +++ b/examples/account-selector.js @@ -36,10 +36,21 @@ const AccountSelectorExample = () => { ); } + function renderNoSuggestion() { + return ( +

Ingen treff

+ ); + } + return (
- renderAccount(account)}/> + renderAccount(account)} + renderNoSuggestion={() => renderNoSuggestion()} + />
); }; diff --git a/src/selectors/input-field.js b/src/selectors/input-field.js index a60c7b882b..ee4e09c407 100644 --- 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 (
{ - this.inputField = el + this.inputField = el; }} aria-invalid={ ariaInvalid } // add aria with hoc? aria-autocomplete='list' /> { value.length > 0 && } -
this.inputField.focus()} className={dropdownIconClassName()}> +
this.inputField.focus()} className={this.dropdownIconClassName()}>
@@ -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 index 49aba6fa27..b14e92fd18 100644 --- a/src/suggestion/suggestion-list-container.js +++ b/src/suggestion/suggestion-list-container.js @@ -138,10 +138,7 @@ class SuggestionListContainer extends React.Component { return (
this.onKeyDown(evt)}> - {this.props.suggestions.length ? ( - ) - : null - } +
); diff --git a/src/suggestion/suggestion-list.js b/src/suggestion/suggestion-list.js index e25b81d29e..bfc199a583 100644 --- 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() +
  • {renderNoSuggestion()}
  • } );