External Media: Google Photos Custom Date Range (#16266)

* add custom date range filter option add custom date filter option update responsive styles for filters add explainer generate array of months in user locale renamed const with months renamed custom range option * use flex-start, as suggested by the linter * match button size to inputs * External Media: filters styling for desktop / mob * prevent collision with number step arrows * add ability to filter by whole year * remove extra import * external-media: set className to number control * Update styles Also removes unneeded isLarge props. * Remove invalid prop from Fragment Co-authored-by: cpap <[email protected]> Co-authored-by: retrofox <[email protected]> Co-authored-by: Konstantin Obenland <[email protected]>
Automattic · Jul 9, 2020 · 51c422e · 51c422e
1 parent 2927b61
commit 51c422e
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 42 deletions.
diff --git a/extensions/shared/external-media/constants.js b/extensions/shared/external-media/constants.js
@@ -3,6 +3,8 @@
  */
 
 import { __ } from '@wordpress/i18n';
+import { dateI18n } from '@wordpress/date';
+import { map, range } from 'lodash';
 
 export const SOURCE_WORDPRESS = 'wordpress';
 export const SOURCE_GOOGLE_PHOTOS = 'google_photos';
@@ -162,9 +164,19 @@ export const GOOGLE_PHOTOS_DATE_PRESETS = [
 		value: DATE_RANGE_LAST_12_MONTHS,
 		label: __( 'Last 12 months', 'jetpack' ),
 	},
-	// TODO: Implement a UI for selecting month & year.
-	//{
-	//	value: DATE_RANGE_CUSTOM,
-	//	label: __( 'Custom Range', 'jetpack' ),
-	//},
+	{
+		value: DATE_RANGE_CUSTOM,
+		label: __( 'Specific Month/Year', 'jetpack' ),
+	},
+];
+
+export const CURRENT_YEAR = new Date().getFullYear();
+
+export const MONTH_SELECT_OPTIONS = [
+	{ label: __( 'Any Month', 'jetpack' ), value: -1 },
+	...map( range( 0, 12 ), value => ( {
+		// Following call generates a new date object for the particular month and gets its name.
+		label: dateI18n( 'F', new Date( [ 0, value + 1 ] ) ),
+		value,
+	} ) ),
 ];
diff --git a/extensions/shared/external-media/editor.scss b/extensions/shared/external-media/editor.scss
@@ -221,13 +221,24 @@ $grid-size: 8px;
 
 .jetpack-external-media-header__view {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: flex-start;
 	margin-bottom: 48px;
+	flex-direction: column;
+
+	@media only screen and ( min-width: 600px ) {
+		flex-direction: row;
+		align-items: center;
+	}
 
 	select {
 		max-width: 200px !important;
 	}
+
+	.components-base-control__field {
+		display: flex;
+		flex-direction: column;
+	}
 }
 
 .jetpack-external-media-header__filter,
@@ -240,31 +251,54 @@ $grid-size: 8px;
 		padding-right: $grid-size;
 		margin-bottom: 0;
 	}
-
-	.components-base-control__label {
-		margin-bottom: 0;
-	}
-
-	.components-base-control__field {
-		display: flex;
-		align-items: center;
-		margin-bottom: 0;
-	}
-
-	.components-base-control + .components-base-control {
-		padding-left: $grid-size * 2;
-	}
 }
 
 .jetpack-external-media-header__filter {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
+	flex-grow: 1;
+	justify-content: flex-start;
 
-	.jetpack-external-media-googlephotos-filter {
+	@media only screen and ( min-width: 600px ) {
+		border-left: 1px solid $light-gray-secondary;
+		margin-left: $grid-size * 2;
+		padding-left: $grid-size * 2;
+	}
+
+	.jetpack-external-media-date-filter {
 		display: flex;
-		align-items: center;
-		margin-right: 7px;
+		flex-wrap: wrap;
+
+		button {
+			// Adjust button to match the size and position of inputs.
+			margin-top: 27px;
+			height: 40px;
+
+			@media only screen and ( min-width: 783px ) {
+				height: 30px;
+			}
+		}
+
+		.components-base-control {
+			.components-input-control__label {
+				margin-bottom: 3px;
+			}
+
+			.components-input-control__backdrop {
+				border-color: $dark-gray-200;
+				border-radius: 3px;
+			}
+
+			.components-input-control__input {
+				height: 40px;
+				width: 70px; // This input holds only years, so 4 digits width is enough.
+
+				@media only screen and ( min-width: 783px ) {
+					height: 30px;
+				}
+			}
+		}
 	}
 }
 

diff --git a/extensions/shared/external-media/media-browser/index.js b/extensions/shared/external-media/media-browser/index.js
@@ -86,13 +86,7 @@ function MediaBrowser( props ) {
 
 		return (
 			<div className="jetpack-external-media-browser__media__toolbar">
-				<Button
-					isPrimary
-					isLarge
-					isBusy={ isCopying }
-					disabled={ disabled }
-					onClick={ onCopyAndInsert }
-				>
+				<Button isPrimary isBusy={ isCopying } disabled={ disabled } onClick={ onCopyAndInsert }>
 					{ label }
 				</Button>
 			</div>
@@ -118,7 +112,6 @@ function MediaBrowser( props ) {
 
 				{ pageHandle && ! isLoading && (
 					<Button
-						isLarge
 						isSecondary
 						className="jetpack-external-media-browser__loadmore"
 						disabled={ isLoading || isCopying }

diff --git a/extensions/shared/external-media/sources/google-photos/filter-option.js b/extensions/shared/external-media/sources/google-photos/filter-option.js
@@ -2,8 +2,14 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { SelectControl, Button } from '@wordpress/components';
+import {
+	SelectControl,
+	Button,
+	__experimentalNumberControl as BlockEditorNumberControl,
+	TextControl,
+} from '@wordpress/components';
 import { omit } from 'lodash';
+import { useState, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,8 +18,21 @@ import {
 	GOOGLE_PHOTOS_CATEGORIES,
 	GOOGLE_PHOTOS_DATE_PRESETS,
 	DATE_RANGE_ANY,
+	DATE_RANGE_CUSTOM,
+	MONTH_SELECT_OPTIONS,
+	CURRENT_YEAR,
 } from '../../constants';
 
+/**
+ * This uses the experimental NumberControl from the block editor where available,
+ * otherwise it falls back to a standard TextControl, limited to numbers.
+ */
+const NumberControl =
+	BlockEditorNumberControl ||
+	function CustomNumberControl( props ) {
+		return <TextControl type="number" inputMode="numeric" { ...props } />;
+	};
+
 function CategoryOption( { value, updateFilter } ) {
 	return (
 		<SelectControl
@@ -26,13 +45,46 @@ function CategoryOption( { value, updateFilter } ) {
 }
 
 function DateOption( { value, updateFilter } ) {
+	const selectedRange = value?.range || DATE_RANGE_ANY;
+
+	const [ month, setMonth ] = useState( -1 );
+	const [ year, setYear ] = useState( CURRENT_YEAR );
+
 	return (
-		<SelectControl
-			label={ __( 'Filter by time period', 'jetpack' ) }
-			value={ value?.range || DATE_RANGE_ANY }
-			options={ GOOGLE_PHOTOS_DATE_PRESETS }
-			onChange={ range => updateFilter( { range } ) }
-		/>
+		<div className="jetpack-external-media-date-filter">
+			<SelectControl
+				label={ __( 'Filter by time period', 'jetpack' ) }
+				value={ selectedRange }
+				options={ GOOGLE_PHOTOS_DATE_PRESETS }
+				onChange={ range => updateFilter( { range } ) }
+			/>
+			{ selectedRange === DATE_RANGE_CUSTOM && (
+				<Fragment>
+					<SelectControl
+						label={ __( 'Month', 'jetpack' ) }
+						value={ month }
+						options={ MONTH_SELECT_OPTIONS }
+						onChange={ setMonth }
+					/>
+					<NumberControl
+						className="components-base-control"
+						label={ __( 'Year', 'jetpack' ) }
+						value={ year }
+						min={ 1970 }
+						onChange={ setYear }
+					/>
+					<Button
+						isSecondary
+						disabled={ value?.month === month && value?.year === year }
+						onClick={ () => {
+							updateFilter( { range: selectedRange, month, year } );
+						} }
+					>
+						{ __( 'Apply', 'jetpack' ) }
+					</Button>
+				</Fragment>
+			) }
+		</div>
 	);
 }
 

diff --git a/extensions/shared/external-media/sources/google-photos/filter-request.js b/extensions/shared/external-media/sources/google-photos/filter-request.js
@@ -34,24 +34,37 @@ export default function getFilterRequest( filters ) {
 
 	if ( date ) {
 		let startDate = null;
-		let endDate = TODAY;
+		let endDate = null;
 		switch ( date.range ) {
 			case DATE_RANGE_LAST_7_DAYS:
 				startDate = moment( TODAY ).subtract( 7, 'days' );
+				endDate = TODAY;
 				break;
 			case DATE_RANGE_LAST_30_DAYS:
 				startDate = moment( TODAY ).subtract( 30, 'days' );
+				endDate = TODAY;
 				break;
 			case DATE_RANGE_LAST_6_MONTHS:
 				startDate = moment( TODAY ).subtract( 6, 'months' );
+				endDate = TODAY;
 				break;
 			case DATE_RANGE_LAST_12_MONTHS:
 				startDate = moment( TODAY ).subtract( 1, 'year' );
+				endDate = TODAY;
 				break;
 			case DATE_RANGE_CUSTOM:
-				if ( date.year && date.month ) {
-					startDate = moment( [ date.year, date.month - 1 ] );
-					endDate = moment( startDate ).endOf( 'month' );
+				const month = parseInt( date.month );
+				const year = parseInt( date.year );
+				if ( ! isNaN( month ) && ! isNaN( year ) ) {
+					if ( month === -1 ) {
+						// Whole year.
+						startDate = moment( [ year, 0 ] );
+						endDate = moment( startDate ).endOf( 'year' );
+					} else {
+						// Specific month.
+						startDate = moment( [ year, month ] );
+						endDate = moment( startDate ).endOf( 'month' );
+					}
 				}
 				break;
 		}