From b8368f982d2463031a22979796ecd099bb1d7ee6 Mon Sep 17 00:00:00 2001 From: Augusto Calaca Date: Wed, 24 Jun 2020 12:54:34 -0300 Subject: [PATCH] feat: starting to hooks to avoid deprecation warnings (#1687) * feat(hooks): add react hooks rules and plugins to eslint * feat(hooks): upgrade react and react-dom * feat(hooks): update Agenda.js to hooks * feat(hooks): unnecessary line specified react-hooks plugin * feat(hooks): destructuring props on top level --- .eslintrc | 4 ++ package.json | 5 +- src/Agenda.js | 171 +++++++++++++++++++++++--------------------------- yarn.lock | 36 ++++++++++- 4 files changed, 120 insertions(+), 96 deletions(-) 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} - )} -
- ) - } - - renderDay = (day, events, dayKey) => { - let { - selected, - getters, - accessors, - localizer, - components: { event: Event, date: AgendaDate }, - } = this.props +function Agenda({ + selected, + getters, + accessors, + localizer, + components, + length, + date, + events, +}) { + const headerRef = useRef(null) + const dateColRef = useRef(null) + const timeColRef = useRef(null) + const contentRef = useRef(null) + const tbodyRef = useRef(null) + + useEffect(() => { + _adjustHeader() + }) + + const renderDay = (day, events, dayKey) => { + const { event: Event, date: AgendaDate } = components events = events.filter(e => inRange(e, dates.startOf(day, 'day'), dates.endOf(day, 'day'), accessors) @@ -117,9 +70,7 @@ class Agenda extends React.Component { style={userProps.style} > {first} - - {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} + )} +
+ ) } Agenda.propTypes = { diff --git a/yarn.lock b/yarn.lock index 410518590..f7333f979 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5065,6 +5065,11 @@ eslint-plugin-import@^2.14.0: read-pkg-up "^2.0.0" resolve "^1.10.0" +eslint-plugin-react-hooks@^4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz#aed33b4254a41b045818cacb047b81e6df27fa58" + integrity sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA== + eslint-plugin-react@^7.11.1: version "7.13.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.13.0.tgz#bc13fd7101de67996ea51b33873cd9dc2b7e5758" @@ -10691,7 +10696,17 @@ react-docgen@^3.0.0, react-docgen@^3.0.0-rc.1: node-dir "^0.1.10" recast "^0.16.0" -react-dom@^16.6.1, react-dom@^16.8.1: +react-dom@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" + integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + scheduler "^0.19.1" + +react-dom@^16.8.1: version "16.8.6" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== @@ -10874,7 +10889,16 @@ react-transition-group@^2.0.0, react-transition-group@^2.2.0: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react@^16.6.1, react@^16.8.1: +react@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" + integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + prop-types "^15.6.2" + +react@^16.8.1: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== @@ -11654,6 +11678,14 @@ scheduler@^0.13.6: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.19.1: + version "0.19.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" + integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.4.5: version "0.4.7" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"