From e5a7442825426553794c1d39cd7f79893c489b4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Mon, 8 Apr 2019 17:59:23 +0200 Subject: [PATCH] fix(compat): upgrade RangeSlider lifecycle --- .../src/widgets/RangeSlider.js | 15 +++++++++------ stories/3rdPartyIntegrations.stories.js | 13 ++++++++----- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/react-instantsearch-dom/src/widgets/RangeSlider.js b/packages/react-instantsearch-dom/src/widgets/RangeSlider.js index 3ea3f0d926..7d353b8148 100644 --- a/packages/react-instantsearch-dom/src/widgets/RangeSlider.js +++ b/packages/react-instantsearch-dom/src/widgets/RangeSlider.js @@ -29,14 +29,17 @@ class Range extends React.Component { state = { currentValues: { min: this.props.min, max: this.props.max } }; - componentWillReceiveProps(sliderState) { - // @TODO: Derived State, maybe render - if (sliderState.canRefine) { + componentDidUpdate(prevProps) { + if ( + this.props.canRefine && + (prevProps.currentRefinement.min !== this.props.currentRefinement.min || + prevProps.currentRefinement.max !== this.props.currentRefinement.max) + ) { this.setState({ currentValues: { - min: sliderState.currentRefinement.min, - max: sliderState.currentRefinement.max - } + min: this.props.currentRefinement.min, + max: this.props.currentRefinement.max, + }, }); } } diff --git a/stories/3rdPartyIntegrations.stories.js b/stories/3rdPartyIntegrations.stories.js index 0a4219dfaa..0419e723f4 100644 --- a/stories/3rdPartyIntegrations.stories.js +++ b/stories/3rdPartyIntegrations.stories.js @@ -29,13 +29,16 @@ class Range extends Component { state = { currentValues: { min: this.props.min, max: this.props.max } }; - componentWillReceiveProps(sliderState) { - // @TODO: Derived State, maybe render - if (sliderState.canRefine) { + componentDidUpdate(prevProps) { + if ( + this.props.canRefine && + (prevProps.currentRefinement.min !== this.props.currentRefinement.min || + prevProps.currentRefinement.max !== this.props.currentRefinement.max) + ) { this.setState({ currentValues: { - min: sliderState.currentRefinement.min, - max: sliderState.currentRefinement.max, + min: this.props.currentRefinement.min, + max: this.props.currentRefinement.max, }, }); }