feat: replace unsafe deprecated methods (jquense#2216)

This replaces deprecated React methods from the components, leading the way to eventual StrictMode compliance.

jquense#1200 jquense#1777 jquense#1481 jquense#2126 jquense#2104 jquense#2105 jquense#1526

Author: cutterbl

src/BackgroundCells.js

@@ -24,10 +24,10 @@ class BackgroundCells extends React.Component {
     this._teardownSelectable()
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectable && !this.props.selectable) this._selectable()
+  componentDidUpdate(prevProps) {
+    if (!prevProps.selectable && this.props.selectable) this._selectable()
 
-    if (!nextProps.selectable && this.props.selectable)
+    if (prevProps.selectable && !this.props.selectable)
       this._teardownSelectable()
   }
 

src/Calendar.js

@@ -877,14 +877,14 @@ class Calendar extends React.Component {
     super(...args)
 
     this.state = {
-      context: this.getContext(this.props),
+      context: Calendar.getContext(this.props),
     }
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ context: this.getContext(nextProps) })
+  static getDerivedStateFromProps(nextProps) {
+    return { context: Calendar.getContext(nextProps) }
   }
 
-  getContext({
+  static getContext({
     startAccessor,
     endAccessor,
     allDayAccessor,

src/DateContentRow.js

@@ -48,10 +48,9 @@ class DateContentRow extends React.Component {
   getRowLimit() {
     /* Guessing this only gets called on the dummyRow */
     const eventHeight = getHeight(this.eventRowRef.current)
-    const headingHeight =
-      this.headingRowRef && this.headingRowRef.current
-        ? getHeight(this.headingRowRef.current)
-        : 0
+    const headingHeight = this.headingRowRef?.current
+      ? getHeight(this.headingRowRef.current)
+      : 0
     const eventSpace = getHeight(this.containerRef.current) - headingHeight
 
     return Math.max(Math.floor(eventSpace / eventHeight), 1)

src/DayColumn.js

@@ -38,15 +38,13 @@ class DayColumn extends React.Component {
     this.clearTimeIndicatorInterval()
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectable && !this.props.selectable) this._selectable()
-    if (!nextProps.selectable && this.props.selectable)
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevProps.selectable && this.props.selectable) this._selectable()
+    if (prevProps.selectable && !this.props.selectable)
       this._teardownSelectable()
 
-    this.slotMetrics = this.slotMetrics.update(nextProps)
-  }
+    this.slotMetrics = this.slotMetrics.update(this.props)
 
-  componentDidUpdate(prevProps, prevState) {
     const { getNow, isNow, localizer, date, min, max } = this.props
     const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes')
 

src/Month.js

@@ -27,6 +27,7 @@ class MonthView extends React.Component {
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
+      date: null,
     }
     this.containerRef = createRef()
     this.slotRowRef = createRef()
@@ -35,11 +36,11 @@ class MonthView extends React.Component {
     this._pendingSelection = []
   }
 
-  UNSAFE_componentWillReceiveProps({ date }) {
-    const { date: propsDate, localizer } = this.props
-    this.setState({
-      needLimitMeasure: localizer.neq(date, propsDate, 'month'),
-    })
+  static getDerivedStateFromProps({ date, localizer }, state) {
+    return {
+      date,
+      needLimitMeasure: localizer.neq(date, state.date, 'month'),
+    }
   }
 
   componentDidMount() {

src/TimeGrid.js

@@ -26,17 +26,17 @@ export default class TimeGrid extends Component {
     this.gutterRef = createRef()
   }
 
-  UNSAFE_componentWillMount() {
+  getSnapshotBeforeUpdate() {
     this.calculateScroll()
-  }
-
-  componentDidMount() {
     this.checkOverflow()
 
     if (this.props.width == null) {
       this.measureGutter()
     }
+    return null
+  }
 
+  componentDidMount() {
     this.applyScroll()
 
     window.addEventListener('resize', this.handleResize)
@@ -64,23 +64,7 @@ export default class TimeGrid extends Component {
   }
 
   componentDidUpdate() {
-    if (this.props.width == null) {
-      this.measureGutter()
-    }
-
     this.applyScroll()
-    //this.checkOverflow()
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { range, scrollToTime, localizer } = this.props
-    // When paginating, reset scroll
-    if (
-      localizer.neq(nextProps.range[0], range[0], 'minutes') ||
-      localizer.neq(nextProps.scrollToTime, scrollToTime, 'minutes')
-    ) {
-      this.calculateScroll(nextProps)
-    }
   }
 
   handleSelectAlldayEvent = (...args) => {

stories/props/scrollToTime.stories.js

@@ -36,5 +36,5 @@ ScrollToTime.args = {
   defaultView: Views.WEEK,
   events: demoEvents,
   localizer: mLocalizer,
-  scrollToTime: new Date(1972, 0, 1, 10),
+  scrollToTime: new Date(1972, 0, 1, 22),
 }