Bugfix/moroshko#624 (#2)

* updated .gitignore for IDE config

* moroshko#624 Refactor to move code out of deprecated componentWillRecieveProps

* moroshko#624 Refactor to move code out of deprecated componentWillRecieveProps in Autowhatever component

.gitignore

@@ -7,3 +7,4 @@ npm-debug.log
 yarn.lock
 *.log
 .DS
+.idea

src/Autosuggest.js

@@ -111,6 +111,32 @@ export default class Autosuggest extends Component {
     containerProps: {},
   };
 
+  static getDerivedStateFromProps(props, state) {
+    const {
+      suggestions,
+      inputProps: { value },
+      shouldRenderSuggestions,
+    } = props;
+    let nextState = {};
+
+    if (
+      suggestions.length > 0 &&
+      shouldRenderSuggestions(value, REASON_SUGGESTIONS_UPDATED)
+    ) {
+      if (state.isCollapsed && !this.justSelectedSuggestion) {
+        nextState = { isCollapsed: false };
+      }
+    } else {
+      nextState = {
+        highlightedSectionIndex: null,
+        highlightedSuggestionIndex: null,
+        highlightedSuggestion: null,
+        valueBeforeUpDown: null,
+      };
+    }
+    return nextState;
+  }
+
   constructor({ alwaysRenderSuggestions }) {
     super();
 
@@ -137,62 +163,39 @@ export default class Autosuggest extends Component {
     this.suggestionsContainer = this.autowhatever.itemsContainer;
   }
 
-  // eslint-disable-next-line camelcase, react/sort-comp
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // When highlightFirstSuggestion becomes deactivated, if the first suggestion was
-    // set, we should reset the suggestion back to the unselected default state.
-    const shouldResetHighlighting =
-      this.state.highlightedSuggestionIndex === 0 &&
-      this.props.highlightFirstSuggestion &&
-      !nextProps.highlightFirstSuggestion;
-
-    if (shallowEqualArrays(nextProps.suggestions, this.props.suggestions)) {
-      if (
-        nextProps.highlightFirstSuggestion &&
-        nextProps.suggestions.length > 0 &&
-        this.justPressedUpDown === false &&
-        this.justMouseEntered === false
-      ) {
-        this.highlightFirstSuggestion();
-      } else if (shouldResetHighlighting) {
-        this.resetHighlightedSuggestion();
-      }
-    } else {
-      if (this.willRenderSuggestions(nextProps, REASON_SUGGESTIONS_UPDATED)) {
-        if (this.state.isCollapsed && !this.justSelectedSuggestion) {
-          this.revealSuggestions();
-        }
-
-        if (shouldResetHighlighting) {
-          this.resetHighlightedSuggestion();
-        }
-      } else {
-        this.resetHighlightedSuggestion();
-      }
-    }
-  }
-
+  /**
+    When highlightFirstSuggestion becomes deactivated, if the first suggestion was
+    set, we should reset the suggestion back to the unselected default state.
+  */
   componentDidUpdate(prevProps, prevState) {
     const {
-      suggestions,
       onSuggestionHighlighted,
       highlightFirstSuggestion,
+      suggestions,
+      multiSection,
     } = this.props;
+    const { highlightedSuggestionIndex } = this.state;
+    const hasSuggestions = suggestions.length > 0;
+    const suggestionsDidChange = !shallowEqualArrays(
+      suggestions,
+      prevProps.suggestions
+    );
 
+    if (hasSuggestions && suggestionsDidChange && highlightFirstSuggestion) {
+      this.updateHighlightedSuggestion(multiSection ? 0 : null, 0);
+    }
     if (
-      !shallowEqualArrays(suggestions, prevProps.suggestions) &&
-      suggestions.length > 0 &&
-      highlightFirstSuggestion
+      prevProps.highlightFirstSuggestion &&
+      !highlightFirstSuggestion &&
+      highlightedSuggestionIndex === 0
     ) {
-      this.highlightFirstSuggestion();
-      return;
+      this.resetHighlightedSuggestion();
     }
-
     if (onSuggestionHighlighted) {
       const highlightedSuggestion = this.getHighlightedSuggestion();
       const prevHighlightedSuggestion = prevState.highlightedSuggestion;
 
-      if (highlightedSuggestion != prevHighlightedSuggestion) {
+      if (highlightedSuggestion !== prevHighlightedSuggestion) {
         onSuggestionHighlighted({
           suggestion: highlightedSuggestion,
         });
@@ -384,9 +387,9 @@ export default class Autosuggest extends Component {
     });
   };
 
-  highlightFirstSuggestion = () => {
-    this.updateHighlightedSuggestion(this.props.multiSection ? 0 : null, 0);
-  };
+  // highlightFirstSuggestion = () => {
+  //   this.updateHighlightedSuggestion(this.props.multiSection ? 0 : null, 0);
+  // };
 
   onDocumentMouseUp = () => {
     if (this.pressedSuggestion && !this.justSelectedSuggestion) {

src/Autowhatever.js

@@ -95,25 +95,18 @@ export default class Autowhatever extends Component {
     this.ensureHighlightedItemIsVisible();
   }
 
-  // eslint-disable-next-line camelcase, react/sort-comp
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.items !== this.props.items) {
-      this.setSectionsItems(nextProps);
-    }
+  componentDidUpdate(prevProps) {
+    const itemsDidChange = prevProps.items !== this.props.items;
 
-    if (
-      nextProps.items !== this.props.items ||
-      nextProps.multiSection !== this.props.multiSection
-    ) {
-      this.setSectionIterator(nextProps);
+    if (itemsDidChange) {
+      this.setSectionsItems(this.props);
     }
-
-    if (nextProps.theme !== this.props.theme) {
-      this.setTheme(nextProps);
+    if (itemsDidChange || prevProps.multiSection !== this.props.multiSection) {
+      this.setSectionIterator(this.props);
+    }
+    if (prevProps.theme !== this.props.theme) {
+      this.setTheme(this.props);
     }
-  }
-
-  componentDidUpdate() {
     this.ensureHighlightedItemIsVisible();
   }