diff --git a/.eslintrc b/.eslintrc
index 4268f85bb..123d9b0c0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,6 +2,8 @@ parser: babel-eslint
extends:
- jason/react
- prettier
+plugins:
+ - react-hooks
env:
es6: true
rules:
@@ -15,3 +17,5 @@ rules:
varsIgnorePattern: ^_,
argsIgnorePattern: ^_,
}]
+ react-hooks/rules-of-hooks: error
+ react-hooks/exhaustive-deps: warn
diff --git a/package.json b/package.json
index 1ab299d71..af79fb08e 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
+ "eslint-plugin-react-hooks": "^4.0.4",
"font-awesome": "^4.7.0",
"globalize": "^0.1.1",
"husky": "^0.14.3",
@@ -108,10 +109,10 @@
"postcss": "^7.0.16",
"postcss-cli": "^6.1.2",
"prettier": "^1.15.1",
- "react": "^16.6.1",
+ "react": "^16.13.1",
"react-bootstrap": "^0.32.4",
"react-docgen": "^3.0.0-rc.1",
- "react-dom": "^16.6.1",
+ "react-dom": "^16.13.1",
"react-tackle-box": "^2.1.0",
"rimraf": "^2.4.2",
"rollup": "^1.1.0",
diff --git a/src/Agenda.js b/src/Agenda.js
index 46e5feeca..e8e5a9b8e 100644
--- a/src/Agenda.js
+++ b/src/Agenda.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
import addClass from 'dom-helpers/addClass'
import removeClass from 'dom-helpers/removeClass'
import getWidth from 'dom-helpers/width'
@@ -10,75 +10,28 @@ import { navigate } from './utils/constants'
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()
- }
-
- componentDidUpdate() {
- this._adjustHeader()
- }
-
- render() {
- let { length, date, events, accessors, localizer } = this.props
- let { messages } = localizer
- let end = dates.add(date, length, 'day')
-
- let range = dates.range(date, end, 'day')
-
- events = events.filter(event => inRange(event, date, end, accessors))
-
- events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
-
- return (
-
- {events.length !== 0 ? (
-
-
-
-
- |
- {messages.date}
- |
-
- {messages.time}
- |
- {messages.event} |
-
-
-
-
-
-
- {range.map((day, idx) => this.renderDay(day, events, idx))}
-
-
-
- ) : (
-
{messages.noEventsInRange}
- )}
-
- {this.timeRangeLabel(day, event)}
- |
+ {timeRangeLabel(day, event)} |
{Event ? : title}
|
@@ -128,9 +79,7 @@ class Agenda extends React.Component {
}, [])
}
- timeRangeLabel = (day, event) => {
- let { accessors, localizer, components } = this.props
-
+ const timeRangeLabel = (day, event) => {
let labelClass = '',
TimeComponent = components.time,
label = localizer.messages.allDay
@@ -164,27 +113,25 @@ class Agenda extends React.Component {
)
}
- _adjustHeader = () => {
- if (!this.tbodyRef.current) return
+ const _adjustHeader = () => {
+ if (!tbodyRef.current) return
- let header = this.headerRef.current
- let firstRow = this.tbodyRef.current.firstChild
+ let header = headerRef.current
+ let firstRow = tbodyRef.current.firstChild
if (!firstRow) return
let isOverflowing =
- this.contentRef.current.scrollHeight >
- this.contentRef.current.clientHeight
- let widths = this._widths || []
-
- this._widths = [
- getWidth(firstRow.children[0]),
- getWidth(firstRow.children[1]),
- ]
-
- if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
- this.dateColRef.current.style.width = this._widths[0] + 'px'
- this.timeColRef.current.style.width = this._widths[1] + 'px'
+ contentRef.current.scrollHeight > contentRef.current.clientHeight
+
+ let _widths = []
+ let widths = _widths
+
+ _widths = [getWidth(firstRow.children[0]), getWidth(firstRow.children[1])]
+
+ if (widths[0] !== _widths[0] || widths[1] !== _widths[1]) {
+ dateColRef.current.style.width = _widths[0] + 'px'
+ timeColRef.current.style.width = _widths[1] + 'px'
}
if (isOverflowing) {
@@ -194,6 +141,46 @@ class Agenda extends React.Component {
removeClass(header, 'rbc-header-overflowing')
}
}
+
+ let { messages } = localizer
+ let end = dates.add(date, length, 'day')
+
+ let range = dates.range(date, end, 'day')
+
+ events = events.filter(event => inRange(event, date, end, accessors))
+
+ events.sort((a, b) => +accessors.start(a) - +accessors.start(b))
+
+ return (
+
+ {events.length !== 0 ? (
+
+
+
+
+ |
+ {messages.date}
+ |
+
+ {messages.time}
+ |
+ {messages.event} |
+
+
+
+
+
+
+ {range.map((day, idx) => renderDay(day, events, idx))}
+
+
+
+ ) : (
+
{messages.noEventsInRange}
+ )}
+