Skip to content

Commit

Permalink
moroshko#624 Refactor to move code out of deprecated componentWillRec…
Browse files Browse the repository at this point in the history
…ieveProps
  • Loading branch information
lregla committed Jan 11, 2021
1 parent 7150b6f commit a71d406
Showing 1 changed file with 49 additions and 46 deletions.
95 changes: 49 additions & 46 deletions src/Autosuggest.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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,
});
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit a71d406

Please sign in to comment.