diff --git a/src/BackgroundCells.js b/src/BackgroundCells.js index eed1ea7ce..8a6ecd043 100644 --- a/src/BackgroundCells.js +++ b/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 ( -
+
{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')) diff --git a/src/DateContentRow.js b/src/DateContentRow.js index dfee9d470..0342dd7dd 100644 --- a/src/DateContentRow.js +++ b/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,7 +73,7 @@ class DateContentRow extends React.Component { renderDummy = () => { let { className, range, renderHeader, showAllEvents } = this.props return ( -
+
{renderHeader && ( -
+
{range.map(this.renderHeadingCell)}
)} -
+
 
@@ -152,7 +151,7 @@ class DateContentRow extends React.Component { } return ( -
+
{renderHeader && ( -
+
{range.map(this.renderHeadingCell)}
)} diff --git a/src/DayColumn.js b/src/DayColumn.js index 910a6c7f6..f02dde7af 100644 --- a/src/DayColumn.js +++ b/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 ( { - 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')) diff --git a/src/DayColumnWrapper.js b/src/DayColumnWrapper.js index 2d8ca9f18..120b8931d 100644 --- a/src/DayColumnWrapper.js +++ b/src/DayColumnWrapper.js @@ -1,11 +1,13 @@ import React from 'react' -const DayColumnWrapper = ({ children, className, style }) => { +const DayColumnWrapper = ({ children, className, style, innerRef }) => { return ( -
+
{children}
) } -export default DayColumnWrapper +export default React.forwardRef((props, ref) => ( + +)) diff --git a/src/Month.js b/src/Month.js index 38ee63732..940761833 100644 --- a/src/Month.js +++ b/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} >
{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 }, diff --git a/src/TimeGrid.js b/src/TimeGrid.js index 96e3a5d48..122c1d813 100644 --- a/src/TimeGrid.js +++ b/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()