Use Core DatePicker

woocommerce · Dec 17, 2018 · 07be925 · 07be925
1 parent 7022c14
commit 07be925
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 39 deletions.
diff --git a/docs/components/calendar.md b/docs/components/calendar.md
@@ -32,7 +32,7 @@ A string error message, shown to the user.
 - Type: One of type: enum, func
 - Default: null
 
-Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
+(Coming Soon) Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
 A function will be passed to react-dates' `isOutsideRange` prop
 
 ### `onUpdate`
@@ -51,13 +51,6 @@ A function called upon selection of a date or input change.
 
 The date format in moment.js-style tokens.
 
-### `label`
-
-- Type: String
-- Default: null
-
-An aria-label to be applied to the input.
-
 `DateRange` (component)
 =======================
 

diff --git a/docs/components/search.md b/docs/components/search.md
@@ -24,7 +24,7 @@ Function called when selected results change, passed result list.
 ### `type`
 
 - **Required**
-- Type: One of: 'products', 'product_cats', 'orders', 'customers', 'coupons', 'taxes', 'variations'
+- Type: One of: 'countries', 'coupons', 'customers', 'orders', 'products', 'product_cats', 'taxes', 'variations'
 - Default: null
 
 The object type to be used in searching.
@@ -39,7 +39,7 @@ A placeholder for the search input.
 ### `selected`
 
 - Type: Array
-  - id: Number
+  - id: One of type: number, string
   - label: String
 - Default: `[]`
 

diff --git a/docs/components/tag.md b/docs/components/tag.md
@@ -11,7 +11,7 @@ Props
 
 ### `id`
 
-- Type: Number
+- Type: One of type: number, string
 - Default: null
 
 The ID for this item, used in the remove function.

diff --git a/packages/components/src/calendar/date-picker.js b/packages/components/src/calendar/date-picker.js
@@ -6,21 +6,18 @@ import 'core-js/fn/object/assign';
 import 'core-js/fn/array/from';
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { DayPickerSingleDateController } from 'react-dates';
-import { Dropdown } from '@wordpress/components';
+import { Dropdown, DatePicker as WpDatePicker } from '@wordpress/components';
 import { partial } from 'lodash';
 import { TAB } from '@wordpress/keycodes';
+import moment from 'moment';
 
 /**
  * Internal dependencies
  */
 import DateInput from './input';
-import phrases from './phrases';
 import { toMoment } from '@woocommerce/date';
-import { getOutsideRange } from './utils';
 import { H, Section } from '../section';
 import PropTypes from 'prop-types';
-import { withViewportMatch } from '@wordpress/viewport';
 
 class DatePicker extends Component {
 	constructor( props ) {
@@ -42,11 +39,12 @@ class DatePicker extends Component {
 		}
 	}
 
-	onDateChange( onToggle, date ) {
+	onDateChange( onToggle, dateString ) {
 		const { onUpdate, dateFormat } = this.props;
+		const date = moment( dateString );
 		onUpdate( {
 			date,
-			text: date ? date.format( dateFormat ) : '',
+			text: dateString ? date.format( dateFormat ) : '',
 			error: null,
 		} );
 		onToggle();
@@ -66,8 +64,9 @@ class DatePicker extends Component {
 	}
 
 	render() {
-		const { date, text, dateFormat, label, error, invalidDays, isViewportSmall } = this.props;
-		const isOutsideRange = getOutsideRange( invalidDays );
+		const { date, text, dateFormat, error } = this.props;
+		// @TODO: make upstream Gutenberg change to invalidate certain days.
+		// const isOutsideRange = getOutsideRange( invalidDays );
 		return (
 			<Dropdown
 				position="bottom center"
@@ -77,7 +76,7 @@ class DatePicker extends Component {
 						value={ text }
 						onChange={ this.onInputChange }
 						dateFormat={ dateFormat }
-						label={ label }
+						label={ __( 'Choose a date', 'wc-admin' ) }
 						error={ error }
 						describedBy={ sprintf(
 							__( 'Date input describing a selected date in format %s', 'wc-admin' ),
@@ -96,15 +95,9 @@ class DatePicker extends Component {
 							{ __( 'select a date', 'wc-admin' ) }
 						</H>
 						<div className="woocommerce-calendar__react-dates">
-							<DayPickerSingleDateController
-								date={ date }
-								phrases={ phrases }
-								hideKeyboardShortcutsPanel
-								noBorder
-								firstDayOfWeek={ Number( wcSettings.date.dow ) }
-								onDateChange={ partial( this.onDateChange, onToggle ) }
-								isOutsideRange={ isOutsideRange }
-								daySize={ isViewportSmall ? 37 : undefined }
+							<WpDatePicker
+								currentDate={ date }
+								onChange={ partial( this.onDateChange, onToggle ) }
 							/>
 						</div>
 					</Section>
@@ -128,7 +121,7 @@ DatePicker.propTypes = {
 	 */
 	error: PropTypes.string,
 	/**
-	 * Optionally invalidate certain days. `past`, `future`, `none`, or function are accepted.
+	 * (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( [
@@ -143,12 +136,6 @@ DatePicker.propTypes = {
 	 * The date format in moment.js-style tokens.
 	 */
 	dateFormat: PropTypes.string.isRequired,
-	/**
-	 * An aria-label to be applied to the input.
-	 */
-	label: PropTypes.string,
 };
 
-export default withViewportMatch( {
-	isViewportSmall: '< small',
-} )( DatePicker );
+export default DatePicker;
diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss
@@ -29,9 +29,17 @@
 		border: 1px solid $core-grey-light-700;
 	}
 
+	.CalendarDay__default {
+		background-color: transparent;
+	}
+
 	.CalendarDay__selected {
 		background: $woocommerce-700;
-		border: 1px solid $core-grey-light-700;
+		//border: 1px solid $core-grey-light-700;
+	}
+
+	.components-datetime__date {
+		padding-left: 0;
 	}
 
 	.CalendarDay__hovered_span {