Refactor PostSchedule to make calendar/clock available as components

components/date-time/date.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { default as ReactDatePicker } from 'react-datepicker';
+import moment from 'moment';
+
+/**
+ * WordPress dependencies
+ */
+import { settings } from '@wordpress/date';
+
+export function DatePicker( { currentDate, onChange, locale = settings.l10n.locale, ...args } ) {
+	const momentDate = currentDate ? moment( currentDate ) : moment();
+
+	return <ReactDatePicker
+		inline
+		selected={ momentDate }
+		onChange={ onChange }
+		locale={ locale }
+		{ ...args }
+	/>;
+}

components/date-time/index.js

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

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,27 @@
  * 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';
+import { settings } from '@wordpress/date';
+
+export function TimePicker( { currentTime, onChange } ) {
+	const selected = currentTime ? moment( currentTime ) : moment();
+
+	// 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 is12Hour = /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
+	);
 
-function PostScheduleClock( { is12Hour, selected, onChange } ) {
 	const minutes = selected.format( 'mm' );
 	const am = selected.format( 'A' );
 	const hours = selected.format( is12Hour ? 'hh' : 'HH' );
@@ -56,30 +69,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 +102,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,21 @@ 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 "/"
-	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 }
-			onChange={ handleChange }
-			locale={ settings.l10n.locale }
-		/>,
-		<PostScheduleClock
-			key="clock"
-			selected={ momentDate }
-			onChange={ handleChange }
-			is12Hour={ is12HourTime }
-		/>,
-	];
+	return <DateTimePicker
+		key="date-time-picker"
+		currentDate={ date }
+		onChange={ handleChange }
+		locale={ settings.l10n.locale }
+	/>;
 }
 
 export default connect(