changing name of deprecated react lifecycle methods

react-dates · Oct 30, 2020 · dbade5e · dbade5e
1 parent 624aef1
commit dbade5e
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 154 deletions.
diff --git 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
@@ -100,8 +100,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",
@@ -133,8 +133,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -31,7 +31,7 @@ describe('CalendarMonthGrid', () => {
       <CalendarMonthGrid numberOfMonths={12} initialMonth={initialMonth} />
     )).dive();
 
-    wrapper.instance().componentWillReceiveProps({
+    wrapper.instance().UNSAFE_componentWillReceiveProps({
       initialMonth,
       numberOfMonths: 24,
     });
@@ -51,7 +51,7 @@ describe('CalendarMonthGrid', () => {
       <CalendarMonthGrid numberOfMonths={12} initialMonth={initialMonth} />
     )).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
@@ -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(<DateInput id="date" />).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(<DateInput id="date" />).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
@@ -12,15 +12,15 @@ 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' } };
 
       it('updates the keyboardShortcuts', () => {
         const wrapper = shallow(<DayPickerKeyboardShortcuts {...prevProps} />).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(<DayPickerKeyboardShortcuts {...prevProps} />).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);
       });