Calendar: update to Gutenberg's isInvalidDate

docs/components/packages/calendar.md

@@ -27,14 +27,6 @@ The date in human-readable format. Displayed in the text input.
 
 A string error message, shown to the user.
 
-### `invalidDays`
-
-- Type: One of type: enum, func
-- Default: null
-
-(Coming Soon) Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
-A function will be passed to react-dates' `isOutsideRange` prop
-
 ### `onUpdate`
 
 - **Required**
@@ -51,6 +43,13 @@ A function called upon selection of a date or input change.
 
 The date format in moment.js-style tokens.
 
+### `isInvalidDate`
+
+- Type: Function
+- Default: null
+
+A function to determine if a day on the calendar is not valid
+
 `DateRange` (component)
 =======================
 

packages/components/CHANGELOG.md

@@ -1,10 +1,12 @@
-# 2.0.0 (unreleased)
+# 2.0.0 (Unreleased)
 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique.
 - Chart component now accepts data with negative values.
 - Chart component: new prop `filterParam` used to detect selected items in the current query. If there are, they will be displayed in the chart even if their values are 0.
 - Expand search results and allow searching when input is refocused in autocompleter.
 - Animation Slider: Remove `focusOnChange` in favor of `onExited` so consumers can pass a function to be executed after a transition has finished.
 - SearchListControl: Add `onSearch` callback prop to let the parent component know about search changes.
+- Calendar: Expose `isInvalidDate` prop to `DatePicker` to indicated invalid days that are not selectable.
+- Calendar: Expose `isInvalidDate` prop to `DateRange` and remove the `invalidDays` prop.
 
 # 1.6.0
 - Chart component: new props `emptyMessage` and `baseValue`. When an empty message is provided, it will be displayed on top of the chart if there are no values different than `baseValue`.

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woocommerce/components",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "description": "UI components for WooCommerce.",
   "author": "Automattic",
   "license": "GPL-2.0-or-later",

packages/components/src/calendar/date-picker.js

@@ -64,9 +64,8 @@ class DatePicker extends Component {
 	}
 
 	render() {
-		const { date, text, dateFormat, error } = this.props;
-		// @todo Make upstream Gutenberg change to invalidate certain days.
-		// const isOutsideRange = getOutsideRange( invalidDays );
+		const { date, text, dateFormat, error, isInvalidDate } = this.props;
+
 		return (
 			<Dropdown
 				position="bottom center"
@@ -98,6 +97,7 @@ class DatePicker extends Component {
 							<WpDatePicker
 								currentDate={ date }
 								onChange={ partial( this.onDateChange, onToggle ) }
+								isInvalidDate={ isInvalidDate }
 							/>
 						</div>
 					</Section>
@@ -120,14 +120,6 @@ DatePicker.propTypes = {
 	 * A string error message, shown to the user.
 	 */
 	error: PropTypes.string,
-	/**
-	 * (Coming Soon) Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
-	 * A function will be passed to react-dates' `isOutsideRange` prop
-	 */
-	invalidDays: PropTypes.oneOfType( [
-		PropTypes.oneOf( [ 'past', 'future', 'none' ] ),
-		PropTypes.func,
-	] ),
 	/**
 	 * A function called upon selection of a date or input change.
 	 */
@@ -136,6 +128,10 @@ DatePicker.propTypes = {
 	 * The date format in moment.js-style tokens.
 	 */
 	dateFormat: PropTypes.string.isRequired,
+	/**
+	 * A function to determine if a day on the calendar is not valid
+	 */
+	isInvalidDate: PropTypes.func,
 };
 
 export default DatePicker;

packages/components/src/calendar/date-range.js

@@ -23,7 +23,6 @@ import { validateDateInputForRange } from '@woocommerce/date';
  */
 import DateInput from './input';
 import phrases from './phrases';
-import { getOutsideRange } from './utils';
 
 const isRTL = () => document.documentElement.dir === 'rtl';
 
@@ -96,9 +95,8 @@ class DateRange extends Component {
 			shortDateFormat,
 			isViewportMobile,
 			isViewportSmall,
-			invalidDays,
+			isInvalidDate,
 		} = this.props;
-		const isOutsideRange = getOutsideRange( invalidDays );
 		const isDoubleCalendar = isViewportMobile && ! isViewportSmall;
 		return (
 			<div
@@ -148,7 +146,9 @@ class DateRange extends Component {
 						endDate={ before }
 						orientation={ 'horizontal' }
 						numberOfMonths={ isDoubleCalendar ? 2 : 1 }
-						isOutsideRange={ isOutsideRange }
+						isOutsideRange={ ( date ) => {
+							return isInvalidDate && isInvalidDate( date.toDate() );
+						} }
 						minimumNights={ 0 }
 						hideKeyboardShortcutsPanel
 						noBorder
@@ -192,13 +192,9 @@ DateRange.propTypes = {
 	 */
 	focusedInput: PropTypes.string,
 	/**
-	 * Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
-	 * A function will be passed to react-dates' `isOutsideRange` prop
+	 * A function to determine if a day on the calendar is not valid
 	 */
-	invalidDays: PropTypes.oneOfType( [
-		PropTypes.oneOf( [ 'past', 'future', 'none' ] ),
-		PropTypes.func,
-	] ),
+	isInvalidDate: PropTypes.func,
 	/**
 	 * A function called upon selection of a date.
 	 */

packages/components/src/calendar/example.md

@@ -37,7 +37,7 @@ const MyDateRange =  withState( {
 					onUpdate={ onRangeUpdate }
 					shortDateFormat={ dateFormat }
 					focusedInput={ focusedInput }
-					invalidDays="future"
+					isInvalidDate={ date => moment().isBefore( moment( date ), 'date' ) }
 				/>
 			</Section>
 
@@ -49,7 +49,7 @@ const MyDateRange =  withState( {
 					error={ afterError } 
 					onUpdate={ onDatePickerUpdate }
 					dateFormat={ dateFormat }
-					invalidDays="none"
+					isInvalidDate={ date => moment( date ).day() === 1 }
 				/>
 			</Section>
 		</div>

packages/components/src/filters/advanced/date-filter.js

@@ -19,6 +19,7 @@ import { isoDateFormat, toMoment } from '@woocommerce/date';
  */
 import DatePicker from '../../calendar/date-picker';
 import { textContent } from './utils';
+import moment from 'moment';
 
 const dateStringFormat = __( 'MMM D, YYYY', 'woocommerce-admin' );
 const dateFormat = __( 'MM/DD/YYYY', 'woocommerce-admin' );
@@ -126,6 +127,10 @@ class DateFilter extends Component {
 		}
 	}
 
+	isFutureDate( dateString ) {
+		return moment().isBefore( moment( dateString ), 'day' );
+	}
+
 	getFilterInputs() {
 		const { filter } = this.props;
 		const { before, beforeText, beforeError, after, afterText, afterError } = this.state;
@@ -141,7 +146,7 @@ class DateFilter extends Component {
 							error={ afterError }
 							onUpdate={ partial( this.onRangeDateChange, 'after' ) }
 							dateFormat={ dateFormat }
-							invalidDays="none"
+							isInvalidDate={ this.isFutureDate }
 						/>
 					),
 					before: (
@@ -151,7 +156,7 @@ class DateFilter extends Component {
 							error={ beforeError }
 							onUpdate={ partial( this.onRangeDateChange, 'before' ) }
 							dateFormat={ dateFormat }
-							invalidDays="none"
+							isInvalidDate={ this.isFutureDate }
 						/>
 					),
 					span: <span className="separator" />,
@@ -166,7 +171,7 @@ class DateFilter extends Component {
 				error={ beforeError }
 				onUpdate={ this.onSingleDateChange }
 				dateFormat={ dateFormat }
-				invalidDays="none"
+				isInvalidDate={ this.isFutureDate }
 			/>
 		);
 	}

packages/components/src/filters/date/content.js

@@ -7,6 +7,7 @@ import { Component, Fragment } from '@wordpress/element';
 import { TabPanel, Button } from '@wordpress/components';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import moment from 'moment';
 
 /**
  * Internal dependencies
@@ -34,6 +35,10 @@ class DatePickerContent extends Component {
 		}
 	}
 
+	isFutureDate( dateString ) {
+		return moment().isBefore( moment( dateString ), 'day' );
+	}
+
 	render() {
 		const {
 			period,
@@ -89,7 +94,7 @@ class DatePickerContent extends Component {
 										after={ after }
 										before={ before }
 										onUpdate={ onUpdate }
-										invalidDays="future"
+										isInvalidDate={ this.isFutureDate }
 										focusedInput={ focusedInput }
 										afterText={ afterText }
 										beforeText={ beforeText }