From 69a7f53720ab28e235f20b3253b4cd387042dcd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Tue, 23 Apr 2019 15:31:38 +0200 Subject: [PATCH] fix(compat): upgrade RangeSlider lifecycle (#2290) --- .../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, }, }); }