Merge react-autowhatever in react-autosuggest (#736)

* Merge react-autowhatever in react-autosuggest with tests * Fix eslint
moroshko · Apr 25, 2020 · b6155ae · b6155ae
1 parent cbd8f96
commit b6155ae
Show file tree

Hide file tree

Showing 22 changed files with 1,614 additions and 106 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,8 @@
     "es6-promise": "^4.2.8",
     "prop-types": "^15.7.2",
     "react-autowhatever": "^10.2.1",
+    "react-themeable": "^1.1.0",
+    "section-iterator": "^2.0.0",
     "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {

diff --git a/src/Autosuggest.js b/src/Autosuggest.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowEqualArrays from 'shallow-equal/arrays';
-import Autowhatever from 'react-autowhatever';
+import Autowhatever from './Autowhatever';
 import { defaultTheme, mapToAutowhateverTheme } from './theme';
 
 const alwaysTrue = () => true;
-const defaultShouldRenderSuggestions = value => value.trim().length > 0;
+const defaultShouldRenderSuggestions = (value) => value.trim().length > 0;
 const defaultRenderSuggestionsContainer = ({ containerProps, children }) => (
   <div {...containerProps}>{children}</div>
 );
@@ -81,7 +81,7 @@ export default class Autosuggest extends Component {
     focusInputOnSuggestionClick: PropTypes.bool,
     highlightFirstSuggestion: PropTypes.bool,
     theme: PropTypes.object,
-    id: PropTypes.string
+    id: PropTypes.string,
   };
 
   static defaultProps = {
@@ -92,7 +92,7 @@ export default class Autosuggest extends Component {
     focusInputOnSuggestionClick: true,
     highlightFirstSuggestion: false,
     theme: defaultTheme,
-    id: '1'
+    id: '1',
   };
 
   constructor({ alwaysRenderSuggestions }) {
@@ -104,7 +104,7 @@ export default class Autosuggest extends Component {
       highlightedSectionIndex: null,
       highlightedSuggestionIndex: null,
       highlightedSuggestion: null,
-      valueBeforeUpDown: null
+      valueBeforeUpDown: null,
     };
 
     this.justPressedUpDown = false;
@@ -147,7 +147,7 @@ export default class Autosuggest extends Component {
     const {
       suggestions,
       onSuggestionHighlighted,
-      highlightFirstSuggestion
+      highlightFirstSuggestion,
     } = this.props;
 
     if (
@@ -165,7 +165,7 @@ export default class Autosuggest extends Component {
 
       if (highlightedSuggestion != prevHighlightedSuggestion) {
         onSuggestionHighlighted({
-          suggestion: highlightedSuggestion
+          suggestion: highlightedSuggestion,
         });
       }
     }
@@ -177,7 +177,7 @@ export default class Autosuggest extends Component {
   }
 
   updateHighlightedSuggestion(sectionIndex, suggestionIndex, prevValue) {
-    this.setState(state => {
+    this.setState((state) => {
       let { valueBeforeUpDown } = state;
 
       if (suggestionIndex === null) {
@@ -196,13 +196,13 @@ export default class Autosuggest extends Component {
           suggestionIndex === null
             ? null
             : this.getSuggestion(sectionIndex, suggestionIndex),
-        valueBeforeUpDown
+        valueBeforeUpDown,
       };
     });
   }
 
   resetHighlightedSuggestion(shouldResetValueBeforeUpDown = true) {
-    this.setState(state => {
+    this.setState((state) => {
       const { valueBeforeUpDown } = state;
 
       return {
@@ -211,14 +211,14 @@ export default class Autosuggest extends Component {
         highlightedSuggestion: null,
         valueBeforeUpDown: shouldResetValueBeforeUpDown
           ? null
-          : valueBeforeUpDown
+          : valueBeforeUpDown,
       };
     });
   }
 
   revealSuggestions() {
     this.setState({
-      isCollapsed: false
+      isCollapsed: false,
     });
   }
 
@@ -228,7 +228,7 @@ export default class Autosuggest extends Component {
       highlightedSuggestionIndex: null,
       highlightedSuggestion: null,
       valueBeforeUpDown: null,
-      isCollapsed: true
+      isCollapsed: true,
     });
   }
 
@@ -272,11 +272,11 @@ export default class Autosuggest extends Component {
     return {
       sectionIndex:
         typeof sectionIndex === 'string' ? parseInt(sectionIndex, 10) : null,
-      suggestionIndex: parseInt(suggestionIndex, 10)
+      suggestionIndex: parseInt(suggestionIndex, 10),
     };
   }
 
-  onDocumentMouseDown = event => {
+  onDocumentMouseDown = (event) => {
     this.justClickedOnSuggestionsContainer = false;
 
     let node =
@@ -335,7 +335,7 @@ export default class Autosuggest extends Component {
     return suggestions.length > 0 && shouldRenderSuggestions(value);
   }
 
-  storeAutowhateverRef = autowhatever => {
+  storeAutowhateverRef = (autowhatever) => {
     if (autowhatever !== null) {
       this.autowhatever = autowhatever;
     }
@@ -366,7 +366,7 @@ export default class Autosuggest extends Component {
     this.pressedSuggestion = null;
   };
 
-  onSuggestionMouseDown = event => {
+  onSuggestionMouseDown = (event) => {
     // Checking if this.justSelectedSuggestion is already true to not duplicate touch events in chrome
     // See: https://github.com/facebook/react/issues/9809#issuecomment-413978405
     if (!this.justSelectedSuggestion) {
@@ -385,15 +385,15 @@ export default class Autosuggest extends Component {
     const {
       alwaysRenderSuggestions,
       onSuggestionSelected,
-      onSuggestionsFetchRequested
+      onSuggestionsFetchRequested,
     } = this.props;
 
     onSuggestionSelected && onSuggestionSelected(event, data);
 
     if (alwaysRenderSuggestions) {
       onSuggestionsFetchRequested({
         value: data.suggestionValue,
-        reason: 'suggestion-selected'
+        reason: 'suggestion-selected',
       });
     } else {
       this.onSuggestionsClearRequested();
@@ -402,7 +402,7 @@ export default class Autosuggest extends Component {
     this.resetHighlightedSuggestion();
   };
 
-  onSuggestionClick = event => {
+  onSuggestionClick = (event) => {
     const { alwaysRenderSuggestions, focusInputOnSuggestionClick } = this.props;
     const { sectionIndex, suggestionIndex } = this.getSuggestionIndices(
       this.findSuggestionElement(event.target)
@@ -418,7 +418,7 @@ export default class Autosuggest extends Component {
       suggestionValue: clickedSuggestionValue,
       suggestionIndex: suggestionIndex,
       sectionIndex,
-      method: 'click'
+      method: 'click',
     });
 
     if (!alwaysRenderSuggestions) {
@@ -448,13 +448,13 @@ export default class Autosuggest extends Component {
       highlightedSuggestionIndex: null,
       highlightedSuggestion: null,
       valueBeforeUpDown: null,
-      isCollapsed: !shouldRender
+      isCollapsed: !shouldRender,
     });
 
     onBlur && onBlur(this.blurEvent, { highlightedSuggestion });
   };
 
-  onSuggestionMouseLeave = event => {
+  onSuggestionMouseLeave = (event) => {
     this.resetHighlightedSuggestion(false); // shouldResetValueBeforeUpDown
 
     if (
@@ -486,7 +486,7 @@ export default class Autosuggest extends Component {
       onMouseDown: this.onSuggestionMouseDown,
       onTouchStart: this.onSuggestionTouchStart,
       onTouchMove: this.onSuggestionTouchMove,
-      onClick: this.onSuggestionClick
+      onClick: this.onSuggestionClick,
     };
   };
 
@@ -504,7 +504,7 @@ export default class Autosuggest extends Component {
     return renderSuggestionsContainer({
       containerProps,
       children,
-      query: this.getQuery()
+      query: this.getQuery(),
     });
   };
 
@@ -522,14 +522,14 @@ export default class Autosuggest extends Component {
       theme,
       getSuggestionValue,
       alwaysRenderSuggestions,
-      highlightFirstSuggestion
+      highlightFirstSuggestion,
     } = this.props;
     const {
       isFocused,
       isCollapsed,
       highlightedSectionIndex,
       highlightedSuggestionIndex,
-      valueBeforeUpDown
+      valueBeforeUpDown,
     } = this.state;
     const shouldRenderSuggestions = alwaysRenderSuggestions
       ? alwaysTrue
@@ -542,7 +542,7 @@ export default class Autosuggest extends Component {
     const items = isOpen ? suggestions : [];
     const autowhateverInputProps = {
       ...inputProps,
-      onFocus: event => {
+      onFocus: (event) => {
         if (
           !this.justSelectedSuggestion &&
           !this.justClickedOnSuggestionsContainer
@@ -551,7 +551,7 @@ export default class Autosuggest extends Component {
 
           this.setState({
             isFocused: true,
-            isCollapsed: !shouldRender
+            isCollapsed: !shouldRender,
           });
 
           onFocus && onFocus(event);
@@ -561,7 +561,7 @@ export default class Autosuggest extends Component {
           }
         }
       },
-      onBlur: event => {
+      onBlur: (event) => {
         if (this.justClickedOnSuggestionsContainer) {
           this.input.focus();
           return;
@@ -574,7 +574,7 @@ export default class Autosuggest extends Component {
           this.onSuggestionsClearRequested();
         }
       },
-      onChange: event => {
+      onChange: (event) => {
         const { value } = event.target;
         const shouldRender = shouldRenderSuggestions(value);
 
@@ -590,10 +590,10 @@ export default class Autosuggest extends Component {
             : {
                 highlightedSectionIndex: null,
                 highlightedSuggestionIndex: null,
-                highlightedSuggestion: null
+                highlightedSuggestion: null,
               }),
           valueBeforeUpDown: null,
-          isCollapsed: !shouldRender
+          isCollapsed: !shouldRender,
         });
 
         if (shouldRender) {
@@ -612,14 +612,14 @@ export default class Autosuggest extends Component {
               if (shouldRenderSuggestions(value)) {
                 onSuggestionsFetchRequested({
                   value,
-                  reason: 'suggestions-revealed'
+                  reason: 'suggestions-revealed',
                 });
                 this.revealSuggestions();
               }
             } else if (suggestions.length > 0) {
               const {
                 newHighlightedSectionIndex,
-                newHighlightedItemIndex
+                newHighlightedItemIndex,
               } = data;
 
               let newValue;
@@ -682,7 +682,7 @@ export default class Autosuggest extends Component {
                 suggestionValue: newValue,
                 suggestionIndex: highlightedSuggestionIndex,
                 sectionIndex: highlightedSectionIndex,
-                method: 'enter'
+                method: 'enter',
               });
 
               this.justSelectedSuggestion = true;
@@ -717,7 +717,7 @@ export default class Autosuggest extends Component {
                 if (shouldRenderSuggestions(newValue)) {
                   onSuggestionsFetchRequested({
                     value: newValue,
-                    reason: 'escape-pressed'
+                    reason: 'escape-pressed',
                   });
                 } else {
                   this.onSuggestionsClearRequested();
@@ -740,10 +740,10 @@ export default class Autosuggest extends Component {
         }
 
         onKeyDown && onKeyDown(event);
-      }
+      },
     };
     const renderSuggestionData = {
-      query: this.getQuery()
+      query: this.getQuery(),
     };
 
     return (