FFE-189: Flyttet logikk for suggestions opp fra base-selector til acc…

…ount-selector/-multi
SpareBank1 · Sep 19, 2017 · a45d946 · a45d946
1 parent f37dd74
commit a45d946
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 169 deletions.
diff --git a/examples/account-selector.js b/examples/account-selector.js
@@ -17,28 +17,23 @@ class AccountSelectorExample extends Component {
   }
 
   onChange(value) {
-    console.log('onchange', value);
     this.setState({selectedAccount: null, value});
   }
 
   onBlur() {
-    console.log('onblur');
   }
 
   onFocus() {
-    console.log('onfocus');
   }
 
   onAccountSelected(account) {
-    console.log('account selected', account);
     this.setState({
       selectedAccount: account,
       value: account.name,
     });
   }
 
   onReset() {
-    console.log('onreset');
     this.setState({value: '', selectedAccount: null});
   }
 

diff --git a/src/selectors/account-selector-multi.js b/src/selectors/account-selector-multi.js
@@ -6,9 +6,26 @@ import AccountSuggestionMulti from '../account/account-suggestion-multi';
 import AccountNoMatch from '../account/account-nomatch';
 import { Account, Locale, KeyCodes } from '../util/types';
 import { accountFilter } from '../filter/filters';
+import Checkbox from 'ffe-checkbox-react';
 import StatusBar from '../suggestion/suggestion-list-status-bar';
 import txt from '../i18n/i18n';
 
+const allAccountsElement = {id: "all-accounts", accountNumber: ""};
+
+const renderSelectAll = (allSelected, locale) => (
+    <div className='ffe-account-suggestion__account--multi ffe-account-suggestion__select-all'>
+      <Checkbox
+        checked={allSelected}
+        name='ffe-account-suggestion__select-all-label'
+        inline={ false }
+        tabIndex={-1}
+        disabled={ true }
+      />
+      <div className='ffe-account-suggestion__content-wrapper'>
+        <span className='ffe-account-suggestion__name'>{txt[locale].SELECT_ALL}</span>
+      </div>
+    </div>);
+
 class AccountSelectorMulti extends React.Component {
   constructor(props) {
     super(props);
@@ -18,16 +35,35 @@ class AccountSelectorMulti extends React.Component {
     };
   }
 
+  filterSuggestions(value) {
+    const { accounts, showSelectAllOption } = this.props;
+    if (showSelectAllOption && !value) {
+      return [allAccountsElement,...accounts.filter(accountFilter(value))];
+    }
+    return accounts.filter(accountFilter(value));
+  }
+
+  onSuggestionSelect(suggestion) {
+    const { onAccountSelected } = this.props;
+    if (suggestion) {
+      if (suggestion.id === allAccountsElement.id) {
+        this.props.onSelectAll();
+        return;
+      }
+      onAccountSelected(suggestion);
+    }
+  }
+
   renderSuggestion(account) {
-    const { locale, selectedAccounts } = this.props;
+    const { locale, selectedAccounts, accounts } = this.props;
     const isSelected = selectedAccounts.filter(a => a.accountNumber === account.accountNumber);
-    return (
-      <AccountSuggestionMulti
+    if ( account.id !== allAccountsElement.id ) {
+      return (<AccountSuggestionMulti
         account={account}
         locale={locale}
         selected={isSelected.length > 0}
-      />
-    );
+              />);
+    } return renderSelectAll(selectedAccounts.length === accounts.length, locale);
   }
 
   onBlur() {
@@ -75,7 +111,7 @@ class AccountSelectorMulti extends React.Component {
 
 
   render() {
-    const { noMatches, onAccountSelected, accounts, locale, showSelectAllOption, onSelectAll, selectedAccounts } = this.props;
+    const { noMatches, onAccountSelected, locale, value } = this.props;
     return (
       <div
         className='ffe-account-selector'
@@ -85,20 +121,18 @@ class AccountSelectorMulti extends React.Component {
           renderSuggestion={(account) => this.renderSuggestion(account)}
           renderNoMatches={() => <AccountNoMatch value={noMatches} locale={locale}/>}
           suggestionDetails={this.renderSuggestionDetails()}
-          showSelectAllOption={showSelectAllOption}
           shouldHideSuggestionsOnSelect={false}
-          onSelectAll={onSelectAll}
           shouldSelectHighlightedOnTab={false}
-          allSelected={accounts.length === selectedAccounts.length}
           shouldHideSuggestionsOnBlur={false}
           shouldHideSuggestionsOnReset={true}
+          onSuggestionSelect={this.onSuggestionSelect}
           suggestionFilter={accountFilter}
           onSelect={onAccountSelected}
           locale={locale}
           onSuggestionListChange={(height) => {
             this.setState({ suggestionListHeight: height });
           }}
-          suggestions={accounts}
+          suggestions={this.filterSuggestions(value)}
           ref={(element) => {
             this.baseRef = element;
           }}
@@ -124,7 +158,8 @@ AccountSelectorMulti.propTypes = {
   selectedAccounts: arrayOf(Account),
   showSelectAllOption: bool,
   noMatches: string,
-  onBlur: func.isRequired
+  onBlur: func.isRequired,
+  value: string
 };
 
 export default AccountSelectorMulti;
diff --git a/src/selectors/account-selector.js b/src/selectors/account-selector.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import autoBind from 'react-auto-bind';
 import { func, string, arrayOf, bool } from 'prop-types';
 import BaseSelector from './base-selector';
 import AccountSuggestionItem from '../account/account-suggestion';
@@ -12,10 +13,9 @@ class AccountSelector extends Component {
 
   constructor(props) {
     super(props);
-    this.renderSuggestion = this.renderSuggestion.bind(this);
-    this.renderNoMatches = this.renderNoMatches.bind(this);
-    this.onAccountSelect = this.onAccountSelect.bind(this);
-    this.onInputChange = this.onInputChange.bind(this);
+    autoBind(this);
+
+    this.baseSelector = null;
 
     this.enableFilter = false;
   }
@@ -44,9 +44,21 @@ class AccountSelector extends Component {
     this.props.onChange(value);
   }
 
+  onSuggestionSelect(suggestion) {
+    if (suggestion) {
+        this.baseSelector.showOrHideSuggestions(false, () => this.onAccountSelect(suggestion));
+    }
+  }
+
+  filterSuggestions() {
+    const {  value, accounts } = this.props;
+    const suggFilt = createAccountFilter(this.enableFilter);
+    return accounts.filter(suggFilt(value));
+  }
+
+
   render() {
     const {
-      accounts,
       className,
       id,
       locale,
@@ -59,14 +71,16 @@ class AccountSelector extends Component {
         id={`${id}-container`}
       >
         <BaseSelector
+          ref={baseSelector => {this.baseSelector = baseSelector;}}
           renderSuggestion={this.renderSuggestion}
           renderNoMatches={this.renderNoMatches}
           shouldHideSuggestionsOnSelect={true}
           shouldSelectHighlightedOnTab={true}
           shouldHideSuggestionsOnBlur={true}
           shouldHideSuggestionsOnReset={false}
+          onSuggestionSelect={this.onSuggestionSelect}
           suggestionFilter={createAccountFilter(this.enableFilter)}
-          suggestions={accounts}
+          suggestions={this.filterSuggestions()}
           {...this.props}
           onSelect={this.onAccountSelect}
           onChange={this.onInputChange}
@@ -86,6 +100,7 @@ class AccountSelector extends Component {
 AccountSelector.propTypes = {
   accounts: arrayOf(Account),
   className: string,
+  value: string.isRequired,
   id: string.isRequired,
   locale: Locale.isRequired,
   noMatches: string,

diff --git a/src/selectors/base-selector.js b/src/selectors/base-selector.js
@@ -2,21 +2,14 @@ import React, { Component } from 'react';
 import { func, bool, number, string, arrayOf, object } from 'prop-types';
 import Input from './input-field';
 import SuggestionsList from '../suggestion/suggestion-list-container';
+import autoBind from 'react-auto-bind';
 import { KeyCodes } from '../util/types';
 
 class BaseSelector extends Component {
 
   constructor(props) {
     super(props);
-    this.onInputChange = this.onInputChange.bind(this);
-    this.showOrHideSuggestions = this.showOrHideSuggestions.bind(this);
-    this.onSuggestionSelect = this.onSuggestionSelect.bind(this);
-    this.onInputKeyDown = this.onInputKeyDown.bind(this);
-    this.onInputReset = this.onInputReset.bind(this);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.filterSuggestions = this.filterSuggestions.bind(this);
-    this.setFocus = this.setFocus.bind(this);
+    autoBind(this);
 
     this.state = {
       showSuggestions: false,
@@ -49,14 +42,6 @@ class BaseSelector extends Component {
     return 0;
   }
 
-  filterSuggestions() {
-    const { suggestions, suggestionFilter, value, showSelectAllOption } = this.props;
-    if (showSelectAllOption && !value) {
-      return [{ id: "all-accounts"},...suggestions.filter(suggestionFilter(value))];
-    }
-    return suggestions.filter(suggestionFilter(value));
-  }
-
   onInputChange(value) {
     this.setState({ showSuggestions: true, highlightedSuggestionIndex: -1 }, () => {
       this.props.onChange(value);
@@ -73,21 +58,6 @@ class BaseSelector extends Component {
     this.showOrHideSuggestions(false, this.props.onBlur);
   }
 
-  onSuggestionSelect(suggestion) {
-    if (suggestion) {
-      if (suggestion.id === "all-accounts") {
-        this.props.onSelectAll();
-        return;
-      }
-      const { shouldHideSuggestionsOnSelect, onSelect } = this.props;
-      if (shouldHideSuggestionsOnSelect) {
-        this.showOrHideSuggestions(false, () => onSelect(suggestion));
-        return;
-      }
-      onSelect(suggestion);
-    }
-  }
-
   onInputReset() {
     const shouldShowSuggestions = !this.props.shouldHideSuggestionsOnReset;
     this.showOrHideSuggestions(shouldShowSuggestions, this.props.onReset);
@@ -102,7 +72,7 @@ class BaseSelector extends Component {
 
   setNextHighlighted() {
     const { highlightedSuggestionIndex } = this.state;
-    const suggestions = this.filterSuggestions();
+    const {suggestions} = this.props;
     const nextHighlightedSuggestionIndex = highlightedSuggestionIndex === suggestions.length - 1 ? 0 : highlightedSuggestionIndex + 1;
     this.setState({ highlightedSuggestionIndex: nextHighlightedSuggestionIndex });
 
@@ -115,7 +85,7 @@ class BaseSelector extends Component {
 
   setPreviousHighlighted() {
     const { highlightedSuggestionIndex } = this.state;
-    const suggestions = this.filterSuggestions();
+    const {suggestions} = this.props;
     const nextHighlightedSuggestionIndex = highlightedSuggestionIndex === 0 ? suggestions.length - 1 : highlightedSuggestionIndex - 1;
     this.setState({ highlightedSuggestionIndex: nextHighlightedSuggestionIndex });
 
@@ -132,13 +102,13 @@ class BaseSelector extends Component {
   }
 
   setLastHighlighted() {
-    this.setState({ highlightedSuggestionIndex: this.filterSuggestions().length - 1 });
+    this.setState({ highlightedSuggestionIndex: this.props.suggestions.length - 1 });
     this.suggestionList.setScrollPosEnd();
   }
 
   onInputKeyDown(event) {
     const { showSuggestions, highlightedSuggestionIndex } = this.state;
-    const { shouldSelectHighlightedOnTab } = this.props;
+    const { shouldSelectHighlightedOnTab, suggestions, onSuggestionSelect } = this.props;
     const { which, altKey } = event;
     switch (which) {
       case KeyCodes.DOWN :
@@ -165,13 +135,13 @@ class BaseSelector extends Component {
         this.onInputReset();
         break;
       case KeyCodes.HOME:
-        if (showSuggestions && this.filterSuggestions().length !== 0) {
+        if (showSuggestions && suggestions.length !== 0) {
           this.setFirstHighlighted();
           event.preventDefault();
         }
         break;
       case KeyCodes.END:
-        if (showSuggestions && this.filterSuggestions().length !== 0) {
+        if (showSuggestions && suggestions.length !== 0) {
           this.setLastHighlighted();
           event.preventDefault();
         }
@@ -180,11 +150,11 @@ class BaseSelector extends Component {
         if (showSuggestions) {
           event.preventDefault();
         }
-        this.onSuggestionSelect(this.filterSuggestions()[highlightedSuggestionIndex]);
+        onSuggestionSelect(suggestions[highlightedSuggestionIndex]);
         break;
       case KeyCodes.TAB:
         if (showSuggestions && shouldSelectHighlightedOnTab) {
-          this.onSuggestionSelect(this.filterSuggestions()[highlightedSuggestionIndex]);
+          onSuggestionSelect(suggestions[highlightedSuggestionIndex]);
         }
     }
   }
@@ -197,6 +167,8 @@ class BaseSelector extends Component {
       ariaInvalid,
       id,
       name,
+      suggestions,
+      onSuggestionSelect
     } = this.props;
     const { showSuggestions, highlightedSuggestionIndex, suggestionListId } = this.state;
     return (
@@ -228,9 +200,9 @@ class BaseSelector extends Component {
             this.suggestionList = suggestionList;
           }}
           highlightedIndex={highlightedSuggestionIndex}
-          suggestions={this.filterSuggestions()}
+          suggestions={suggestions}
           heightMax={suggestionsHeightMax}
-          onSelect={this.onSuggestionSelect}
+          onSelect={onSuggestionSelect}
           id={suggestionListId}
         />}
       </div>
@@ -248,11 +220,8 @@ BaseSelector.propTypes = {
   shouldHideSuggestionsOnBlur: bool.isRequired,
   shouldHideSuggestionsOnReset: bool.isRequired,
   shouldShowSuggestionsOnFocus: bool,
-  showSelectAllOption: bool,
-  onSelectAll: func,
-  allSelected: bool,
+  onSuggestionSelect: func.isRequired,
   onChange: func,
-  locale: string.isRequired,
   onBlur: func,
   onReset: func,
   onFocus: func,
@@ -270,8 +239,6 @@ BaseSelector.defaultProps = {
   onFocus: () => {},
   onReset: () => {},
   onSuggestionListChange: () => {},
-  onSelectAll: () => {},
-  showSelectAllOption: false,
   ariaInvalid: false,
   placeholder: '',
   value: '',