fix: replace findDOMNode with refs (react 17)

also upg date-arithmetic dep & some minor cleanup
jquense · Mar 3, 2021 · 24f92fb · 24f92fb
1 parent 6def209
commit 24f92fb
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 136 deletions.
diff --git a/package.json b/package.json
@@ -130,7 +130,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.5",
     "clsx": "^1.0.4",
-    "date-arithmetic": "^4.0.1",
+    "date-arithmetic": "^4.1.0",
     "dom-helpers": "^5.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",

diff --git a/src/addons/dragAndDrop/EventContainerWrapper.js b/src/addons/dragAndDrop/EventContainerWrapper.js
@@ -1,23 +1,16 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import * as dates from '../../utils/dates'
-import { findDOMNode } from 'react-dom'
 import { DnDContext } from './DnDContext'
 
 import Selection, {
   getBoundsForNode,
   getEventNodeFromPoint,
 } from '../../Selection'
 import TimeGridEvent from '../../TimeGridEvent'
-import { dragAccessors } from './common'
+import { dragAccessors, eventTimes, pointInColumn } from './common'
 import NoopWrapper from '../../NoopWrapper'
 
-const pointInColumn = (bounds, { x, y }) => {
-  const { left, right, top } = bounds
-  return x < right + 10 && x > left && y > top
-}
-const propTypes = {}
-
 class EventContainerWrapper extends React.Component {
   static propTypes = {
     accessors: PropTypes.object.isRequired,
@@ -33,6 +26,7 @@ class EventContainerWrapper extends React.Component {
   constructor(...args) {
     super(...args)
     this.state = {}
+    this.ref = React.createRef()
   }
 
   componentDidMount() {
@@ -65,43 +59,31 @@ class EventContainerWrapper extends React.Component {
     })
   }
 
-  handleMove = (point, boundaryBox) => {
+  handleMove = (point, bounds) => {
+    if (!pointInColumn(bounds, point)) return this.reset()
     const { event } = this.context.draggable.dragAndDropAction
     const { accessors, slotMetrics } = this.props
 
-    if (!pointInColumn(boundaryBox, point)) {
-      this.reset()
-      return
-    }
-
-    let currentSlot = slotMetrics.closestSlotFromPoint(
+    const newSlot = slotMetrics.closestSlotFromPoint(
       { y: point.y - this.eventOffsetTop, x: point.x },
-      boundaryBox
+      bounds
     )
 
-    let eventStart = accessors.start(event)
-    let eventEnd = accessors.end(event)
-    let end = dates.add(
-      currentSlot,
-      dates.diff(eventStart, eventEnd, 'minutes'),
-      'minutes'
-    )
-
-    this.update(event, slotMetrics.getRange(currentSlot, end, false, true))
+    const { duration } = eventTimes(event, accessors)
+    let newEnd = dates.add(newSlot, duration, 'milliseconds')
+    this.update(event, slotMetrics.getRange(newSlot, newEnd, false, true))
   }
 
-  handleResize(point, boundaryBox) {
-    let start, end
+  handleResize(point, bounds) {
     const { accessors, slotMetrics } = this.props
     const { event, direction } = this.context.draggable.dragAndDropAction
+    const newTime = slotMetrics.closestSlotFromPoint(point, bounds)
 
-    let currentSlot = slotMetrics.closestSlotFromPoint(point, boundaryBox)
+    let { start, end } = eventTimes(event, accessors)
     if (direction === 'UP') {
-      end = accessors.end(event)
-      start = dates.min(currentSlot, slotMetrics.closestSlotFromDate(end, -1))
+      start = dates.min(newTime, slotMetrics.closestSlotFromDate(end, -1))
     } else if (direction === 'DOWN') {
-      start = accessors.start(event)
-      end = dates.max(currentSlot, slotMetrics.closestSlotFromDate(start))
+      end = dates.max(newTime, slotMetrics.closestSlotFromDate(start))
     }
 
     this.update(event, slotMetrics.getRange(start, end))
@@ -124,10 +106,11 @@ class EventContainerWrapper extends React.Component {
   }
 
   _selectable = () => {
-    let node = findDOMNode(this)
+    let wrapper = this.ref.current
+    let node = wrapper.children[0]
     let isBeingDragged = false
     let selector = (this._selector = new Selection(() =>
-      node.closest('.rbc-time-view')
+      wrapper.closest('.rbc-time-view')
     ))
 
     selector.on('beforeSelect', point => {
@@ -141,6 +124,12 @@ class EventContainerWrapper extends React.Component {
       const eventNode = getEventNodeFromPoint(node, point)
       if (!eventNode) return false
 
+      // eventOffsetTop is distance from the top of the event to the initial
+      // mouseDown position. We need this later to compute the new top of the
+      // event during move operations, since the final location is really a
+      // delta from this point. note: if we want to DRY this with WeekWrapper,
+      // probably better just to capture the mouseDown point here and do the
+      // placement computation in handleMove()...
       this.eventOffsetTop = point.y - getBoundsForNode(eventNode).top
     })
 
@@ -154,19 +143,14 @@ class EventContainerWrapper extends React.Component {
 
     selector.on('dropFromOutside', point => {
       if (!this.context.draggable.onDropFromOutside) return
-
       const bounds = getBoundsForNode(node)
-
       if (!pointInColumn(bounds, point)) return
-
       this.handleDropFromOutside(point, bounds)
     })
 
     selector.on('dragOver', point => {
       if (!this.context.draggable.dragFromOutsideItem) return
-
       const bounds = getBoundsForNode(node)
-
       this.handleDropFromOutside(point, bounds)
     })
 
@@ -212,7 +196,7 @@ class EventContainerWrapper extends React.Component {
     this._selector = null
   }
 
-  render() {
+  renderContent() {
     const {
       children,
       accessors,
@@ -223,7 +207,6 @@ class EventContainerWrapper extends React.Component {
     } = this.props
 
     let { event, top, height } = this.state
-
     if (!event) return children
 
     const events = children.props.children
@@ -263,8 +246,10 @@ class EventContainerWrapper extends React.Component {
       ),
     })
   }
-}
 
-EventContainerWrapper.propTypes = propTypes
+  render() {
+    return <div ref={this.ref}>{this.renderContent()}</div>
+  }
+}
 
 export default EventContainerWrapper