From 888eb9a0f6845800a5a3b30eb358184054f85715 Mon Sep 17 00:00:00 2001 From: Paul Sealock Date: Mon, 25 Feb 2019 12:09:53 +1300 Subject: [PATCH] Calendar: update to Gutenberg's isInvalidDate --- .../docs/components/packages/calendar.md | 15 +++++++------- .../packages/components/CHANGELOG.md | 4 +++- .../packages/components/package.json | 2 +- .../components/src/calendar/date-picker.js | 18 +++++++---------- .../components/src/calendar/date-range.js | 16 ++++++--------- .../components/src/calendar/example.md | 4 ++-- .../packages/components/src/calendar/utils.js | 20 ------------------- .../src/filters/advanced/date-filter.js | 11 +++++++--- .../components/src/filters/date/content.js | 7 ++++++- 9 files changed, 40 insertions(+), 57 deletions(-) delete mode 100644 plugins/woocommerce-admin/packages/components/src/calendar/utils.js diff --git a/plugins/woocommerce-admin/docs/components/packages/calendar.md b/plugins/woocommerce-admin/docs/components/packages/calendar.md index 95fecb2f318..75cea77f9dc 100644 --- a/plugins/woocommerce-admin/docs/components/packages/calendar.md +++ b/plugins/woocommerce-admin/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) ======================= diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index c441263f314..361700ada67 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/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`. diff --git a/plugins/woocommerce-admin/packages/components/package.json b/plugins/woocommerce-admin/packages/components/package.json index 9dd40628746..6688fc582b7 100644 --- a/plugins/woocommerce-admin/packages/components/package.json +++ b/plugins/woocommerce-admin/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", diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js b/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js index 96606100243..dbff6c2c8fa 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/date-picker.js +++ b/plugins/woocommerce-admin/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 ( @@ -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; diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/date-range.js b/plugins/woocommerce-admin/packages/components/src/calendar/date-range.js index 6513cf19ad2..50428964db9 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/date-range.js +++ b/plugins/woocommerce-admin/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 (
{ + 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. */ diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/example.md b/plugins/woocommerce-admin/packages/components/src/calendar/example.md index 17f9e8858c6..36f2a131f24 100644 --- a/plugins/woocommerce-admin/packages/components/src/calendar/example.md +++ b/plugins/woocommerce-admin/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' ) } /> @@ -49,7 +49,7 @@ const MyDateRange = withState( { error={ afterError } onUpdate={ onDatePickerUpdate } dateFormat={ dateFormat } - invalidDays="none" + isInvalidDate={ date => moment( date ).day() === 1 } />
diff --git a/plugins/woocommerce-admin/packages/components/src/calendar/utils.js b/plugins/woocommerce-admin/packages/components/src/calendar/utils.js deleted file mode 100644 index 206d110e573..00000000000 --- a/plugins/woocommerce-admin/packages/components/src/calendar/utils.js +++ /dev/null @@ -1,20 +0,0 @@ -/** @format */ -/** - * External dependencies - */ -import moment from 'moment'; - -export function getOutsideRange( invalidDays ) { - if ( 'string' === typeof invalidDays ) { - switch ( invalidDays ) { - case 'past': - return day => moment().isAfter( day, 'day' ); - case 'future': - return day => moment().isBefore( day, 'day' ); - case 'none': - default: - return undefined; - } - } - return 'function' === typeof invalidDays ? invalidDays : undefined; -} diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js index b828609c4ef..68cbb5f0db9 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/date-filter.js +++ b/plugins/woocommerce-admin/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: , @@ -166,7 +171,7 @@ class DateFilter extends Component { error={ beforeError } onUpdate={ this.onSingleDateChange } dateFormat={ dateFormat } - invalidDays="none" + isInvalidDate={ this.isFutureDate } /> ); } diff --git a/plugins/woocommerce-admin/packages/components/src/filters/date/content.js b/plugins/woocommerce-admin/packages/components/src/filters/date/content.js index 41a1ccb8836..36fa506ba87 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/date/content.js +++ b/plugins/woocommerce-admin/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 }