From f6f1d8271ae2a0b47cff61c3ae3a02a45e979fcf Mon Sep 17 00:00:00 2001 From: Dustin Kane Date: Fri, 30 Oct 2020 11:28:20 -0700 Subject: [PATCH 1/2] changing name of deprecated react lifecycle methods --- .eslintrc | 9 +- package.json | 8 +- src/components/CalendarMonth.jsx | 2 +- src/components/CalendarMonthGrid.jsx | 2 +- src/components/DateInput.jsx | 2 +- src/components/DayPicker.jsx | 4 +- src/components/DayPickerKeyboardShortcuts.jsx | 2 +- src/components/DayPickerRangeController.jsx | 2 +- .../DayPickerSingleDateController.jsx | 4 +- test/components/CalendarMonthGrid_spec.jsx | 4 +- test/components/DateInput_spec.jsx | 6 +- .../DayPickerKeyboardShortcuts_spec.jsx | 6 +- .../DayPickerRangeController_spec.jsx | 233 ++++++++++-------- .../DayPickerSingleDateController_spec.jsx | 56 ++--- test/components/DayPicker_spec.jsx | 2 +- 15 files changed, 188 insertions(+), 154 deletions(-) diff --git a/.eslintrc b/.eslintrc index bcb6102a29..ae2cffb2b4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -28,7 +28,14 @@ "react/jsx-props-no-spreading": 0, // TODO: re-evaluate - "react/no-deprecated": 1, // TODO: update to UNSAFE_componentWillReceiveProps + "camelcase": ["error", { + "properties": "never", + "ignoreDestructuring": false, + "allow": [ + "UNSAFE_componentWillReceiveProps", + "UNSAFE_componentWillUpdate", + ], + }], }, "overrides": [ diff --git a/package.json b/package.json index 5382ecef77..0b8edc2951 100644 --- a/package.json +++ b/package.json @@ -101,8 +101,8 @@ "node-sass": "^4.12.0", "nyc": "^14.1.1", "raw-loader": "^0.5.1", - "react": "^0.14 || ^15.5.4 || ^16.1.1", - "react-dom": "^0.14 || ^15.5.4 || ^16.1.1", + "react": "^16.3.0 || ^17.0.0", + "react-dom": "^16.3.0 || ^17.0.0", "react-with-styles-interface-aphrodite": "^6.0.0", "react-with-styles-interface-css-compiler": "^2.2.0", "rimraf": "^2.6.3", @@ -135,8 +135,8 @@ "peerDependencies": { "@babel/runtime": "^7.0.0", "moment": "^2.18.1", - "react": "^0.14 || ^15.5.4 || ^16.1.1", - "react-dom": "^0.14 || ^15.5.4 || ^16.1.1", + "react": "^16.3.0 || ^17.0.0", + "react-dom": "^16.3.0 || ^17.0.0", "react-with-direction": "^1.3.1" }, "greenkeeper": { diff --git a/src/components/CalendarMonth.jsx b/src/components/CalendarMonth.jsx index 0c9002fbf2..3649b22339 100644 --- a/src/components/CalendarMonth.jsx +++ b/src/components/CalendarMonth.jsx @@ -109,7 +109,7 @@ class CalendarMonth extends React.PureComponent { this.setMonthTitleHeightTimeout = setTimeout(this.setMonthTitleHeight, 0); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { month, enableOutsideDays, firstDayOfWeek } = nextProps; const { month: prevMonth, diff --git a/src/components/CalendarMonthGrid.jsx b/src/components/CalendarMonthGrid.jsx index 849635d423..b19bd95776 100644 --- a/src/components/CalendarMonthGrid.jsx +++ b/src/components/CalendarMonthGrid.jsx @@ -139,7 +139,7 @@ class CalendarMonthGrid extends React.PureComponent { ); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { initialMonth, numberOfMonths, orientation } = nextProps; const { months } = this.state; diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx index 8a3467105f..31c7221cb9 100644 --- a/src/components/DateInput.jsx +++ b/src/components/DateInput.jsx @@ -102,7 +102,7 @@ class DateInput extends React.PureComponent { this.setState({ isTouchDevice: isTouchDevice() }); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { dateString } = this.state; if (dateString && nextProps.displayValue) { this.setState({ diff --git a/src/components/DayPicker.jsx b/src/components/DayPicker.jsx index f39aa8ec01..5b56d27932 100644 --- a/src/components/DayPicker.jsx +++ b/src/components/DayPicker.jsx @@ -281,7 +281,7 @@ class DayPicker extends React.PureComponent { this.setCalendarMonthWeeks(currentMonth); } - componentWillReceiveProps(nextProps, nextState) { + UNSAFE_componentWillReceiveProps(nextProps, nextState) { const { hidden, isFocused, @@ -361,7 +361,7 @@ class DayPicker extends React.PureComponent { } } - componentWillUpdate() { + UNSAFE_componentWillUpdate() { const { transitionDuration } = this.props; // Calculating the dimensions trigger a DOM repaint which diff --git a/src/components/DayPickerKeyboardShortcuts.jsx b/src/components/DayPickerKeyboardShortcuts.jsx index 4c4f4e2174..ce468ff37e 100644 --- a/src/components/DayPickerKeyboardShortcuts.jsx +++ b/src/components/DayPickerKeyboardShortcuts.jsx @@ -91,7 +91,7 @@ class DayPickerKeyboardShortcuts extends React.PureComponent { this.onKeyDown = this.onKeyDown.bind(this); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { phrases } = this.props; if (nextProps.phrases !== phrases) { this.keyboardShortcuts = getKeyboardShortcuts(nextProps.phrases); diff --git a/src/components/DayPickerRangeController.jsx b/src/components/DayPickerRangeController.jsx index 87c61f0544..90fdb0d5f1 100644 --- a/src/components/DayPickerRangeController.jsx +++ b/src/components/DayPickerRangeController.jsx @@ -270,7 +270,7 @@ export default class DayPickerRangeController extends React.PureComponent { this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { startDate, endDate, diff --git a/src/components/DayPickerSingleDateController.jsx b/src/components/DayPickerSingleDateController.jsx index 89be9f6ed8..bae2b12351 100644 --- a/src/components/DayPickerSingleDateController.jsx +++ b/src/components/DayPickerSingleDateController.jsx @@ -216,7 +216,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { this.isTouchDevice = isTouchDevice(); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { date, focused, @@ -344,7 +344,7 @@ export default class DayPickerSingleDateController extends React.PureComponent { } } - componentWillUpdate() { + UNSAFE_componentWillUpdate() { this.today = moment(); } diff --git a/test/components/CalendarMonthGrid_spec.jsx b/test/components/CalendarMonthGrid_spec.jsx index 209d7a3d92..e312d4b02f 100644 --- a/test/components/CalendarMonthGrid_spec.jsx +++ b/test/components/CalendarMonthGrid_spec.jsx @@ -31,7 +31,7 @@ describe('CalendarMonthGrid', () => { )).dive(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ initialMonth, numberOfMonths: 24, }); @@ -51,7 +51,7 @@ describe('CalendarMonthGrid', () => { )).dive(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ initialMonth, numberOfMonths: 12, firstVisibleMonthIndex: 0, diff --git a/test/components/DateInput_spec.jsx b/test/components/DateInput_spec.jsx index 7660846ebd..f16fbbb08a 100644 --- a/test/components/DateInput_spec.jsx +++ b/test/components/DateInput_spec.jsx @@ -121,13 +121,13 @@ describe('DateInput', () => { }); }); - describe('#componentWillReceiveProps', () => { + describe('#UNSAFE_componentWillReceiveProps', () => { describe('nextProps.displayValue exists', () => { it('sets state.dateString to \'\'', () => { const dateString = 'foo123'; const wrapper = shallow().dive(); wrapper.setState({ dateString }); - wrapper.instance().componentWillReceiveProps({ displayValue: '1991-07-13' }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ displayValue: '1991-07-13' }); expect(wrapper.state()).to.have.property('dateString', ''); }); }); @@ -137,7 +137,7 @@ describe('DateInput', () => { const dateString = 'foo123'; const wrapper = shallow().dive(); wrapper.setState({ dateString }); - wrapper.instance().componentWillReceiveProps({ displayValue: null }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ displayValue: null }); expect(wrapper.state()).to.have.property('dateString', dateString); }); }); diff --git a/test/components/DayPickerKeyboardShortcuts_spec.jsx b/test/components/DayPickerKeyboardShortcuts_spec.jsx index dd59f1f541..8470f0ee7d 100644 --- a/test/components/DayPickerKeyboardShortcuts_spec.jsx +++ b/test/components/DayPickerKeyboardShortcuts_spec.jsx @@ -12,7 +12,7 @@ import DayPickerKeyboardShortcuts from '../../src/components/DayPickerKeyboardSh const event = { preventDefault: sinon.stub(), stopPropagation: sinon.stub() }; describe('DayPickerKeyboardShortcuts', () => { - describe('#componentWillReceiveProps', () => { + describe('#UNSAFE_componentWillReceiveProps', () => { describe('when the phrases have been updated', () => { const prevProps = { phrases: { enterKey: 'foo', escape: 'bar', questionMark: 'baz' } }; const newProps = { phrases: { enterKey: 'bleep', escape: 'blah', questionMark: 'boop' } }; @@ -20,7 +20,7 @@ describe('DayPickerKeyboardShortcuts', () => { it('updates the keyboardShortcuts', () => { const wrapper = shallow().dive(); const prevKeyboardShortcuts = wrapper.instance().keyboardShortcuts; - wrapper.instance().componentWillReceiveProps(newProps); + wrapper.instance().UNSAFE_componentWillReceiveProps(newProps); const updatedKeyboardShortcuts = wrapper.instance().keyboardShortcuts; expect(prevKeyboardShortcuts).to.not.equal(updatedKeyboardShortcuts); }); @@ -33,7 +33,7 @@ describe('DayPickerKeyboardShortcuts', () => { it('does NOT update the keyboardShortcuts', () => { const wrapper = shallow().dive(); const prevKeyboardShortcuts = wrapper.instance().keyboardShortcuts; - wrapper.instance().componentWillReceiveProps(newProps); + wrapper.instance().UNSAFE_componentWillReceiveProps(newProps); const updatedKeyboardShortcuts = wrapper.instance().keyboardShortcuts; expect(prevKeyboardShortcuts).to.deep.equal(updatedKeyboardShortcuts); }); diff --git a/test/components/DayPickerRangeController_spec.jsx b/test/components/DayPickerRangeController_spec.jsx index f530b93f83..81172b689b 100644 --- a/test/components/DayPickerRangeController_spec.jsx +++ b/test/components/DayPickerRangeController_spec.jsx @@ -96,7 +96,7 @@ describe('DayPickerRangeController', () => { }); }); - describe('#componentWillReceiveProps', () => { + describe('#UNSAFE_componentWillReceiveProps', () => { const props = { ...DayPickerRangeController.defaultProps, onDatesChange() {}, @@ -113,7 +113,7 @@ describe('DayPickerRangeController', () => { ); const wrapper = shallow(); getStateForNewMonthSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, initialVisibleMonth: () => moment(), @@ -130,7 +130,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays: {} }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, initialVisibleMonth: () => moment(), @@ -148,7 +148,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, initialVisibleMonth: () => moment(), @@ -165,7 +165,7 @@ describe('DayPickerRangeController', () => { ); const wrapper = shallow(); getStateForNewMonthSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: null, initialVisibleMonth: () => moment(), @@ -183,7 +183,7 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(); wrapper.setState({ currentMonth }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: null, initialVisibleMonth: () => moment(), @@ -201,7 +201,7 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: null, initialVisibleMonth: () => moment(), @@ -219,7 +219,7 @@ describe('DayPickerRangeController', () => { ); const wrapper = shallow(); getStateForNewMonthSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, numberOfMonths: 5, }); @@ -235,7 +235,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays: {} }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, numberOfMonths: 5, }); @@ -252,7 +252,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, numberOfMonths: 5, }); @@ -265,7 +265,7 @@ describe('DayPickerRangeController', () => { const getStateForNewMonthSpy = sinon.spy(DayPickerRangeController.prototype, 'getStateForNewMonth'); const wrapper = shallow(); getStateForNewMonthSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, enableOutsideDays: true, }); @@ -278,7 +278,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays: {} }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, enableOutsideDays: true, }); @@ -292,7 +292,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthStub.returns({ currentMonth, visibleDays }); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, enableOutsideDays: true, }); @@ -318,7 +318,7 @@ describe('DayPickerRangeController', () => { /> )); deleteModifierFromRangeSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: nextStartDate, }); @@ -347,7 +347,7 @@ describe('DayPickerRangeController', () => { )); deleteModifierSpy.resetHistory(); addModifierSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: nextEndDate, }); @@ -374,7 +374,7 @@ describe('DayPickerRangeController', () => { getStateForNewMonthSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: nextEndDate, }); @@ -389,7 +389,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const startDate = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate }); expect(getCallsByModifier(addModifierSpy, 'selected-start').length).to.equal(0); }); @@ -397,7 +397,7 @@ describe('DayPickerRangeController', () => { const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier'); const startDate = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate }); expect(getCallsByModifier(deleteModifierSpy, 'selected-start').length).to.equal(0); }); }); @@ -408,7 +408,10 @@ describe('DayPickerRangeController', () => { const startDate = today; const newStartDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate: newStartDate, + }); const selectedStartCalls = getCallsByModifier(deleteModifierSpy, 'selected-start'); expect(selectedStartCalls.length).to.equal(1); expect(selectedStartCalls[0].args[1]).to.equal(startDate); @@ -419,7 +422,10 @@ describe('DayPickerRangeController', () => { const startDate = today; const newStartDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate: newStartDate, + }); const selectedStartCalls = getCallsByModifier(addModifierSpy, 'selected-start'); expect(selectedStartCalls.length).to.equal(1); expect(selectedStartCalls[0].args[1]).to.equal(newStartDate); @@ -433,7 +439,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const endDate = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate }); expect(getCallsByModifier(addModifierSpy, 'selected-end').length).to.equal(0); }); @@ -441,7 +447,7 @@ describe('DayPickerRangeController', () => { const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier'); const endDate = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate }); expect(getCallsByModifier(deleteModifierSpy, 'selected-end').length).to.equal(0); }); }); @@ -452,7 +458,7 @@ describe('DayPickerRangeController', () => { const endDate = today; const newEndDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: newEndDate }); const selectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end'); expect(selectedEndCalls.length).to.equal(1); expect(selectedEndCalls[0].args[1]).to.equal(endDate); @@ -463,7 +469,7 @@ describe('DayPickerRangeController', () => { const endDate = today; const newEndDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: newEndDate }); const selectedEndCalls = getCallsByModifier(addModifierSpy, 'selected-end'); expect(selectedEndCalls.length).to.equal(1); expect(selectedEndCalls[0].args[1]).to.equal(newEndDate); @@ -478,7 +484,11 @@ describe('DayPickerRangeController', () => { const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange'); const endDate = moment().add(10, 'days'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: null, endDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate: null, + endDate, + }); const hoverSpanCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-span'); expect(hoverSpanCalls.length).to.equal(0); }); @@ -489,7 +499,11 @@ describe('DayPickerRangeController', () => { const deleteModifierFromRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifierFromRange'); const startDate = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate, endDate: null }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate, + endDate: null, + }); const hoverSpanCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-span'); expect(hoverSpanCalls.length).to.equal(0); }); @@ -502,7 +516,7 @@ describe('DayPickerRangeController', () => { const endDate = today.clone().add(10, 'days'); const dayAfterEndDate = endDate.clone().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate, endDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, endDate }); const hoverSpanCalls = getCallsByModifier(deleteModifierFromRangeSpy, 'hovered-span'); expect(hoverSpanCalls.length).to.equal(1); expect(hoverSpanCalls[0].args[1]).to.equal(startDate); @@ -524,7 +538,7 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(( )); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: newStartDate, endDate, @@ -546,7 +560,7 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(( )); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: newStartDate, endDate, @@ -569,7 +583,7 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(( )); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, endDate: moment().add(11, 'day'), @@ -593,7 +607,7 @@ describe('DayPickerRangeController', () => { startDate={startDate} endDate={endDate} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, endDate: newEndDate, @@ -612,7 +626,7 @@ describe('DayPickerRangeController', () => { it('calls addModifierToRange with `after-hovered-start`', () => { const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: moment() }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: moment() }); const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start'); expect(afterHoverStartCalls.length).to.equal(1); }); @@ -622,7 +636,7 @@ describe('DayPickerRangeController', () => { const startDate = moment(); const startSpan = toISODateString(startDate.clone().add(1, 'day')); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate }); const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start'); expect(toISODateString(afterHoverStartCalls[0].args[1])).to.equal(startSpan); }); @@ -635,7 +649,11 @@ describe('DayPickerRangeController', () => { const wrapper = shallow(( )); - wrapper.instance().componentWillReceiveProps({ ...props, startDate, minimumNights }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate, + minimumNights, + }); const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start'); expect(toISODateString(afterHoverStartCalls[0].args[2])).to.equal(endSpan); }); @@ -646,7 +664,7 @@ describe('DayPickerRangeController', () => { const startDate = moment(); const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate }); const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start'); expect(afterHoverStartCalls.length).to.equal(0); }); @@ -657,7 +675,7 @@ describe('DayPickerRangeController', () => { const startDate = moment(); const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: null }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: null }); const afterHoverStartCalls = getCallsByModifier(addModifierToRangeSpy, 'after-hovered-start'); expect(afterHoverStartCalls.length).to.equal(0); }); @@ -667,7 +685,7 @@ describe('DayPickerRangeController', () => { it('does not call addModifierToRange with `after-hovered-start`', () => { const addModifierToRangeSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifierToRange'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: moment(), endDate: moment(), @@ -691,7 +709,7 @@ describe('DayPickerRangeController', () => { endDate={null} focusedInput={focusedInput} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput, @@ -713,7 +731,7 @@ describe('DayPickerRangeController', () => { focusedInput={focusedInput} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: moment().add(5, 'days'), focusedInput, @@ -738,7 +756,7 @@ describe('DayPickerRangeController', () => { focusedInput={START_DATE} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput, @@ -763,7 +781,7 @@ describe('DayPickerRangeController', () => { focusedInput={focusedInput} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput, startDate, @@ -789,7 +807,7 @@ describe('DayPickerRangeController', () => { startDate={startDate} minimumNights={5} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate: today, focusedInput: START_DATE, @@ -818,7 +836,7 @@ describe('DayPickerRangeController', () => { day.add(1, 'day'); } - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput: START_DATE, @@ -848,7 +866,7 @@ describe('DayPickerRangeController', () => { startDate={startDate} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput: END_DATE, @@ -868,7 +886,7 @@ describe('DayPickerRangeController', () => { startDate={startDate} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput: END_DATE, @@ -892,7 +910,7 @@ describe('DayPickerRangeController', () => { startDate={startDate} minimumNights={minimumNights} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate, focusedInput: END_DATE, @@ -920,7 +938,7 @@ describe('DayPickerRangeController', () => { isOutsideRange={isOutsideRangeStub} />); const prevCallCount = isOutsideRangeStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isOutsideRange: isOutsideRangeStub, }); @@ -930,7 +948,7 @@ describe('DayPickerRangeController', () => { it('calls isOutsideRange if changed', () => { const isOutsideRangeStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isOutsideRange: isOutsideRangeStub, }); @@ -956,7 +974,7 @@ describe('DayPickerRangeController', () => { const isOutsideRangeStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isOutsideRange: isOutsideRangeStub, @@ -969,7 +987,7 @@ describe('DayPickerRangeController', () => { const isOutsideRangeStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, isOutsideRange: isOutsideRangeStub, @@ -983,7 +1001,7 @@ describe('DayPickerRangeController', () => { const isOutsideRangeStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isOutsideRange: isOutsideRangeStub, @@ -1003,7 +1021,7 @@ describe('DayPickerRangeController', () => { isDayBlocked={isDayBlockedStub} />); const prevCallCount = isDayBlockedStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayBlocked: isDayBlockedStub, }); @@ -1013,7 +1031,7 @@ describe('DayPickerRangeController', () => { it('calls isDayBlocked if changed', () => { const isDayBlockedStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayBlocked: isDayBlockedStub, }); @@ -1039,7 +1057,7 @@ describe('DayPickerRangeController', () => { const isDayBlockedStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isDayBlocked: isDayBlockedStub, @@ -1052,7 +1070,7 @@ describe('DayPickerRangeController', () => { const isDayBlockedStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, isDayBlocked: isDayBlockedStub, @@ -1066,7 +1084,7 @@ describe('DayPickerRangeController', () => { const isDayBlockedStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isDayBlocked: isDayBlockedStub, @@ -1086,7 +1104,7 @@ describe('DayPickerRangeController', () => { isDayHighlighted={isDayHighlightedStub} />); const prevCallCount = isDayHighlightedStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayHighlighted: isDayHighlightedStub, }); @@ -1096,7 +1114,7 @@ describe('DayPickerRangeController', () => { it('calls isDayHighlighted if changed', () => { const isDayHighlightedStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayHighlighted: isDayHighlightedStub, }); @@ -1122,7 +1140,7 @@ describe('DayPickerRangeController', () => { const isDayHighlightedStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isDayHighlighted: isDayHighlightedStub, @@ -1135,7 +1153,7 @@ describe('DayPickerRangeController', () => { const isDayHighlightedStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isDayHighlighted: isDayHighlightedStub, @@ -1149,7 +1167,7 @@ describe('DayPickerRangeController', () => { const isDayHighlightedStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, isDayHighlighted: isDayHighlightedStub, @@ -1166,7 +1184,7 @@ describe('DayPickerRangeController', () => { const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier'); const wrapper = shallow(); wrapper.instance().today = today; - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(deleteModifierSpy, 'today'); expect(todayCalls.length).to.equal(0); }); @@ -1175,7 +1193,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const wrapper = shallow(); wrapper.instance().today = today; - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(addModifierSpy, 'today'); expect(todayCalls.length).to.equal(0); }); @@ -1186,7 +1204,7 @@ describe('DayPickerRangeController', () => { const deleteModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'deleteModifier'); const wrapper = shallow(); wrapper.instance().today = moment().subtract(1, 'day'); - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(deleteModifierSpy, 'today'); expect(todayCalls.length).to.equal(1); }); @@ -1195,7 +1213,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const wrapper = shallow(); wrapper.instance().today = moment().subtract(1, 'day'); - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(addModifierSpy, 'today'); expect(todayCalls.length).to.equal(1); }); @@ -1210,7 +1228,7 @@ describe('DayPickerRangeController', () => { {...props} getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, getMinNightsForHoverDate: getMinNightsForHoverDateStub, }); @@ -1225,7 +1243,7 @@ describe('DayPickerRangeController', () => { {...props} getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1240,7 +1258,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1257,7 +1275,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1279,7 +1297,7 @@ describe('DayPickerRangeController', () => { />, ); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1296,7 +1314,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1311,7 +1329,7 @@ describe('DayPickerRangeController', () => { {...props} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, }); @@ -1329,7 +1347,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1351,7 +1369,7 @@ describe('DayPickerRangeController', () => { />, ); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1368,7 +1386,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1383,7 +1401,7 @@ describe('DayPickerRangeController', () => { {...props} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, }); @@ -1402,7 +1420,7 @@ describe('DayPickerRangeController', () => { {...props} getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, getMinNightsForHoverDate: getMinNightsForHoverDateStub, }); @@ -1417,7 +1435,7 @@ describe('DayPickerRangeController', () => { {...props} getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1432,7 +1450,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1449,7 +1467,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1470,7 +1488,7 @@ describe('DayPickerRangeController', () => { />, ); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1487,7 +1505,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1502,7 +1520,7 @@ describe('DayPickerRangeController', () => { {...props} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, }); @@ -1520,7 +1538,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1541,7 +1559,7 @@ describe('DayPickerRangeController', () => { />, ); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1558,7 +1576,7 @@ describe('DayPickerRangeController', () => { getMinNightsForHoverDate={getMinNightsForHoverDateStub} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, getMinNightsForHoverDate: getMinNightsForHoverDateStub, @@ -1573,7 +1591,7 @@ describe('DayPickerRangeController', () => { {...props} />); wrapper.setState({ hoverDate: today }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, }); @@ -1597,7 +1615,7 @@ describe('DayPickerRangeController', () => { />, ); const newEndDate = endDate.clone().add(1, 'days'); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: newEndDate, }); @@ -1627,7 +1645,7 @@ describe('DayPickerRangeController', () => { (total, visibleDayArray) => total + Object.keys(visibleDayArray).length, 0, ); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate, startDate: newStartDate, @@ -1644,7 +1662,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const wrapper = shallow(); const startDate = moment(); - wrapper.instance().componentWillReceiveProps({ ...props, startDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, startDate }); const selectedStartNoSelectedEndCalls = getCallsByModifier(addModifierSpy, 'selected-start-no-selected-end'); expect(selectedStartNoSelectedEndCalls.length).to.equal(1); expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate); @@ -1657,7 +1675,10 @@ describe('DayPickerRangeController', () => { const startDate = moment(); const wrapper = shallow(); const newStartDate = startDate.clone().add(1, 'days'); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate: newStartDate, + }); const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-start-no-selected-end'); expect(selectedStartNoSelectedEndCalls.length).to.equal(1); expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(startDate); @@ -1671,7 +1692,7 @@ describe('DayPickerRangeController', () => { const addModifierSpy = sinon.spy(DayPickerRangeController.prototype, 'addModifier'); const wrapper = shallow(); const endDate = moment(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate }); const selectedStartNoSelectedEndCalls = getCallsByModifier(addModifierSpy, 'selected-end-no-selected-start'); expect(selectedStartNoSelectedEndCalls.length).to.equal(1); expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate); @@ -1684,7 +1705,10 @@ describe('DayPickerRangeController', () => { const endDate = moment(); const wrapper = shallow(); const newEndDate = endDate.clone().add(1, 'days'); - wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + endDate: newEndDate, + }); const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start'); expect(selectedStartNoSelectedEndCalls.length).to.equal(1); expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate); @@ -1697,7 +1721,10 @@ describe('DayPickerRangeController', () => { const endDate = moment(); const wrapper = shallow(); const newStartDate = endDate.clone().subtract(1, 'days'); - wrapper.instance().componentWillReceiveProps({ ...props, startDate: newStartDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ + ...props, + startDate: newStartDate, + }); const selectedStartNoSelectedEndCalls = getCallsByModifier(deleteModifierSpy, 'selected-end-no-selected-start'); expect(selectedStartNoSelectedEndCalls.length).to.equal(1); expect(selectedStartNoSelectedEndCalls[0].args[1]).to.equal(endDate); @@ -1720,7 +1747,7 @@ describe('DayPickerRangeController', () => { ); const newEndDate = endDate.clone().add(1, 'days'); addModifierToRangeSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ ...props, endDate: newEndDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate: newEndDate }); const beforeHoveredEndCalls = getCallsByModifier(addModifierToRangeSpy, 'before-hovered-end'); expect(beforeHoveredEndCalls.length).to.equal(1); expect(toISODateString(beforeHoveredEndCalls[0].args[1])).to.equal( @@ -1747,7 +1774,7 @@ describe('DayPickerRangeController', () => { ); const newStartDate = endDate.clone().subtract(3, 'days'); deleteModifierSpy.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, endDate, startDate: newStartDate, @@ -1776,7 +1803,7 @@ describe('DayPickerRangeController', () => { phrases={phrases} />); wrapper.setState({ phrases: phrasesObject }); - wrapper.instance().componentWillReceiveProps({ ...props, phrases }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, phrases }); expect(wrapper.state().phrases).to.equal(phrasesObject); }); }); @@ -1789,7 +1816,7 @@ describe('DayPickerRangeController', () => { phrases={phrases} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, phrases, @@ -1806,7 +1833,7 @@ describe('DayPickerRangeController', () => { phrases={phrases} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, phrases, @@ -1824,7 +1851,7 @@ describe('DayPickerRangeController', () => { phrases={phrases} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, phrases, }); @@ -1843,7 +1870,7 @@ describe('DayPickerRangeController', () => { phrases={{}} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: START_DATE, phrases, @@ -1861,7 +1888,7 @@ describe('DayPickerRangeController', () => { phrases={{}} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focusedInput: END_DATE, phrases, @@ -1878,7 +1905,7 @@ describe('DayPickerRangeController', () => { phrases={{}} />); wrapper.setState({ phrases: {} }); - wrapper.instance().componentWillReceiveProps({ ...props, phrases }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, phrases }); const newAvailableDatePhrase = wrapper.state().phrases.chooseAvailableDate; expect(newAvailableDatePhrase).to.equal(phrases.chooseAvailableDate); }); diff --git a/test/components/DayPickerSingleDateController_spec.jsx b/test/components/DayPickerSingleDateController_spec.jsx index 3a55baa0d7..77a36d24c6 100644 --- a/test/components/DayPickerSingleDateController_spec.jsx +++ b/test/components/DayPickerSingleDateController_spec.jsx @@ -40,7 +40,7 @@ describe('DayPickerSingleDateController', () => { }); }); - describe('#componentWillReceiveProps', () => { + describe('#UNSAFE_componentWillReceiveProps', () => { const props = { ...DayPickerSingleDateController.defaultProps, onDateChange() {}, @@ -54,7 +54,7 @@ describe('DayPickerSingleDateController', () => { const addModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'addModifier'); const date = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, date }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, date }); expect(getCallsByModifier(addModifierSpy, 'selected').length).to.equal(0); }); @@ -62,7 +62,7 @@ describe('DayPickerSingleDateController', () => { const deleteModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'deleteModifier'); const date = today; const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, date }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, date }); expect(getCallsByModifier(deleteModifierSpy, 'selected').length).to.equal(0); }); }); @@ -73,7 +73,7 @@ describe('DayPickerSingleDateController', () => { const date = today; const newDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, date: newDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, date: newDate }); const selectedCalls = getCallsByModifier(deleteModifierSpy, 'selected'); expect(selectedCalls.length).to.equal(1); expect(selectedCalls[0].args[1]).to.equal(date); @@ -84,7 +84,7 @@ describe('DayPickerSingleDateController', () => { const date = today; const newDate = moment().add(1, 'day'); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ ...props, date: newDate }); + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, date: newDate }); const selectedStartCalls = getCallsByModifier(addModifierSpy, 'selected'); expect(selectedStartCalls.length).to.equal(1); expect(selectedStartCalls[0].args[1]).to.equal(newDate); @@ -98,7 +98,7 @@ describe('DayPickerSingleDateController', () => { const isBlockedStub = sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked'); const wrapper = shallow(); isBlockedStub.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, }); expect(isBlockedStub.callCount).to.equal(0); @@ -124,7 +124,7 @@ describe('DayPickerSingleDateController', () => { const wrapper = shallow(); wrapper.setState({ visibleDays }); isBlockedStub.resetHistory(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, }); @@ -136,7 +136,7 @@ describe('DayPickerSingleDateController', () => { sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked').returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, }); @@ -149,7 +149,7 @@ describe('DayPickerSingleDateController', () => { sinon.stub(DayPickerSingleDateController.prototype, 'isBlocked').returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, }); @@ -170,7 +170,7 @@ describe('DayPickerSingleDateController', () => { /> )); const prevCallCount = isOutsideRangeStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isOutsideRange: isOutsideRangeStub, }); @@ -180,7 +180,7 @@ describe('DayPickerSingleDateController', () => { it('calls isOutsideRange if changed', () => { const isOutsideRangeStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isOutsideRange: isOutsideRangeStub, }); @@ -206,7 +206,7 @@ describe('DayPickerSingleDateController', () => { const isOutsideRangeStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isOutsideRange: isOutsideRangeStub, @@ -222,7 +222,7 @@ describe('DayPickerSingleDateController', () => { const isOutsideRangeStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isOutsideRange: isOutsideRangeStub, @@ -242,7 +242,7 @@ describe('DayPickerSingleDateController', () => { const isOutsideRangeStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isOutsideRange: isOutsideRangeStub, @@ -265,7 +265,7 @@ describe('DayPickerSingleDateController', () => { isDayBlocked={isDayBlockedStub} />); const prevCallCount = isDayBlockedStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayBlocked: isDayBlockedStub, }); @@ -275,7 +275,7 @@ describe('DayPickerSingleDateController', () => { it('calls isDayBlocked if changed', () => { const isDayBlockedStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayBlocked: isDayBlockedStub, }); @@ -301,7 +301,7 @@ describe('DayPickerSingleDateController', () => { const isDayBlockedStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayBlocked: isDayBlockedStub, @@ -314,7 +314,7 @@ describe('DayPickerSingleDateController', () => { const isDayBlockedStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayBlocked: isDayBlockedStub, @@ -328,7 +328,7 @@ describe('DayPickerSingleDateController', () => { const isDayBlockedStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayBlocked: isDayBlockedStub, @@ -348,7 +348,7 @@ describe('DayPickerSingleDateController', () => { isDayHighlighted={isDayHighlightedStub} />); const prevCallCount = isDayHighlightedStub.callCount; - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayHighlighted: isDayHighlightedStub, }); @@ -358,7 +358,7 @@ describe('DayPickerSingleDateController', () => { it('calls isDayHighlighted if changed', () => { const isDayHighlightedStub = sinon.stub(); const wrapper = shallow(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, isDayHighlighted: isDayHighlightedStub, }); @@ -384,7 +384,7 @@ describe('DayPickerSingleDateController', () => { const isDayHighlightedStub = sinon.stub(); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayHighlighted: isDayHighlightedStub, @@ -397,7 +397,7 @@ describe('DayPickerSingleDateController', () => { const isDayHighlightedStub = sinon.stub().returns(true); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayHighlighted: isDayHighlightedStub, @@ -411,7 +411,7 @@ describe('DayPickerSingleDateController', () => { const isDayHighlightedStub = sinon.stub().returns(false); const wrapper = shallow(); wrapper.setState({ visibleDays }); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ ...props, focused: true, isDayHighlighted: isDayHighlightedStub, @@ -428,7 +428,7 @@ describe('DayPickerSingleDateController', () => { const deleteModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'deleteModifier'); const wrapper = shallow(); wrapper.instance().today = today; - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(deleteModifierSpy, 'today'); expect(todayCalls.length).to.equal(0); }); @@ -437,7 +437,7 @@ describe('DayPickerSingleDateController', () => { const addModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'addModifier'); const wrapper = shallow(); wrapper.instance().today = today; - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(addModifierSpy, 'today'); expect(todayCalls.length).to.equal(0); }); @@ -448,7 +448,7 @@ describe('DayPickerSingleDateController', () => { const deleteModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'deleteModifier'); const wrapper = shallow(); wrapper.instance().today = moment().subtract(1, 'day'); - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(deleteModifierSpy, 'today'); expect(todayCalls.length).to.equal(1); }); @@ -457,7 +457,7 @@ describe('DayPickerSingleDateController', () => { const addModifierSpy = sinon.spy(DayPickerSingleDateController.prototype, 'addModifier'); const wrapper = shallow(); wrapper.instance().today = moment().subtract(1, 'day'); - wrapper.instance().componentWillReceiveProps(props); + wrapper.instance().UNSAFE_componentWillReceiveProps(props); const todayCalls = getCallsByModifier(addModifierSpy, 'today'); expect(todayCalls.length).to.equal(1); }); diff --git a/test/components/DayPicker_spec.jsx b/test/components/DayPicker_spec.jsx index 5f98b61e9b..4bb8012b62 100644 --- a/test/components/DayPicker_spec.jsx +++ b/test/components/DayPicker_spec.jsx @@ -949,7 +949,7 @@ describe('DayPicker', () => { }); }); - describe('#componentWillReceiveProps', () => { + describe('#UNSAFE_componentWillReceiveProps', () => { describe('props.orientation === VERTICAL_SCROLLABLE', () => { it('updates state.currentMonthScrollTop', () => { sinon.spy(DayPicker.prototype, 'setTransitionContainerRef'); From e17110620895234633d3660e9ab2d3621e2d9e5e Mon Sep 17 00:00:00 2001 From: Dustin Kane Date: Mon, 2 Nov 2020 08:30:32 -0800 Subject: [PATCH 2/2] fixing travis and removing react 17 --- .travis.yml | 2 -- package.json | 8 ++++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/.travis.yml b/.travis.yml index b55536c174..9fe002a8e2 100644 --- a/.travis.yml +++ b/.travis.yml @@ -23,8 +23,6 @@ env: global: - TEST=true matrix: - - REACT=0.14 - - REACT=15 - REACT=16 sudo: false matrix: diff --git a/package.json b/package.json index 0b8edc2951..fcc5c66ab8 100644 --- a/package.json +++ b/package.json @@ -101,8 +101,8 @@ "node-sass": "^4.12.0", "nyc": "^14.1.1", "raw-loader": "^0.5.1", - "react": "^16.3.0 || ^17.0.0", - "react-dom": "^16.3.0 || ^17.0.0", + "react": "^16.3.0", + "react-dom": "^16.3.0", "react-with-styles-interface-aphrodite": "^6.0.0", "react-with-styles-interface-css-compiler": "^2.2.0", "rimraf": "^2.6.3", @@ -135,8 +135,8 @@ "peerDependencies": { "@babel/runtime": "^7.0.0", "moment": "^2.18.1", - "react": "^16.3.0 || ^17.0.0", - "react-dom": "^16.3.0 || ^17.0.0", + "react": "^16.3.0", + "react-dom": "^16.3.0", "react-with-direction": "^1.3.1" }, "greenkeeper": {