From 54434322fe51f52514dd9a464320e604ab66c5cf Mon Sep 17 00:00:00 2001 From: Colin Cummings Date: Fri, 22 Jun 2018 09:31:30 -0500 Subject: [PATCH] fix-unsafe-lifecycles (#1374) - change componentWillReceiveProps to componentDidUpdate - update .eslintrc --- .eslintrc | 4 ++-- src/calendar.jsx | 14 +++++++------- src/index.jsx | 28 +++++++++++++++++++++------- 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/.eslintrc b/.eslintrc index 7b8ceebe5..732ecf48c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -31,8 +31,8 @@ "react/jsx-uses-vars": 2, "react/no-danger": 2, "react/no-deprecated": 2, - "react/no-did-mount-set-state": 2, - "react/no-did-update-set-state": 2, + "react/no-did-mount-set-state": 0, + "react/no-did-update-set-state": 0, "react/no-direct-mutation-state": 2, "react/no-multi-comp": 2, "react/no-set-state": 0, diff --git a/src/calendar.jsx b/src/calendar.jsx index 6691cfc89..53a859513 100644 --- a/src/calendar.jsx +++ b/src/calendar.jsx @@ -142,20 +142,20 @@ export default class Calendar extends React.Component { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps) { if ( - nextProps.preSelection && - !isSameDay(nextProps.preSelection, this.props.preSelection) + this.props.preSelection && + !isSameDay(this.props.preSelection, prevProps.preSelection) ) { this.setState({ - date: this.localizeDate(nextProps.preSelection) + date: this.localizeDate(this.props.preSelection) }); } else if ( - nextProps.openToDate && - !isSameDay(nextProps.openToDate, this.props.openToDate) + this.props.openToDate && + !isSameDay(this.props.openToDate, prevProps.openToDate) ) { this.setState({ - date: this.localizeDate(nextProps.openToDate) + date: this.localizeDate(this.props.openToDate) }); } } diff --git a/src/index.jsx b/src/index.jsx index 0a448fbff..ff60ccacc 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -11,6 +11,7 @@ import { isDate, isBefore, isAfter, + equals, setTime, getSecond, getMinute, @@ -52,6 +53,14 @@ function hasPreSelectionChanged(date1, date2) { return date1 !== date2; } +function hasSelectionChanged(date1, date2) { + if (date1 && date2) { + return !equals(date1, date2); + } + + return false; +} + /** * General datepicker component. */ @@ -179,19 +188,24 @@ export default class DatePicker extends React.Component { this.state = this.calcInitialState(); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps, prevState) { if ( - this.props.inline && - hasPreSelectionChanged(this.props.selected, nextProps.selected) + prevProps.inline && + hasPreSelectionChanged(prevProps.selected, this.props.selected) ) { - this.setPreSelection(nextProps.selected); + this.setPreSelection(this.props.selected); } - if (this.props.highlightDates !== nextProps.highlightDates) { + if (prevProps.highlightDates !== this.props.highlightDates) { this.setState({ - highlightDates: getHightLightDaysMap(nextProps.highlightDates) + highlightDates: getHightLightDaysMap(this.props.highlightDates) }); } - if (!this.state.focused) this.setState({ inputValue: null }); + if ( + !prevState.focused && + hasSelectionChanged(prevProps.selected, this.props.selected) + ) { + this.setState({ inputValue: null }); + } } componentWillUnmount() {