fix: replace findDOMNode with refs

jquense#2193

Author: cutterbl

src/BackgroundCells.js

@@ -1,6 +1,5 @@
+import React, { createRef } from 'react'
 import PropTypes from 'prop-types'
-import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import { notify } from './utils/helpers'
@@ -14,6 +13,7 @@ class BackgroundCells extends React.Component {
     this.state = {
       selecting: false,
     }
+    this.containerRef = createRef()
   }
 
   componentDidMount() {
@@ -44,7 +44,7 @@ class BackgroundCells extends React.Component {
     let current = getNow()
 
     return (
-      <div className="rbc-row-bg">
+      <div className="rbc-row-bg" ref={this.containerRef}>
         {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.containerRef.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.containerRef.current, box)
     })
 
     selector.on('click', (point) => selectorClicksHandler(point, 'click'))

src/DateContentRow.js

@@ -1,9 +1,8 @@
+import React, { createRef } from 'react'
 import clsx from 'clsx'
 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 BackgroundCells from './BackgroundCells'
 import EventRow from './EventRow'
@@ -16,6 +15,10 @@ class DateContentRow extends React.Component {
   constructor(...args) {
     super(...args)
 
+    this.containerRef = createRef()
+    this.headingRowRef = createRef()
+    this.eventRowRef = createRef()
+
     this.slotMetrics = DateSlotMetrics.getSlotMetrics()
   }
 
@@ -28,7 +31,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.containerRef.current, '.rbc-row-bg')[0]
 
     let cell
     if (row) cell = row.children[slot - 1]
@@ -37,23 +40,19 @@ class DateContentRow extends React.Component {
     onShowMore(events, range[slot - 1], cell, slot, target)
   }
 
-  createHeadingRef = (r) => {
-    this.headingRow = r
-  }
-
-  createEventRef = (r) => {
-    this.eventRow = r
-  }
-
   getContainer = () => {
     const { container } = this.props
-    return container ? container() : findDOMNode(this)
+    return container ? container() : this.containerRef.current
   }
 
   getRowLimit() {
-    let eventHeight = getHeight(this.eventRow)
-    let headingHeight = this.headingRow ? getHeight(this.headingRow) : 0
-    let eventSpace = getHeight(findDOMNode(this)) - headingHeight
+    /* 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 eventSpace = getHeight(this.containerRef.current) - headingHeight
 
     return Math.max(Math.floor(eventSpace / eventHeight), 1)
   }
@@ -74,19 +73,19 @@ class DateContentRow extends React.Component {
   renderDummy = () => {
     let { className, range, renderHeader, showAllEvents } = this.props
     return (
-      <div className={className}>
+      <div className={className} ref={this.containerRef}>
         <div
           className={clsx(
             'rbc-row-content',
             showAllEvents && 'rbc-row-content-scrollable'
           )}
         >
           {renderHeader && (
-            <div className="rbc-row" ref={this.createHeadingRef}>
+            <div className="rbc-row" ref={this.headingRowRef}>
               {range.map(this.renderHeadingCell)}
             </div>
           )}
-          <div className="rbc-row" ref={this.createEventRef}>
+          <div className="rbc-row" ref={this.eventRowRef}>
             <div className="rbc-row-segment">
               <div className="rbc-event">
                 <div className="rbc-event-content">&nbsp;</div>
@@ -152,7 +151,7 @@ class DateContentRow extends React.Component {
     }
 
     return (
-      <div className={className} role="rowgroup">
+      <div className={className} role="rowgroup" ref={this.containerRef}>
         <BackgroundCells
           localizer={localizer}
           date={date}
@@ -178,7 +177,7 @@ class DateContentRow extends React.Component {
           role="row"
         >
           {renderHeader && (
-            <div className="rbc-row " ref={this.createHeadingRef}>
+            <div className="rbc-row " ref={this.headingRowRef}>
               {range.map(this.renderHeadingCell)}
             </div>
           )}

src/DayColumn.js

@@ -1,6 +1,5 @@
+import React, { createRef } from 'react'
 import PropTypes from 'prop-types'
-import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import Selection, { getBoundsForNode, isEvent } from './Selection'
@@ -23,6 +22,7 @@ class DayColumn extends React.Component {
     super(...args)
 
     this.slotMetrics = TimeSlotUtils.getSlotMetrics(this.props)
+    this.containerRef = createRef()
   }
 
   componentDidMount() {
@@ -129,6 +129,7 @@ class DayColumn extends React.Component {
 
     return (
       <DayColumnWrapperComponent
+        ref={this.containerRef}
         date={date}
         style={style}
         className={clsx(
@@ -249,9 +250,9 @@ class DayColumn extends React.Component {
   }
 
   _selectable = () => {
-    let node = findDOMNode(this)
+    let node = this.containerRef.current
     const { longPressThreshold, localizer } = this.props
-    let selector = (this._selector = new Selection(() => findDOMNode(this), {
+    let selector = (this._selector = new Selection(() => node, {
       longPressThreshold: longPressThreshold,
     }))
 
@@ -311,7 +312,7 @@ class DayColumn extends React.Component {
     }
 
     let selectorClicksHandler = (box, actionType) => {
-      if (!isEvent(findDOMNode(this), box)) {
+      if (!isEvent(this.containerRef.current, box)) {
         const { startDate, endDate } = selectionState(box)
         this._selectSlot({
           startDate,
@@ -329,7 +330,7 @@ class DayColumn extends React.Component {
     selector.on('beforeSelect', (box) => {
       if (this.props.selectable !== 'ignoreEvents') return
 
-      return !isEvent(findDOMNode(this), box)
+      return !isEvent(this.containerRef.current, box)
     })
 
     selector.on('click', (box) => selectorClicksHandler(box, 'click'))

src/DayColumnWrapper.js

@@ -1,11 +1,13 @@
 import React from 'react'
 
-const DayColumnWrapper = ({ children, className, style }) => {
+const DayColumnWrapper = ({ children, className, style, innerRef }) => {
   return (
-    <div className={className} style={style}>
+    <div className={className} style={style} ref={innerRef}>
       {children}
     </div>
   )
 }
 
-export default DayColumnWrapper
+export default React.forwardRef((props, ref) => (
+  <DayColumnWrapper {...props} innerRef={ref} />
+))

src/Month.js

@@ -1,6 +1,5 @@
+import React, { createRef } from 'react'
 import PropTypes from 'prop-types'
-import React from 'react'
-import { findDOMNode } from 'react-dom'
 import clsx from 'clsx'
 
 import chunk from 'lodash/chunk'
@@ -25,13 +24,15 @@ class MonthView extends React.Component {
   constructor(...args) {
     super(...args)
 
-    this._bgRows = []
-    this._pendingSelection = []
-    this.slotRowRef = React.createRef()
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
     }
+    this.containerRef = createRef()
+    this.slotRowRef = createRef()
+
+    this._bgRows = []
+    this._pendingSelection = []
   }
 
   UNSAFE_componentWillReceiveProps({ date }) {
@@ -69,7 +70,7 @@ class MonthView extends React.Component {
   }
 
   getContainer = () => {
-    return findDOMNode(this)
+    return this.containerRef.current
   }
 
   render() {
@@ -84,6 +85,7 @@ class MonthView extends React.Component {
         className={clsx('rbc-month-view', className)}
         role="table"
         aria-label="Month View"
+        ref={this.containerRef}
       >
         <div className="rbc-row rbc-month-header" role="row">
           {this.renderHeaders(weeks[0])}
@@ -284,7 +286,7 @@ class MonthView extends React.Component {
     this.clearSelection()
 
     if (popup) {
-      let position = getPosition(cell, findDOMNode(this))
+      let position = getPosition(cell, this.containerRef.current)
 
       this.setState({
         overlay: { date, events, position, target },

src/TimeGrid.js

@@ -1,8 +1,7 @@
+import React, { Component, createRef } from 'react'
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
 import * as animationFrame from 'dom-helpers/animationFrame'
-import React, { Component } from 'react'
-import { findDOMNode } from 'react-dom'
 import memoize from 'memoize-one'
 
 import DayColumn from './DayColumn'
@@ -24,6 +23,7 @@ export default class TimeGrid extends Component {
     this.scrollRef = React.createRef()
     this.contentRef = React.createRef()
     this._scrollRatio = null
+    this.gutterRef = createRef()
   }
 
   UNSAFE_componentWillMount() {
@@ -83,10 +83,6 @@ export default class TimeGrid extends Component {
     }
   }
 
-  gutterRef = (ref) => {
-    this.gutter = ref && findDOMNode(ref)
-  }
-
   handleSelectAlldayEvent = (...args) => {
     //cancel any pending selections so only the event click goes through.
     this.clearSelection()