Refactor PostSchedule to make calendar/clock available as components (

#4180)

components/date-time/README.md

@@ -0,0 +1,66 @@
+DateTimePicker
+=======
+
+DateTimePicker is a React component to render a calendar and clock for selecting a date and time. The calendar and clock components can be accessed individually using the `DatePicker` and `TimePicker` components respectively.
+
+## Usage
+
+Render a DateTimePicker.
+
+```jsx
+import { DateTimePicker } from '@wordpress/components';
+import { settings } from '@wordpress/date';
+
+function selectTime( date, onUpdateDate ) {
+	// To know if the current timezone is a 12 hour time with look for "a" in the time format.
+	// We also make sure this a is not escaped by a "/".
+	const is12HourTime = /a(?!\\)/i.test(
+		settings.formats.time
+			.toLowerCase() // Test only the lower case a
+			.replace( /\\\\/g, '' ) // Replace "//" with empty strings
+			.split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash
+	);
+
+	return (
+		<DateTimePicker
+		    currentDate={ date }
+		    onChange={ onUpdateDate }
+		    locale={ settings.l10n.locale }
+		    is12Hour={ is12HourTime }
+		    />
+	);
+}
+```
+
+## Props
+
+The component accepts the following props:
+
+### currentDate
+
+The current date and time at initialization.
+
+- Type: `string`
+- Required: Yes
+
+### onChange
+
+The function called when a new date or time has been selected. It is passed the `currentDate` as an argument.
+
+- Type: `Function`
+- Required: No
+- Default: `noop`
+
+### locale
+
+The localization for the display of the date and time.
+
+- Type: `string`
+- Required: No
+
+### is12Hour
+
+Whether the current timezone is a 12 hour time.
+
+- Type: `bool`
+- Required: No

components/date-time/date.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import ReactDatePicker from 'react-datepicker';
+import moment from 'moment';
+
+export function DatePicker( { currentDate, onChange, ...args } ) {
+	const momentDate = currentDate ? moment( currentDate ) : moment();
+
+	return <ReactDatePicker
+		inline
+		selected={ momentDate }
+		onChange={ onChange }
+		{ ...args }
+	/>;
+}

components/date-time/index.js

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { DatePicker } from './date';
+import { TimePicker } from './time';
+
+export { DatePicker, TimePicker };
+
+export function DateTimePicker( { currentDate, onChange, is12Hour, ...args } ) {
+	return [
+		<DatePicker
+			key="date-picker"
+			currentDate={ currentDate }
+			onChange={ onChange }
+			{ ...args }
+		/>,
+		<TimePicker
+			key="time-picker"
+			currentTime={ currentDate }
+			onChange={ onChange }
+			is12Hour={ is12Hour }
+		/>,
+	];
+}

components/date-time/style.scss

@@ -0,0 +1,35 @@
+@import '~react-datepicker/dist/react-datepicker';
+
+.components-time-picker {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: 10px;
+
+	.components-time-picker__input {
+		width: 40px;
+	}
+
+	.components-time-picker__separator {
+		padding: 0 4px;
+	}
+
+	.components-time-picker__am-button {
+		margin-left: 8px;
+		margin-right: -1px;
+		border-radius: 3px 0 0 3px;
+	}
+
+	.components-time-picker__pm-button {
+		margin-left: -1px;
+		border-radius: 0 3px 3px 0;
+	}
+
+	.components-time-picker__am-button.is-toggled,
+	.components-time-picker__pm-button.is-toggled {
+		background: $light-gray-300;
+		border-color: $dark-gray-100;
+		box-shadow: inset 0 2px 5px -3px $dark-gray-500;
+		transform: translateY(1px);
+	}
+}

editor/components/post-schedule/clock.js → components/date-time/time.js

@@ -2,14 +2,17 @@
  * External dependencies
  */
 import { isInteger } from 'lodash';
+import moment from 'moment';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import Button from '../button';
+
+export function TimePicker( { currentTime, onChange, is12Hour } ) {
+	const selected = currentTime ? moment( currentTime ) : moment();
 
-function PostScheduleClock( { is12Hour, selected, onChange } ) {
 	const minutes = selected.format( 'mm' );
 	const am = selected.format( 'A' );
 	const hours = selected.format( is12Hour ? 'hh' : 'HH' );
@@ -56,30 +59,30 @@ function PostScheduleClock( { is12Hour, selected, onChange } ) {
 	};
 
 	return (
-		<div className="editor-post-schedule__clock">
+		<div className="components-time-picker">
 			<input
-				className="editor-post-schedule__clock-input"
+				className="components-time-picker__input"
 				type="text"
 				value={ hours }
 				onChange={ updateHours }
 			/>
-			<span className="editor-post-schedule__clock-separator">:</span>
+			<span className="components-time-picker__separator">:</span>
 			<input
-				className="editor-post-schedule__clock-input"
+				className="components-time-picker__input"
 				type="text"
 				value={ minutes }
 				onChange={ updateMinutes }
 			/>
 			{ is12Hour && <div>
 				<Button
-					className="button editor-post-schedule__clock-am-button"
+					className="button components-time-picker__am-button"
 					isToggled={ am === 'AM' }
 					onClick={ setAM }
 				>
 					{ __( 'AM' ) }
 				</Button>
 				<Button
-					className="button editor-post-schedule__clock-pm-button"
+					className="button components-time-picker__pm-button"
 					isToggled={ am === 'PM' }
 					onClick={ setPM }
 				>
@@ -89,5 +92,3 @@ function PostScheduleClock( { is12Hour, selected, onChange } ) {
 		</div>
 	);
 }
-
-export default PostScheduleClock;

components/index.js

@@ -4,6 +4,7 @@ export { default as Autocomplete } from './autocomplete';
 export { default as Button } from './button';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as Dashicon } from './dashicon';
+export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as DropZone } from './drop-zone';
 export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';

editor/components/post-schedule/index.js

@@ -2,8 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import DatePicker from 'react-datepicker';
-import moment from 'moment';
 
 /**
  * WordPress dependencies
@@ -13,41 +11,33 @@ import { settings } from '@wordpress/date';
 /**
  * Internal dependencies
  */
-import './style.scss';
-import PostScheduleClock from './clock';
+import { DateTimePicker } from '@wordpress/components';
 import { getEditedPostAttribute } from '../../store/selectors';
 import { editPost } from '../../store/actions';
 
 export function PostSchedule( { date, onUpdateDate } ) {
-	const momentDate = date ? moment( date ) : moment();
 	const handleChange = ( newDate ) => {
 		onUpdateDate( newDate.format( 'YYYY-MM-DDTHH:mm:ss' ) );
 	};
 
-		// To know if the current timezone is a 12 hour time with look for "a" in the time format
-		// We also make sure this a is not escaped by a "/"
+	// To know if the current timezone is a 12 hour time with look for "a" in the time format
+	// We also make sure this a is not escaped by a "/"
 	const is12HourTime = /a(?!\\)/i.test(
 		settings.formats.time
 			.toLowerCase() // Test only the lower case a
 			.replace( /\\\\/g, '' ) // Replace "//" with empty strings
 			.split( '' ).reverse().join( '' ) // Reverse the string and test for "a" not followed by a slash
 	);
 
-	return [
-		<DatePicker
-			key="date-picker"
-			inline
-			selected={ momentDate }
+	return (
+		<DateTimePicker
+			key="date-time-picker"
+			currentDate={ date }
 			onChange={ handleChange }
 			locale={ settings.l10n.locale }
-		/>,
-		<PostScheduleClock
-			key="clock"
-			selected={ momentDate }
-			onChange={ handleChange }
 			is12Hour={ is12HourTime }
-		/>,
-	];
+		/>
+	);
 }
 
 export default connect(

lib/client-assets.php

@@ -141,7 +141,7 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_script(
 		'wp-components',
 		gutenberg_url( 'components/build/index.js' ),
-		array( 'wp-element', 'wp-i18n', 'wp-utils', 'wp-hooks', 'wp-api-request' ),
+		array( 'wp-element', 'wp-i18n', 'wp-utils', 'wp-hooks', 'wp-api-request', 'moment' ),
 		filemtime( gutenberg_dir_path() . 'components/build/index.js' )
 	);
 	wp_register_script(