From c5c6a8bf8f710402dc69bf1322d76b83c19824c4 Mon Sep 17 00:00:00 2001 From: Steve 'Cutter' Blades Date: Fri, 8 Jul 2022 11:42:21 -0500 Subject: [PATCH] feat: replace unsafe deprecated methods (#2216) This replaces deprecated React methods from the components, leading the way to eventual StrictMode compliance. #1200 #1777 #1481 #2126 #2104 #2105 #1526 --- src/BackgroundCells.js | 6 +++--- src/Calendar.js | 8 ++++---- src/DateContentRow.js | 7 +++---- src/DayColumn.js | 10 ++++------ src/Month.js | 11 ++++++----- src/TimeGrid.js | 24 ++++-------------------- stories/props/scrollToTime.stories.js | 2 +- 7 files changed, 25 insertions(+), 43 deletions(-) diff --git a/src/BackgroundCells.js b/src/BackgroundCells.js index 8a6ecd043..56d94f4d7 100644 --- a/src/BackgroundCells.js +++ b/src/BackgroundCells.js @@ -24,10 +24,10 @@ class BackgroundCells extends React.Component { this._teardownSelectable() } - UNSAFE_componentWillReceiveProps(nextProps) { - if (nextProps.selectable && !this.props.selectable) this._selectable() + componentDidUpdate(prevProps) { + if (!prevProps.selectable && this.props.selectable) this._selectable() - if (!nextProps.selectable && this.props.selectable) + if (prevProps.selectable && !this.props.selectable) this._teardownSelectable() } diff --git a/src/Calendar.js b/src/Calendar.js index 2c47a2c1a..4ccdf147c 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -877,14 +877,14 @@ class Calendar extends React.Component { super(...args) this.state = { - context: this.getContext(this.props), + context: Calendar.getContext(this.props), } } - UNSAFE_componentWillReceiveProps(nextProps) { - this.setState({ context: this.getContext(nextProps) }) + static getDerivedStateFromProps(nextProps) { + return { context: Calendar.getContext(nextProps) } } - getContext({ + static getContext({ startAccessor, endAccessor, allDayAccessor, diff --git a/src/DateContentRow.js b/src/DateContentRow.js index 0342dd7dd..de45c25b7 100644 --- a/src/DateContentRow.js +++ b/src/DateContentRow.js @@ -48,10 +48,9 @@ class DateContentRow extends React.Component { getRowLimit() { /* 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 headingHeight = this.headingRowRef?.current + ? getHeight(this.headingRowRef.current) + : 0 const eventSpace = getHeight(this.containerRef.current) - headingHeight return Math.max(Math.floor(eventSpace / eventHeight), 1) diff --git a/src/DayColumn.js b/src/DayColumn.js index f02dde7af..08021f513 100644 --- a/src/DayColumn.js +++ b/src/DayColumn.js @@ -38,15 +38,13 @@ class DayColumn extends React.Component { this.clearTimeIndicatorInterval() } - UNSAFE_componentWillReceiveProps(nextProps) { - if (nextProps.selectable && !this.props.selectable) this._selectable() - if (!nextProps.selectable && this.props.selectable) + componentDidUpdate(prevProps, prevState) { + if (!prevProps.selectable && this.props.selectable) this._selectable() + if (prevProps.selectable && !this.props.selectable) this._teardownSelectable() - this.slotMetrics = this.slotMetrics.update(nextProps) - } + this.slotMetrics = this.slotMetrics.update(this.props) - componentDidUpdate(prevProps, prevState) { const { getNow, isNow, localizer, date, min, max } = this.props const getNowChanged = localizer.neq(prevProps.getNow(), getNow(), 'minutes') diff --git a/src/Month.js b/src/Month.js index 940761833..2bf573da9 100644 --- a/src/Month.js +++ b/src/Month.js @@ -27,6 +27,7 @@ class MonthView extends React.Component { this.state = { rowLimit: 5, needLimitMeasure: true, + date: null, } this.containerRef = createRef() this.slotRowRef = createRef() @@ -35,11 +36,11 @@ class MonthView extends React.Component { this._pendingSelection = [] } - UNSAFE_componentWillReceiveProps({ date }) { - const { date: propsDate, localizer } = this.props - this.setState({ - needLimitMeasure: localizer.neq(date, propsDate, 'month'), - }) + static getDerivedStateFromProps({ date, localizer }, state) { + return { + date, + needLimitMeasure: localizer.neq(date, state.date, 'month'), + } } componentDidMount() { diff --git a/src/TimeGrid.js b/src/TimeGrid.js index bd3e4af6d..10181ac4c 100644 --- a/src/TimeGrid.js +++ b/src/TimeGrid.js @@ -26,17 +26,17 @@ export default class TimeGrid extends Component { this.gutterRef = createRef() } - UNSAFE_componentWillMount() { + getSnapshotBeforeUpdate() { this.calculateScroll() - } - - componentDidMount() { this.checkOverflow() if (this.props.width == null) { this.measureGutter() } + return null + } + componentDidMount() { this.applyScroll() window.addEventListener('resize', this.handleResize) @@ -64,23 +64,7 @@ export default class TimeGrid extends Component { } componentDidUpdate() { - if (this.props.width == null) { - this.measureGutter() - } - this.applyScroll() - //this.checkOverflow() - } - - UNSAFE_componentWillReceiveProps(nextProps) { - const { range, scrollToTime, localizer } = this.props - // When paginating, reset scroll - if ( - localizer.neq(nextProps.range[0], range[0], 'minutes') || - localizer.neq(nextProps.scrollToTime, scrollToTime, 'minutes') - ) { - this.calculateScroll(nextProps) - } } handleSelectAlldayEvent = (...args) => { diff --git a/stories/props/scrollToTime.stories.js b/stories/props/scrollToTime.stories.js index c188574f1..f7c5a5cb4 100644 --- a/stories/props/scrollToTime.stories.js +++ b/stories/props/scrollToTime.stories.js @@ -36,5 +36,5 @@ ScrollToTime.args = { defaultView: Views.WEEK, events: demoEvents, localizer: mLocalizer, - scrollToTime: new Date(1972, 0, 1, 10), + scrollToTime: new Date(1972, 0, 1, 22), }