<React.StrictMode>-compliance

examples/App.js

@@ -168,5 +168,10 @@ class Example extends React.Component {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  render(<Example />, document.getElementById('app'))
+  render(
+    <React.StrictMode>
+      <Example />
+    </React.StrictMode>,
+    document.getElementById('app')
+  )
 })

src/BackgroundCells.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import * as dates from './utils/dates'
@@ -15,6 +14,7 @@ class BackgroundCells extends React.Component {
     this.state = {
       selecting: false,
     }
+    this.ref = React.createRef()
   }
 
   componentDidMount() {
@@ -25,10 +25,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()
   }
 
@@ -44,7 +44,7 @@ class BackgroundCells extends React.Component {
     let current = getNow()
 
     return (
-      <div className="rbc-row-bg">
+      <div ref={this.ref} className="rbc-row-bg">
         {range.map((date, index) => {
           let selected = selecting && index >= startIdx && index <= endIdx
           const { className, style } = getters.dayProp(date)
@@ -71,13 +71,13 @@ class BackgroundCells extends React.Component {
   }
 
   _selectable() {
-    let node = findDOMNode(this)
+    let node = this.ref.current
     let selector = (this._selector = new Selection(this.props.container, {
       longPressThreshold: this.props.longPressThreshold,
     }))
 
     let selectorClicksHandler = (point, actionType) => {
-      if (!isEvent(findDOMNode(this), point)) {
+      if (!isEvent(node, point)) {
         let rowBox = getBoundsForNode(node)
         let { range, rtl } = this.props
 
@@ -128,7 +128,7 @@ class BackgroundCells extends React.Component {
     selector.on('beforeSelect', box => {
       if (this.props.selectable !== 'ignoreEvents') return
 
-      return !isEvent(findDOMNode(this), box)
+      return !isEvent(this.ref.current, box)
     })
 
     selector.on('click', point => selectorClicksHandler(point, 'click'))

src/Calendar.js

@@ -493,16 +493,16 @@ class Calendar extends React.Component {
      * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
      * ```
      */
-	slotPropGetter: PropTypes.func,
-	
-	/**
-	 * Optionally provide a function that returns an object of props to be applied 
-	 * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
-	 * ```js
-	 * () => { style?: Object }
-	 * ```
-	 */
-	slotGroupPropGetter: PropTypes.func,
+    slotPropGetter: PropTypes.func,
+
+    /**
+     * Optionally provide a function that returns an object of props to be applied
+     * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
+     * ```js
+     * () => { style?: Object }
+     * ```
+     */
+    slotGroupPropGetter: PropTypes.func,
 
     /**
      * Optionally provide a function that returns an object of className or style props
@@ -767,14 +767,15 @@ class Calendar extends React.Component {
   constructor(...args) {
     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,
@@ -784,8 +785,8 @@ class Calendar extends React.Component {
     resourceIdAccessor,
     resourceTitleAccessor,
     eventPropGetter,
-	slotPropGetter,
-	slotGroupPropGetter,
+    slotPropGetter,
+    slotGroupPropGetter,
     dayPropGetter,
     view,
     views,
@@ -804,9 +805,9 @@ class Calendar extends React.Component {
         eventProp: (...args) =>
           (eventPropGetter && eventPropGetter(...args)) || {},
         slotProp: (...args) =>
-		  (slotPropGetter && slotPropGetter(...args)) || {},
-		slotGroupProp: (...args) =>
-		  (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
+          (slotPropGetter && slotPropGetter(...args)) || {},
+        slotGroupProp: (...args) =>
+          (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
         dayProp: (...args) => (dayPropGetter && dayPropGetter(...args)) || {},
       },
       components: defaults(components[view] || {}, omit(components, names), {

src/DateContentRow.js

@@ -3,7 +3,6 @@ import getHeight from 'dom-helpers/height'
 import qsa from 'dom-helpers/querySelectorAll'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 
 import * as dates from './utils/dates'
 import BackgroundCells from './BackgroundCells'
@@ -16,6 +15,7 @@ class DateContentRow extends React.Component {
     super(...args)
 
     this.slotMetrics = DateSlotMetrics.getSlotMetrics()
+    this.ref = React.createRef()
   }
 
   handleSelectSlot = slot => {
@@ -27,7 +27,7 @@ class DateContentRow extends React.Component {
   handleShowMore = (slot, target) => {
     const { range, onShowMore } = this.props
     let metrics = this.slotMetrics(this.props)
-    let row = qsa(findDOMNode(this), '.rbc-row-bg')[0]
+    let row = qsa(this.ref.current, '.rbc-row-bg')[0]
 
     let cell
     if (row) cell = row.children[slot - 1]
@@ -46,13 +46,13 @@ class DateContentRow extends React.Component {
 
   getContainer = () => {
     const { container } = this.props
-    return container ? container() : findDOMNode(this)
+    return container ? container() : this.ref.current
   }
 
   getRowLimit() {
     let eventHeight = getHeight(this.eventRow)
     let headingHeight = this.headingRow ? getHeight(this.headingRow) : 0
-    let eventSpace = getHeight(findDOMNode(this)) - headingHeight
+    let eventSpace = getHeight(this.ref.current) - headingHeight
 
     return Math.max(Math.floor(eventSpace / eventHeight), 1)
   }
@@ -73,7 +73,7 @@ class DateContentRow extends React.Component {
   renderDummy = () => {
     let { className, range, renderHeader } = this.props
     return (
-      <div className={className}>
+      <div ref={this.ref} className={className}>
         <div className="rbc-row-content">
           {renderHeader && (
             <div className="rbc-row" ref={this.createHeadingRef}>
@@ -138,7 +138,7 @@ class DateContentRow extends React.Component {
     }
 
     return (
-      <div className={className}>
+      <div ref={this.ref} className={className}>
         <BackgroundCells
           date={date}
           getNow={getNow}

src/DayColumn.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import Selection, { getBoundsForNode, isEvent } from './Selection'
@@ -22,6 +21,7 @@ class DayColumn extends React.Component {
     super(...args)
 
     this.slotMetrics = TimeSlotUtils.getSlotMetrics(this.props)
+    this.ref = React.createRef()
   }
 
   componentDidMount() {
@@ -37,15 +37,14 @@ 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 getNowChanged = !dates.eq(
       prevProps.getNow(),
       this.props.getNow(),
@@ -127,6 +126,7 @@ class DayColumn extends React.Component {
 
     return (
       <div
+        ref={this.ref}
         style={style}
         className={clsx(
           className,
@@ -238,8 +238,8 @@ class DayColumn extends React.Component {
   }
 
   _selectable = () => {
-    let node = findDOMNode(this)
-    let selector = (this._selector = new Selection(() => findDOMNode(this), {
+    let node = this.ref.current
+    let selector = (this._selector = new Selection(() => this.ref.current, {
       longPressThreshold: this.props.longPressThreshold,
     }))
 
@@ -299,7 +299,7 @@ class DayColumn extends React.Component {
     }
 
     let selectorClicksHandler = (box, actionType) => {
-      if (!isEvent(findDOMNode(this), box)) {
+      if (!isEvent(this.ref.current, box)) {
         const { startDate, endDate } = selectionState(box)
         this._selectSlot({
           startDate,
@@ -317,7 +317,7 @@ class DayColumn extends React.Component {
     selector.on('beforeSelect', box => {
       if (this.props.selectable !== 'ignoreEvents') return
 
-      return !isEvent(findDOMNode(this), box)
+      return !isEvent(this.ref.current, box)
     })
 
     selector.on('click', box => selectorClicksHandler(box, 'click'))

src/Month.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import * as dates from './utils/dates'
@@ -29,16 +28,19 @@ class MonthView extends React.Component {
     this._bgRows = []
     this._pendingSelection = []
     this.slotRowRef = React.createRef()
+    this.ref = React.createRef()
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
+      date: null,
     }
   }
 
-  UNSAFE_componentWillReceiveProps({ date }) {
-    this.setState({
-      needLimitMeasure: !dates.eq(date, this.props.date, 'month'),
-    })
+  static getDerivedStateFromProps({ date }, state) {
+    return {
+      needLimitMeasure: !dates.eq(date, state.date, 'month'),
+      date,
+    }
   }
 
   componentDidMount() {
@@ -69,7 +71,7 @@ class MonthView extends React.Component {
   }
 
   getContainer = () => {
-    return findDOMNode(this)
+    return this.ref.current
   }
 
   render() {
@@ -80,7 +82,7 @@ class MonthView extends React.Component {
     this._weekCount = weeks.length
 
     return (
-      <div className={clsx('rbc-month-view', className)}>
+      <div ref={this.ref} className={clsx('rbc-month-view', className)}>
         <div className="rbc-row rbc-month-header">
           {this.renderHeaders(weeks[0])}
         </div>
@@ -263,7 +265,7 @@ class MonthView extends React.Component {
     this.clearSelection()
 
     if (popup) {
-      let position = getPosition(cell, findDOMNode(this))
+      let position = getPosition(cell, this.ref.current)
 
       this.setState({
         overlay: { date, events, position, target },