From 0abb713c360768c71cd6144be2f947a279687411 Mon Sep 17 00:00:00 2001
From: Florian Truchot <florian@truchot.co>
Date: Thu, 4 Jun 2020 16:58:18 +0200
Subject: [PATCH 1/3] Refactor DatePicker to use React hooks

---
 packages/components/src/date-time/date.js | 91 ++++++++++-------------
 1 file changed, 39 insertions(+), 52 deletions(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index c650df693c4da2..59c550ec308f61 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -9,7 +9,7 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 /**
  * WordPress dependencies
  */
-import { Component, createRef } from '@wordpress/element';
+import { createRef } from '@wordpress/element';
 
 /**
  * Module Constants
@@ -17,14 +17,8 @@ import { Component, createRef } from '@wordpress/element';
 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 const isRTL = () => document.documentElement.dir === 'rtl';
 
-class DatePicker extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.onChangeMoment = this.onChangeMoment.bind( this );
-		this.nodeRef = createRef();
-		this.keepFocusInside = this.keepFocusInside.bind( this );
-	}
+function DatePicker( { currentDate, isInvalidDate, onChange } ) {
+	const nodeRef = createRef();
 
 	/*
 	 * Todo: We should remove this function ASAP.
@@ -32,17 +26,17 @@ class DatePicker extends Component {
 	 * This focus loss closes the date picker popover.
 	 * Ideally we should add an upstream commit on react-dates to fix this issue.
 	 */
-	keepFocusInside() {
-		if ( ! this.nodeRef.current ) {
+	const keepFocusInside = () => {
+		if ( ! nodeRef.current ) {
 			return;
 		}
 		// If focus was lost.
 		if (
 			! document.activeElement ||
-			! this.nodeRef.current.contains( document.activeElement )
+			! nodeRef.current.contains( document.activeElement )
 		) {
 			// Retrieve the focus region div.
-			const focusRegion = this.nodeRef.current.querySelector(
+			const focusRegion = nodeRef.current.querySelector(
 				'.DayPicker_focusRegion'
 			);
 			if ( ! focusRegion ) {
@@ -51,11 +45,9 @@ class DatePicker extends Component {
 			// Keep the focus on focus region.
 			focusRegion.focus();
 		}
-	}
-
-	onChangeMoment( newDate ) {
-		const { currentDate, onChange } = this.props;
+	};
 
+	const onChangeMoment = ( newDate ) => {
 		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 		const momentDate = currentDate ? moment( currentDate ) : moment();
 		const momentTime = {
@@ -65,54 +57,49 @@ class DatePicker extends Component {
 		};
 
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
-	}
+	};
 
 	/**
 	 * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
 	 * object representing now. If a null value is passed, return a null value.
 	 *
-	 * @param {?string} currentDate Date representing the currently selected date or null to signify no selection.
 	 * @return {?moment.Moment} Moment object for selected date or null.
 	 */
-	getMomentDate( currentDate ) {
+	const getMomentDate = () => {
 		if ( null === currentDate ) {
 			return null;
 		}
 		return currentDate ? moment( currentDate ) : moment();
-	}
-
-	render() {
-		const { currentDate, isInvalidDate } = this.props;
+	};
 
-		const momentDate = this.getMomentDate( currentDate );
+	const momentDate = getMomentDate();
 
-		return (
-			<div className="components-datetime__date" ref={ this.nodeRef }>
-				<DayPickerSingleDateController
-					date={ momentDate }
-					daySize={ 30 }
-					focused
-					hideKeyboardShortcutsPanel
-					// This is a hack to force the calendar to update on month or year change
-					// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
-					key={ `datepicker-controller-${
-						momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
-					}` }
-					noBorder
-					numberOfMonths={ 1 }
-					onDateChange={ this.onChangeMoment }
-					transitionDuration={ 0 }
-					weekDayFormat="ddd"
-					isRTL={ isRTL() }
-					isOutsideRange={ ( date ) => {
-						return isInvalidDate && isInvalidDate( date.toDate() );
-					} }
-					onPrevMonthClick={ this.keepFocusInside }
-					onNextMonthClick={ this.keepFocusInside }
-				/>
-			</div>
-		);
-	}
+	return (
+		<div className="components-datetime__date" ref={ nodeRef }>
+			<DayPickerSingleDateController
+				date={ momentDate }
+				daySize={ 30 }
+				focused
+				hideKeyboardShortcutsPanel
+				// This is a hack to force the calendar to update on month or year change
+				// https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665
+				key={ `datepicker-controller-${
+					momentDate ? momentDate.format( 'MM-YYYY' ) : 'null'
+				}` }
+				noBorder
+				numberOfMonths={ 1 }
+				onDateChange={ onChangeMoment }
+				transitionDuration={ 0 }
+				weekDayFormat="ddd"
+				isRTL={ isRTL() }
+				isOutsideRange={ ( date ) => {
+					return isInvalidDate && isInvalidDate( date.toDate() );
+				} }
+				onPrevMonthClick={ keepFocusInside }
+				onNextMonthClick={ keepFocusInside }
+			/>
+		</div>
+	);
 }
 
 export default DatePicker;

From 84bb8651394b813b2593b71faa5d7b97c3d27012 Mon Sep 17 00:00:00 2001
From: Florian Truchot <florian@truchot.co>
Date: Thu, 4 Jun 2020 20:26:09 +0200
Subject: [PATCH 2/3] Fix createRef with useRef hook

---
 packages/components/src/date-time/date.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index 59c550ec308f61..cd4657bc97fbac 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -9,7 +9,7 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 /**
  * WordPress dependencies
  */
-import { createRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 
 /**
  * Module Constants
@@ -18,7 +18,7 @@ const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 const isRTL = () => document.documentElement.dir === 'rtl';
 
 function DatePicker( { currentDate, isInvalidDate, onChange } ) {
-	const nodeRef = createRef();
+	const nodeRef = useRef();
 
 	/*
 	 * Todo: We should remove this function ASAP.

From f528bec2b545b9d00a9c9b644de27dbe5280cd3f Mon Sep 17 00:00:00 2001
From: Florian Truchot <florian@truchot.co>
Date: Thu, 4 Jun 2020 20:44:04 +0200
Subject: [PATCH 3/3] Fix arrow functions with named functions

---
 packages/components/src/date-time/date.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js
index cd4657bc97fbac..8dd754a57c52bf 100644
--- a/packages/components/src/date-time/date.js
+++ b/packages/components/src/date-time/date.js
@@ -26,7 +26,7 @@ function DatePicker( { currentDate, isInvalidDate, onChange } ) {
 	 * This focus loss closes the date picker popover.
 	 * Ideally we should add an upstream commit on react-dates to fix this issue.
 	 */
-	const keepFocusInside = () => {
+	function keepFocusInside() {
 		if ( ! nodeRef.current ) {
 			return;
 		}
@@ -45,9 +45,9 @@ function DatePicker( { currentDate, isInvalidDate, onChange } ) {
 			// Keep the focus on focus region.
 			focusRegion.focus();
 		}
-	};
+	}
 
-	const onChangeMoment = ( newDate ) => {
+	function onChangeMoment( newDate ) {
 		// If currentDate is null, use now as momentTime to designate hours, minutes, seconds.
 		const momentDate = currentDate ? moment( currentDate ) : moment();
 		const momentTime = {
@@ -57,7 +57,7 @@ function DatePicker( { currentDate, isInvalidDate, onChange } ) {
 		};
 
 		onChange( newDate.set( momentTime ).format( TIMEZONELESS_FORMAT ) );
-	};
+	}
 
 	/**
 	 * Create a Moment object from a date string. With no currentDate supplied, default to a Moment
@@ -65,12 +65,12 @@ function DatePicker( { currentDate, isInvalidDate, onChange } ) {
 	 *
 	 * @return {?moment.Moment} Moment object for selected date or null.
 	 */
-	const getMomentDate = () => {
+	function getMomentDate() {
 		if ( null === currentDate ) {
 			return null;
 		}
 		return currentDate ? moment( currentDate ) : moment();
-	};
+	}
 
 	const momentDate = getMomentDate();