Skip to content

Commit

Permalink
fix: use React.createRef instead of string refs (jquense#1282)
Browse files Browse the repository at this point in the history
  • Loading branch information
PzYon authored and jquense committed May 6, 2019
1 parent b9fdce4 commit 239f0a3
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 20 deletions.
32 changes: 21 additions & 11 deletions src/Agenda.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ import { inRange } from './utils/eventLevels'
import { isSelected } from './utils/selection'

class Agenda extends React.Component {
constructor(props) {
super(props)
this.headerRef = React.createRef()
this.dateColRef = React.createRef()
this.timeColRef = React.createRef()
this.contentRef = React.createRef()
this.tbodyRef = React.createRef()
}

componentDidMount() {
this._adjustHeader()
}
Expand All @@ -33,22 +42,22 @@ class Agenda extends React.Component {
<div className="rbc-agenda-view">
{events.length !== 0 ? (
<React.Fragment>
<table ref="header" className="rbc-agenda-table">
<table ref={this.headerRef} className="rbc-agenda-table">
<thead>
<tr>
<th className="rbc-header" ref="dateCol">
<th className="rbc-header" ref={this.dateColRef}>
{messages.date}
</th>
<th className="rbc-header" ref="timeCol">
<th className="rbc-header" ref={this.timeColRef}>
{messages.time}
</th>
<th className="rbc-header">{messages.event}</th>
</tr>
</thead>
</table>
<div className="rbc-agenda-content" ref="content">
<div className="rbc-agenda-content" ref={this.contentRef}>
<table className="rbc-agenda-table">
<tbody ref="tbody">
<tbody ref={this.tbodyRef}>
{range.map((day, idx) => this.renderDay(day, events, idx))}
</tbody>
</table>
Expand Down Expand Up @@ -155,15 +164,16 @@ class Agenda extends React.Component {
}

_adjustHeader = () => {
if (!this.refs.tbody) return
if (!this.tbodyRef.current) return

let header = this.refs.header
let firstRow = this.refs.tbody.firstChild
let header = this.headerRef.current
let firstRow = this.tbodyRef.current.firstChild

if (!firstRow) return

let isOverflowing =
this.refs.content.scrollHeight > this.refs.content.clientHeight
this.contentRef.current.scrollHeight >
this.contentRef.current.clientHeight
let widths = this._widths || []

this._widths = [
Expand All @@ -172,8 +182,8 @@ class Agenda extends React.Component {
]

if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
this.refs.dateCol.style.width = this._widths[0] + 'px'
this.refs.timeCol.style.width = this._widths[1] + 'px'
this.dateColRef.current.style.width = this._widths[0] + 'px'
this.timeColRef.current.style.width = this._widths[1] + 'px'
}

if (isOverflowing) {
Expand Down
1 change: 0 additions & 1 deletion src/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -897,7 +897,6 @@ class Calendar extends React.Component {
/>
)}
<View
ref="view"
{...props}
events={events}
date={current}
Expand Down
5 changes: 3 additions & 2 deletions src/Month.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class MonthView extends React.Component {

this._bgRows = []
this._pendingSelection = []
this.slotRowRef = React.createRef()
this.state = {
rowLimit: 5,
needLimitMeasure: true,
Expand Down Expand Up @@ -112,7 +113,7 @@ class MonthView extends React.Component {
return (
<DateContentRow
key={weekIdx}
ref={weekIdx === 0 ? 'slotRow' : undefined}
ref={weekIdx === 0 ? this.slotRowRef : undefined}
container={this.getContainer}
className="rbc-month-row"
getNow={getNow}
Expand Down Expand Up @@ -216,7 +217,7 @@ class MonthView extends React.Component {
measureRowLimit() {
this.setState({
needLimitMeasure: false,
rowLimit: this.refs.slotRow.getRowLimit(),
rowLimit: this.slotRowRef.current.getRowLimit(),
})
}

Expand Down
10 changes: 8 additions & 2 deletions src/Popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,15 @@ import EventCell from './EventCell'
import { isSelected } from './utils/selection'

class Popup extends React.Component {
constructor(props) {
super(props)

this.rootRef = React.createRef()
}

componentDidMount() {
let { popupOffset = 5 } = this.props,
{ top, left, width, height } = getOffset(this.refs.root),
{ top, left, width, height } = getOffset(this.rootRef.current),
viewBottom = window.innerHeight + getScrollTop(window),
viewRight = window.innerWidth + getScrollLeft(window),
bottom = top + height,
Expand Down Expand Up @@ -54,7 +60,7 @@ class Popup extends React.Component {
}

return (
<div ref="root" style={style} className="rbc-overlay">
<div ref={this.rootRef} style={style} className="rbc-overlay">
<div className="rbc-overlay-header">
{localizer.format(slotStart, 'dayHeaderFormat')}
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/TimeGrid.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default class TimeGrid extends Component {
this.state = { gutterWidth: undefined, isOverflowing: null }

this.scrollRef = React.createRef()
this.contentRef = React.createRef()
}

componentWillMount() {
Expand Down Expand Up @@ -209,7 +210,7 @@ export default class TimeGrid extends Component {
getDrilldownView={this.props.getDrilldownView}
/>
<div
ref="content"
ref={this.contentRef}
className="rbc-time-content"
onScroll={this.handleScroll}
>
Expand Down Expand Up @@ -253,7 +254,7 @@ export default class TimeGrid extends Component {

applyScroll() {
if (this._scrollRatio) {
const { content } = this.refs
const content = this.contentRef.current
content.scrollTop = content.scrollHeight * this._scrollRatio
// Only do this once
this._scrollRatio = null
Expand All @@ -272,8 +273,8 @@ export default class TimeGrid extends Component {
checkOverflow = () => {
if (this._updatingOverflow) return

let isOverflowing =
this.refs.content.scrollHeight > this.refs.content.clientHeight
const content = this.contentRef.current
let isOverflowing = content.scrollHeight > content.clientHeight

if (this.state.isOverflowing !== isOverflowing) {
this._updatingOverflow = true
Expand Down

0 comments on commit 239f0a3

Please sign in to comment.