New: Loads of Backend Updates to Clients and Indexers

frontend/src/Components/Form/AutoCompleteInput.js

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Autosuggest from 'react-autosuggest';
-import classNames from 'classnames';
 import jdu from 'jdu';
-import styles from './AutoCompleteInput.css';
+import AutoSuggestInput from './AutoSuggestInput';
 
 class AutoCompleteInput extends Component {
 
@@ -39,31 +37,6 @@ class AutoCompleteInput extends Component {
     });
   }
 
-  onInputKeyDown = (event) => {
-    const {
-      name,
-      value,
-      onChange
-    } = this.props;
-
-    const { suggestions } = this.state;
-
-    if (
-      event.key === 'Tab' &&
-      suggestions.length &&
-      suggestions[0] !== this.props.value
-    ) {
-      event.preventDefault();
-
-      if (value) {
-        onChange({
-          name,
-          value: suggestions[0]
-        });
-      }
-    }
-  }
-
   onInputBlur = () => {
     this.setState({ suggestions: [] });
   }
@@ -88,74 +61,37 @@ class AutoCompleteInput extends Component {
 
   render() {
     const {
-      className,
-      inputClassName,
       name,
       value,
-      placeholder,
-      hasError,
-      hasWarning
+      ...otherProps
     } = this.props;
 
     const { suggestions } = this.state;
 
-    const inputProps = {
-      className: classNames(
-        inputClassName,
-        hasError && styles.hasError,
-        hasWarning && styles.hasWarning,
-      ),
-      name,
-      value,
-      placeholder,
-      autoComplete: 'off',
-      spellCheck: false,
-      onChange: this.onInputChange,
-      onKeyDown: this.onInputKeyDown,
-      onBlur: this.onInputBlur
-    };
-
-    const theme = {
-      container: styles.inputContainer,
-      containerOpen: styles.inputContainerOpen,
-      suggestionsContainer: styles.container,
-      suggestionsList: styles.list,
-      suggestion: styles.listItem,
-      suggestionHighlighted: styles.highlighted
-    };
-
     return (
-      <div className={className}>
-        <Autosuggest
-          id={name}
-          inputProps={inputProps}
-          theme={theme}
-          suggestions={suggestions}
-          getSuggestionValue={this.getSuggestionValue}
-          renderSuggestion={this.renderSuggestion}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-        />
-      </div>
+      <AutoSuggestInput
+        {...otherProps}
+        name={name}
+        value={value}
+        suggestions={suggestions}
+        getSuggestionValue={this.getSuggestionValue}
+        renderSuggestion={this.renderSuggestion}
+        onInputBlur={this.onInputBlur}
+        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+      />
     );
   }
 }
 
 AutoCompleteInput.propTypes = {
-  className: PropTypes.string.isRequired,
-  inputClassName: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string,
   values: PropTypes.arrayOf(PropTypes.string).isRequired,
-  placeholder: PropTypes.string,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
   onChange: PropTypes.func.isRequired
 };
 
 AutoCompleteInput.defaultProps = {
-  className: styles.inputWrapper,
-  inputClassName: styles.input,
   value: ''
 };