@wordpress/components 19.11.0 → 19.14.0

package/src/date-time/style.scss

@@ -1,262 +1 @@
-@import "./datepicker";
-
-.components-datetime {
-	// This padding is leveraged when the component is used alone,
-	// usually inside popovers.
-	padding: $grid-unit-20;
-
-	// This rule removes the padding when used inside a panel.
-	.components-panel__body & {
-		padding: 0;
-	}
-
-	.components-datetime__calendar-help {
-		padding: $grid-unit-20;
-		min-width: 260px;
-
-		h4 {
-			margin: 0;
-		}
-	}
-
-	.components-datetime__buttons {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.components-datetime__date-help-toggle {
-		display: block;
-		margin-left: auto;
-	}
-
-	fieldset {
-		border: 0;
-		padding: 0;
-		margin: 0;
-	}
-
-	select,
-	input {
-		@include input-style__neutral();
-	}
-
-	// Override inherited conflicting styles to be consistent.
-	select,
-	input[type="number"],
-	.components-button {
-		height: 30px;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	.components-button:focus {
-		z-index: z-index(".components-button {:focus or .is-primary}");
-	}
-}
-
-.components-datetime__date {
-	min-height: 236px;
-	border-top: 1px solid $gray-300;
-
-	// Override external DatePicker styles.
-	.DayPickerNavigation_leftButton__horizontalDefault {
-		/*!rtl:begin:ignore*/
-		left: 13px;
-		/*!rtl:end:ignore*/
-	}
-
-	.CalendarMonth_caption {
-		font-size: $default-font-size;
-	}
-
-	// Seperate borders so that border respect border radius
-	.CalendarMonth_table {
-		border-collapse: separate;
-		border-spacing: 2px;
-	}
-
-	.CalendarDay {
-		font-size: $default-font-size;
-		border: none;
-		border-radius: $radius-round;
-		text-align: center;
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
-			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
-		}
-	}
-
-	.CalendarDay__selected {
-		background: var(--wp-admin-theme-color);
-		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
-
-		&:hover {
-			background: var(--wp-admin-theme-color-darker-20);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 $border-width $white;
-		}
-	}
-
-	.DayPickerNavigation_button__horizontalDefault {
-		padding: 2px 8px;
-		top: 20px;
-
-		&:focus {
-			@include input-style__focus();
-		}
-	}
-
-	.DayPicker_weekHeader {
-		top: 50px;
-		.DayPicker_weekHeader_ul {
-			margin: 1px;
-			padding-left: 0;
-			padding-right: 0;
-		}
-	}
-
-	&.is-description-visible .DayPicker {
-		visibility: hidden;
-	}
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-content: center;
-	flex-direction: column;
-	position: relative;
-
-	&.has-events::before {
-		content: " ";
-		width: 4px;
-		height: 4px;
-		border-radius: 2px;
-		position: absolute;
-		left: 50%;
-		margin-left: -2px;
-		bottom: 0;
-		background-color: $white;
-	}
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-	background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-	padding-bottom: $grid-unit-20;
-
-	fieldset {
-		position: relative;
-		margin-bottom: 0.5em;
-	}
-
-	fieldset + fieldset {
-		margin-bottom: 0;
-	}
-
-	.components-datetime__time-field-am-pm fieldset {
-		margin-top: 0;
-	}
-
-	.components-datetime__time-wrapper {
-		display: flex;
-
-		.components-datetime__time-separator {
-			display: inline-block;
-			padding: 0 3px 0 0;
-		}
-
-		.components-datetime__time-field {
-
-			&-time {
-				/*rtl:ignore*/
-				direction: ltr;
-			}
-
-			select {
-				margin-right: $grid-unit-05;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-			}
-
-			input[type="number"] {
-				padding: 2px;
-				margin-right: $grid-unit-05;
-				text-align: center;
-				-moz-appearance: textfield;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-
-				&::-webkit-inner-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	// Makes the month appear before the day if time format uses AM/PM
-	// We are assuming MM-DD-YYY correlates with AM/PM
-	&.is-12-hour {
-		.components-datetime__time-field-day input {
-			margin: 0 -$grid-unit-05 0 0 !important;
-			border-radius: $radius-block-ui 0 0 $radius-block-ui !important;
-		}
-		.components-datetime__time-field-year input {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0 !important;
-		}
-	}
-}
-
-.components-datetime__timezone {
-	line-height: 30px;
-	margin-left: $grid-unit-05;
-	text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-	font-weight: 600;
-	margin-top: 0.5em;
-
-	&.invisible {
-		position: absolute;
-		top: -999em;
-		left: -999em;
-	}
-}
-
-.components-datetime__time-field-integer-field {
-	font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-	width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-	width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-	max-width: 145px;
-}
-
-// Hack to center the datepicker component within the popover.
-// It sets its own styles so centering is tricky.
-.components-popover .components-datetime__date {
-	padding-left: $grid-unit-05;
-}
+@import "./date/style.scss";

package/src/date-time/time/index.tsx

@@ -0,0 +1,356 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ButtonGroup from '../../button-group';
+import TimeZone from './timezone';
+import type { TimePickerProps } from '../types';
+import {
+	Wrapper,
+	Fieldset,
+	Legend,
+	HoursInput,
+	TimeSeparator,
+	MinutesInput,
+	MonthSelectWrapper,
+	MonthSelect,
+	DayInput,
+	YearInput,
+	TimeWrapper,
+} from './styles';
+import { HStack } from '../../h-stack';
+import { Spacer } from '../../spacer';
+import type { InputChangeCallback } from '../../input-control/types';
+import type { InputState } from '../../input-control/reducer/state';
+import {
+	COMMIT,
+	InputAction,
+	PRESS_DOWN,
+	PRESS_UP,
+} from '../../input-control/reducer/actions';
+
+const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
+
+function from12hTo24h( hours: number, isPm: boolean ) {
+	return isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;
+}
+
+/**
+ * Creates an InputControl reducer used to pad an input so that it is always a
+ * given width. For example, the hours and minutes inputs are padded to 2 so
+ * that '4' appears as '04'.
+ *
+ * @param  pad How many digits the value should be.
+ */
+function buildPadInputStateReducer( pad: number ) {
+	return ( state: InputState, action: InputAction ) => {
+		const nextState = { ...state };
+		if (
+			action.type === COMMIT ||
+			action.type === PRESS_UP ||
+			action.type === PRESS_DOWN
+		) {
+			if ( nextState.value !== undefined ) {
+				nextState.value = nextState.value
+					.toString()
+					.padStart( pad, '0' );
+			}
+		}
+		return nextState;
+	};
+}
+
+/**
+ * TimePicker is a React component that renders a clock for time selection.
+ *
+ * ```jsx
+ * import { TimePicker } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTimePicker = () => {
+ *   const [ time, setTime ] = useState( new Date() );
+ *
+ *   return (
+ *     <TimePicker
+ *       currentTime={ date }
+ *       onChange={ ( newTime ) => setTime( newTime ) }
+ *       is12Hour
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function TimePicker( {
+	is12Hour,
+	currentTime,
+	onChange,
+}: TimePickerProps ) {
+	const [ date, setDate ] = useState( () =>
+		// Truncate the date at the minutes, see: #15495.
+		currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
+	);
+
+	// Reset the state when currentTime changed.
+	useEffect( () => {
+		setDate(
+			currentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()
+		);
+	}, [ currentTime ] );
+
+	const { day, month, year, minutes, hours, am } = useMemo(
+		() => ( {
+			day: date.format( 'DD' ),
+			month: date.format( 'MM' ),
+			year: date.format( 'YYYY' ),
+			minutes: date.format( 'mm' ),
+			hours: date.format( is12Hour ? 'hh' : 'HH' ),
+			am: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',
+		} ),
+		[ date, is12Hour ]
+	);
+
+	const buildNumberControlChangeCallback = (
+		method: 'hours' | 'minutes' | 'date' | 'year'
+	) => {
+		const callback: InputChangeCallback = ( value, { event } ) => {
+			if ( ! ( event.target instanceof HTMLInputElement ) ) {
+				return;
+			}
+
+			if ( ! event.target.validity.valid ) {
+				return;
+			}
+
+			// We can safely assume value is a number if target is valid.
+			let numberValue = Number( value );
+
+			// If the 12-hour format is being used and the 'PM' period is
+			// selected, then the incoming value (which ranges 1-12) should be
+			// increased by 12 to match the expected 24-hour format.
+			if ( method === 'hours' && is12Hour ) {
+				numberValue = from12hTo24h( numberValue, am === 'PM' );
+			}
+
+			const newDate = date.clone()[ method ]( numberValue );
+			setDate( newDate );
+			onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+		};
+		return callback;
+	};
+
+	function buildAmPmChangeCallback( value: 'AM' | 'PM' ) {
+		return () => {
+			if ( am === value ) {
+				return;
+			}
+
+			const parsedHours = parseInt( hours, 10 );
+
+			const newDate = date
+				.clone()
+				.hours( from12hTo24h( parsedHours, value === 'PM' ) );
+			setDate( newDate );
+			onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+		};
+	}
+
+	const dayField = (
+		<DayInput
+			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
+			label={ __( 'Day' ) }
+			hideLabelFromVision
+			__next36pxDefaultSize
+			value={ day }
+			step={ 1 }
+			min={ 1 }
+			max={ 31 }
+			required
+			hideHTMLArrows
+			isPressEnterToChange
+			isDragEnabled={ false }
+			isShiftStepEnabled={ false }
+			onChange={ buildNumberControlChangeCallback( 'date' ) }
+		/>
+	);
+
+	const monthField = (
+		<MonthSelectWrapper>
+			<MonthSelect
+				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
+				label={ __( 'Month' ) }
+				hideLabelFromVision
+				__nextHasNoMarginBottom
+				value={ month }
+				options={ [
+					{ value: '01', label: __( 'January' ) },
+					{ value: '02', label: __( 'February' ) },
+					{ value: '03', label: __( 'March' ) },
+					{ value: '04', label: __( 'April' ) },
+					{ value: '05', label: __( 'May' ) },
+					{ value: '06', label: __( 'June' ) },
+					{ value: '07', label: __( 'July' ) },
+					{ value: '08', label: __( 'August' ) },
+					{ value: '09', label: __( 'September' ) },
+					{ value: '10', label: __( 'October' ) },
+					{ value: '11', label: __( 'November' ) },
+					{ value: '12', label: __( 'December' ) },
+				] }
+				onChange={ ( value ) => {
+					const newDate = date.clone().month( Number( value ) - 1 );
+					setDate( newDate );
+					onChange?.( newDate.format( TIMEZONELESS_FORMAT ) );
+				} }
+			/>
+		</MonthSelectWrapper>
+	);
+
+	return (
+		<Wrapper
+			className="components-datetime__time" // Unused, for backwards compatibility.
+		>
+			<Fieldset>
+				<Legend
+					className="components-datetime__time-legend" // Unused, for backwards compatibility.
+				>
+					{ __( 'Time' ) }
+				</Legend>
+				<HStack
+					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
+				>
+					<TimeWrapper
+						className="components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility.
+					>
+						<HoursInput
+							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
+							label={ __( 'Hours' ) }
+							hideLabelFromVision
+							__next36pxDefaultSize
+							value={ hours }
+							step={ 1 }
+							min={ is12Hour ? 1 : 0 }
+							max={ is12Hour ? 12 : 23 }
+							required
+							hideHTMLArrows
+							isPressEnterToChange
+							isDragEnabled={ false }
+							isShiftStepEnabled={ false }
+							onChange={ buildNumberControlChangeCallback(
+								'hours'
+							) }
+							__unstableStateReducer={ buildPadInputStateReducer(
+								2
+							) }
+						/>
+						<TimeSeparator
+							className="components-datetime__time-separator" // Unused, for backwards compatibility.
+							aria-hidden="true"
+						>
+							:
+						</TimeSeparator>
+						<MinutesInput
+							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
+							label={ __( 'Minutes' ) }
+							hideLabelFromVision
+							__next36pxDefaultSize
+							value={ minutes }
+							step={ 1 }
+							min={ 0 }
+							max={ 59 }
+							required
+							hideHTMLArrows
+							isPressEnterToChange
+							isDragEnabled={ false }
+							isShiftStepEnabled={ false }
+							onChange={ buildNumberControlChangeCallback(
+								'minutes'
+							) }
+							__unstableStateReducer={ buildPadInputStateReducer(
+								2
+							) }
+						/>
+					</TimeWrapper>
+					{ is12Hour && (
+						<ButtonGroup
+							className="components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility.
+						>
+							<Button
+								className="components-datetime__time-am-button" // Unused, for backwards compatibility.
+								variant={
+									am === 'AM' ? 'primary' : 'secondary'
+								}
+								onClick={ buildAmPmChangeCallback( 'AM' ) }
+							>
+								{ __( 'AM' ) }
+							</Button>
+							<Button
+								className="components-datetime__time-pm-button" // Unused, for backwards compatibility.
+								variant={
+									am === 'PM' ? 'primary' : 'secondary'
+								}
+								onClick={ buildAmPmChangeCallback( 'PM' ) }
+							>
+								{ __( 'PM' ) }
+							</Button>
+						</ButtonGroup>
+					) }
+					<Spacer />
+					<TimeZone />
+				</HStack>
+			</Fieldset>
+			<Fieldset>
+				<Legend
+					className="components-datetime__time-legend" // Unused, for backwards compatibility.
+				>
+					{ __( 'Date' ) }
+				</Legend>
+				<HStack
+					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
+				>
+					{ is12Hour ? (
+						<>
+							{ monthField }
+							{ dayField }
+						</>
+					) : (
+						<>
+							{ dayField }
+							{ monthField }
+						</>
+					) }
+					<YearInput
+						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
+						label={ __( 'Year' ) }
+						hideLabelFromVision
+						__next36pxDefaultSize
+						value={ year }
+						step={ 1 }
+						min={ 1 }
+						max={ 9999 }
+						required
+						hideHTMLArrows
+						isPressEnterToChange
+						isDragEnabled={ false }
+						isShiftStepEnabled={ false }
+						onChange={ buildNumberControlChangeCallback( 'year' ) }
+						__unstableStateReducer={ buildPadInputStateReducer(
+							4
+						) }
+					/>
+				</HStack>
+			</Fieldset>
+		</Wrapper>
+	);
+}
+
+export default TimePicker;