From af76c90e7b87c3b4486095330b0594b05e0762b5 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Tue, 26 Dec 2017 21:58:16 -0500 Subject: [PATCH 1/8] Refactor `PostSchedule` to make calendar/clock available as components --- components/date-time/date.js | 24 +++++++++++++ components/date-time/index.js | 28 +++++++++++++++ components/date-time/style.scss | 35 ++++++++++++++++++ .../clock.js => components/date-time/time.js | 32 +++++++++++------ components/index.js | 1 + editor/components/post-schedule/index.js | 36 ++++--------------- editor/components/post-schedule/style.scss | 35 ------------------ 7 files changed, 117 insertions(+), 74 deletions(-) create mode 100644 components/date-time/date.js create mode 100644 components/date-time/index.js create mode 100644 components/date-time/style.scss rename editor/components/post-schedule/clock.js => components/date-time/time.js (64%) delete mode 100644 editor/components/post-schedule/style.scss diff --git a/components/date-time/date.js b/components/date-time/date.js new file mode 100644 index 00000000000000..a63269950710bf --- /dev/null +++ b/components/date-time/date.js @@ -0,0 +1,24 @@ +/** + * 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 ; + +} diff --git a/components/date-time/index.js b/components/date-time/index.js new file mode 100644 index 00000000000000..1150bccc204944 --- /dev/null +++ b/components/date-time/index.js @@ -0,0 +1,28 @@ +/** + * 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 [ + , + + ]; + +} diff --git a/components/date-time/style.scss b/components/date-time/style.scss new file mode 100644 index 00000000000000..3b528dcb65b8eb --- /dev/null +++ b/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); + } +} diff --git a/editor/components/post-schedule/clock.js b/components/date-time/time.js similarity index 64% rename from editor/components/post-schedule/clock.js rename to components/date-time/time.js index 060472fcbf9caa..29204115ca0ac9 100644 --- a/editor/components/post-schedule/clock.js +++ b/components/date-time/time.js @@ -2,14 +2,28 @@ * 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 +70,30 @@ function PostScheduleClock( { is12Hour, selected, onChange } ) { }; return ( -
+
- : + : { is12Hour &&
); } - -export default PostScheduleClock; diff --git a/components/index.js b/components/index.js index dc63a3eabae280..96ecef165b8add 100644 --- a/components/index.js +++ b/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'; diff --git a/editor/components/post-schedule/index.js b/editor/components/post-schedule/index.js index 04f1e4826b0615..e6da358af23469 100644 --- a/editor/components/post-schedule/index.js +++ b/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 [ - , - , - ]; + return } export default connect( diff --git a/editor/components/post-schedule/style.scss b/editor/components/post-schedule/style.scss deleted file mode 100644 index 725265c6471e52..00000000000000 --- a/editor/components/post-schedule/style.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '~react-datepicker/dist/react-datepicker'; - -.editor-post-schedule__clock { - display: flex; - align-items: center; - justify-content: center; - margin-top: 10px; -} - -.editor-post-schedule__clock-input { - width: 40px; -} - -.editor-post-schedule__clock-separator { - padding: 0 4px; -} - -.wp-core-ui .editor-post-schedule__clock-am-button { - margin-left: 8px; - margin-right: -1px; - border-radius: 3px 0 0 3px; -} - -.wp-core-ui .editor-post-schedule__clock-pm-button { - margin-left: -1px; - border-radius: 0 3px 3px 0; -} - -.wp-core-ui .editor-post-schedule__clock-am-button.is-toggled, -.wp-core-ui .editor-post-schedule__clock-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); -} From 1bffdbe6ca9e8ccc7ae8c65536914a485c6670a0 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Tue, 26 Dec 2017 22:03:51 -0500 Subject: [PATCH 2/8] Fix styling indentation --- components/date-time/style.scss | 52 ++++++++++++++++----------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/components/date-time/style.scss b/components/date-time/style.scss index 3b528dcb65b8eb..a38470f9a5690d 100644 --- a/components/date-time/style.scss +++ b/components/date-time/style.scss @@ -1,35 +1,35 @@ @import '~react-datepicker/dist/react-datepicker'; .components-time-picker { - display: flex; - align-items: center; - justify-content: center; - margin-top: 10px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; - .components-time-picker__input { - width: 40px; - } + .components-time-picker__input { + width: 40px; + } - .components-time-picker__separator { - padding: 0 4px; - } + .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__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__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); - } + .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); + } } From 2fc83bad024deb0792be6d9cd53c6e889b391046 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 00:15:05 -0500 Subject: [PATCH 3/8] Fix linting issues --- components/date-time/date.js | 2 -- components/date-time/index.js | 4 +--- components/date-time/time.js | 1 - editor/components/post-schedule/index.js | 2 +- 4 files changed, 2 insertions(+), 7 deletions(-) diff --git a/components/date-time/date.js b/components/date-time/date.js index a63269950710bf..c5dba50fa2490d 100644 --- a/components/date-time/date.js +++ b/components/date-time/date.js @@ -10,7 +10,6 @@ import moment from 'moment'; import { settings } from '@wordpress/date'; export function DatePicker( { currentDate, onChange, locale = settings.l10n.locale, ...args } ) { - const momentDate = currentDate ? moment( currentDate ) : moment(); return ; - } diff --git a/components/date-time/index.js b/components/date-time/index.js index 1150bccc204944..fb373abd9e96ec 100644 --- a/components/date-time/index.js +++ b/components/date-time/index.js @@ -9,7 +9,6 @@ export { DatePicker } from './date'; export { TimePicker } from './time'; export function DateTimePicker( { currentDate, onChange, locale, ...args } ) { - return [ + />, ]; - } diff --git a/components/date-time/time.js b/components/date-time/time.js index 29204115ca0ac9..99587c362f797f 100644 --- a/components/date-time/time.js +++ b/components/date-time/time.js @@ -12,7 +12,6 @@ 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 diff --git a/editor/components/post-schedule/index.js b/editor/components/post-schedule/index.js index e6da358af23469..a0bf6f5ca1900e 100644 --- a/editor/components/post-schedule/index.js +++ b/editor/components/post-schedule/index.js @@ -25,7 +25,7 @@ export function PostSchedule( { date, onUpdateDate } ) { currentDate={ date } onChange={ handleChange } locale={ settings.l10n.locale } - /> + />; } export default connect( From 733291700d7bbd1a430fce41d22f09e2ba2d9a24 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 06:44:01 -0500 Subject: [PATCH 4/8] Minor changes from feedback --- components/date-time/date.js | 10 ++-------- components/date-time/index.js | 8 ++++---- components/date-time/time.js | 12 +----------- editor/components/post-schedule/index.js | 24 ++++++++++++++++++------ 4 files changed, 25 insertions(+), 29 deletions(-) diff --git a/components/date-time/date.js b/components/date-time/date.js index c5dba50fa2490d..3e32c0b938d571 100644 --- a/components/date-time/date.js +++ b/components/date-time/date.js @@ -1,22 +1,16 @@ /** * External dependencies */ -import { default as ReactDatePicker } from 'react-datepicker'; +import 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 } ) { +export function DatePicker( { currentDate, onChange, ...args } ) { const momentDate = currentDate ? moment( currentDate ) : moment(); return ; } diff --git a/components/date-time/index.js b/components/date-time/index.js index fb373abd9e96ec..2ac1a83b28a074 100644 --- a/components/date-time/index.js +++ b/components/date-time/index.js @@ -5,22 +5,22 @@ import './style.scss'; import { DatePicker } from './date'; import { TimePicker } from './time'; -export { DatePicker } from './date'; -export { TimePicker } from './time'; +export { DatePicker, TimePicker } -export function DateTimePicker( { currentDate, onChange, locale, ...args } ) { +export function DateTimePicker( { currentDate, onChange, is12Hour, ...args } ) { return [ , , ]; } diff --git a/components/date-time/time.js b/components/date-time/time.js index 99587c362f797f..6cc9b333ea8651 100644 --- a/components/date-time/time.js +++ b/components/date-time/time.js @@ -9,20 +9,10 @@ import moment from 'moment'; */ import { __ } from '@wordpress/i18n'; import Button from '../button'; -import { settings } from '@wordpress/date'; -export function TimePicker( { currentTime, onChange } ) { +export function TimePicker( { currentTime, onChange, is12Hour, ...args } ) { 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 - ); - const minutes = selected.format( 'mm' ); const am = selected.format( 'A' ); const hours = selected.format( is12Hour ? 'hh' : 'HH' ); diff --git a/editor/components/post-schedule/index.js b/editor/components/post-schedule/index.js index a0bf6f5ca1900e..82d43b41c99bd7 100644 --- a/editor/components/post-schedule/index.js +++ b/editor/components/post-schedule/index.js @@ -20,12 +20,24 @@ export function PostSchedule( { date, onUpdateDate } ) { onUpdateDate( newDate.format( 'YYYY-MM-DDTHH:mm:ss' ) ); }; - return ; + // 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 ( + + ); } export default connect( From 7f880737cc8eea24e1c31bcd9b67eba32efba3a9 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 12:29:05 -0500 Subject: [PATCH 5/8] Add `moment` as a depedency for `wp-components` script --- lib/client-assets.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 590b7355092005..026d416877fe26 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -141,7 +141,7 @@ function gutenberg_register_scripts_and_styles() { wp_register_script( 'wp-components', gutenberg_url( 'components/build/index.js' ), - array( 'wp-element', 'wp-i18n', 'wp-utils', 'wp-hooks', 'wp-api-request' ), + array( 'wp-element', 'wp-i18n', 'wp-utils', 'wp-hooks', 'wp-api-request', 'moment' ), filemtime( gutenberg_dir_path() . 'components/build/index.js' ) ); wp_register_script( From f19b6eb65264fd668a350a52312cb32ab7c2e037 Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 12:41:28 -0500 Subject: [PATCH 6/8] Add documentation for `DateTimePicker` component --- components/date-time/README.md | 66 ++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 components/date-time/README.md diff --git a/components/date-time/README.md b/components/date-time/README.md new file mode 100644 index 00000000000000..c140a5fb4a654e --- /dev/null +++ b/components/date-time/README.md @@ -0,0 +1,66 @@ +DateTimePicker +======= + +DateTimePicker is a React component to render a calendar and clock for selecting a date and time. The calendar and clock components can be accessed individually using the `DatePicker` and `TimePicker` components respectively. + +## Usage + +Render a DateTimePicker. + +```jsx +import { DateTimePicker } from '@wordpress/components'; +import { settings } from '@wordpress/date'; + +function selectTime( date, onUpdateDate ) { + // 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 ( + + ); +} +``` + +## Props + +The component accepts the following props: + +### currentDate + +The current date and time at initialization. + +- Type: `string` +- Required: Yes + +### onChange + +The function called when a new date or time has been selected. It is passed the `currentDate` as an argument. + +- Type: `Function` +- Required: No +- Default: `noop` + +### locale + +The localization for the display of the date and time. + +- Type: `string` +- Required: No + +### is12Hour + +Whether the current timezone is a 12 hour time. + +- Type: `bool` +- Required: No From c40319ddca56533412c935d013c80169d326676e Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 13:37:08 -0500 Subject: [PATCH 7/8] Resolve linting issues --- components/date-time/index.js | 2 +- components/date-time/time.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/date-time/index.js b/components/date-time/index.js index 2ac1a83b28a074..e8b34b4fc7b929 100644 --- a/components/date-time/index.js +++ b/components/date-time/index.js @@ -5,7 +5,7 @@ import './style.scss'; import { DatePicker } from './date'; import { TimePicker } from './time'; -export { DatePicker, TimePicker } +export { DatePicker, TimePicker }; export function DateTimePicker( { currentDate, onChange, is12Hour, ...args } ) { return [ diff --git a/components/date-time/time.js b/components/date-time/time.js index 6cc9b333ea8651..99f2145dc3614a 100644 --- a/components/date-time/time.js +++ b/components/date-time/time.js @@ -10,7 +10,7 @@ import moment from 'moment'; import { __ } from '@wordpress/i18n'; import Button from '../button'; -export function TimePicker( { currentTime, onChange, is12Hour, ...args } ) { +export function TimePicker( { currentTime, onChange, is12Hour } ) { const selected = currentTime ? moment( currentTime ) : moment(); const minutes = selected.format( 'mm' ); From 385efdf77db3ff1baa91b524d908faa192b3caed Mon Sep 17 00:00:00 2001 From: Travis Lopes Date: Wed, 27 Dec 2017 15:31:36 -0500 Subject: [PATCH 8/8] Remove passing extra args to `TimePicker` --- components/date-time/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/date-time/index.js b/components/date-time/index.js index e8b34b4fc7b929..955120cd0e025c 100644 --- a/components/date-time/index.js +++ b/components/date-time/index.js @@ -20,7 +20,6 @@ export function DateTimePicker( { currentDate, onChange, is12Hour, ...args } ) { currentTime={ currentDate } onChange={ onChange } is12Hour={ is12Hour } - { ...args } />, ]; }