fix(sffv): disable sffv input when few facet values FIX #2111

When the number of items displayed in a refinement list is lower than
the max number of facet displayed, the search for facet input should be
disabled.

This fix disable the input and adds a new classname to identify the
state of the input.

src/components/RefinementList/RefinementList.js

@@ -164,7 +164,8 @@ class RefinementList extends React.Component {
       <SearchBox ref={i => { this.searchbox = i; }}
         placeholder={this.props.searchPlaceholder}
         onChange={this.props.searchFacetValues}
-        onValidate={() => this.refineFirstValue()}/> :
+        onValidate={() => this.refineFirstValue()}
+        disabled={!this.props.isFromSearch && displayedFacetValues.length < limit}/> :
       null;
 
     const noResults = this.props.searchFacetValues && this.props.isFromSearch && this.props.facetValues.length === 0 ?

src/components/SearchBox/index.js

@@ -6,6 +6,7 @@ export default class SearchBox extends React.Component {
     placeholder: React.PropTypes.string.isRequired,
     onChange: React.PropTypes.func.isRequired,
     onValidate: React.PropTypes.func.isRequired,
+    disabled: React.PropTypes.bool,
   }
 
   clearInput() {
@@ -24,6 +25,7 @@ export default class SearchBox extends React.Component {
 
   render() {
     const {placeholder, onChange} = this.props;
+    const inputCssClasses = this.props.disabled ? 'sbx-sffv__input sbx-sffv__input-disabled' : 'sbx-sffv__input';
 
     return (
       <form noValidate="novalidate"
@@ -42,7 +44,7 @@ export default class SearchBox extends React.Component {
         </svg>
 
         <div role="search" className="sbx-sffv__wrapper">
-          <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className="sbx-sffv__input" onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} />
+          <input type="search" name="search" placeholder={placeholder} autoComplete="off" required="required" className={inputCssClasses} onChange={e => onChange(e.target.value)} ref={i => { this.input = i; }} disabled={this.props.disabled}/> :
           <button type="submit" title="Submit your search query." className="sbx-sffv__submit">
             <svg role="img" aria-label="Search">
               <use xlinkHref="#sbx-icon-search-12"></use>