bright-components 9.31.0 → 10.0.0

package/src/components/Time/TimePicker/TimeOverlay/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
 import millisecondsToDuration from 'utils/time/millisecondsToDuration';
 import styled from 'styled-components';
@@ -85,114 +85,119 @@ const convertHours = hour => {
 	return hour > 12 ? hour - 12 : hour;
 };
 
-const TimeOverlay = ({
-	value,
-	onChange,
-	onHide,
-	hourIncrements,
-	minuteIncrements,
-	min,
-	max,
-	GA
-}) => {
-	const sanitizeValue = unsanitizedValue =>
-		getBoundedValue(
-			unsanitizedValue,
-			durationToMilliseconds(min),
-			durationToMilliseconds(max)
-		);
-
-	const [internalValue, setInternalValue] = useState(
-		sanitizeValue(durationToMilliseconds(value))
-	);
-
-	const setHandler = (unitValue, unit) => {
-		const proposedDate = new Date(internalValue);
-
-		if (unit === 'minutes') {
-			proposedDate.setUTCMinutes(
-				roundTo(minuteIncrements)(getBoundedValue(unitValue, 0, 59))
+const TimeOverlay = forwardRef(
+	(
+		{
+			value,
+			onChange,
+			onHide,
+			hourIncrements,
+			minuteIncrements,
+			min,
+			max,
+			GA
+		},
+		ref
+	) => {
+		const sanitizeValue = unsanitizedValue =>
+			getBoundedValue(
+				unsanitizedValue,
+				durationToMilliseconds(min),
+				durationToMilliseconds(max)
 			);
-		}
 
-		if (unit === 'hours') {
-			proposedDate.setUTCHours(
-				roundTo(hourIncrements)(getBoundedValue(unitValue, 0, 23))
-			);
-		}
-
-		const appliedValue = sanitizeValue(proposedDate.getTime());
-		setInternalValue(appliedValue);
-	};
-
-	const { hours, minutes } = millisecondsToDuration(internalValue);
-
-	return (
-		<Overlay>
-			<Content>
-				<UnitInput
-					unit="hours"
-					value={hours}
-					onChange={i => setHandler(i, 'hours')}
-					increment={hourIncrements}
-					min={min.hours}
-					max={max.hours}
-				/>
-				<UnitInput
-					unit="minutes"
-					value={minutes}
-					onChange={i => setHandler(i, 'minutes')}
-					increment={minuteIncrements}
-					min={hours === min.hours ? min.minutes : 0}
-					max={hours === max.hours ? max.minutes : 59}
-				/>
-			</Content>
-			<DialogButtonGroup>
-				<OutlineButton
-					type="button"
-					onClick={() => {
-						onHide();
-						if (GA) {
-							event({
-								category: GA.category,
-								action: `${GA.action} (Cancel)`
-							});
-						}
-					}}
-				>
-					Cancel
-				</OutlineButton>
-				<DisplayValue>
-					<TwentyFourHourValue>
-						{formatTimePart(hours)}:{formatTimePart(minutes)}
-					</TwentyFourHourValue>
-					<TwelveHourValue>
-						{convertHours(hours)}.{formatTimePart(minutes)}
-						{hours > 11 ? 'pm' : 'am'}{' '}
-					</TwelveHourValue>
-				</DisplayValue>
-				<BrandButton
-					type="button"
-					onClick={() => {
-						onChange({ hours, minutes });
-						onHide();
-
-						if (GA) {
-							event({
-								category: GA.category,
-								action: `${GA.action} (Apply)`,
-								label: `${hours} hrs ${minutes} mins`
-							});
-						}
-					}}
-					data-e2e="time-apply"
-				>
-					Apply
-				</BrandButton>
-			</DialogButtonGroup>
-		</Overlay>
-	);
-};
+		const [internalValue, setInternalValue] = useState(
+			sanitizeValue(durationToMilliseconds(value))
+		);
+
+		const setHandler = (unitValue, unit) => {
+			const proposedDate = new Date(internalValue);
+
+			if (unit === 'minutes') {
+				proposedDate.setUTCMinutes(
+					roundTo(minuteIncrements)(getBoundedValue(unitValue, 0, 59))
+				);
+			}
+
+			if (unit === 'hours') {
+				proposedDate.setUTCHours(
+					roundTo(hourIncrements)(getBoundedValue(unitValue, 0, 23))
+				);
+			}
+
+			const appliedValue = sanitizeValue(proposedDate.getTime());
+			setInternalValue(appliedValue);
+		};
+
+		const { hours, minutes } = millisecondsToDuration(internalValue);
+
+		return (
+			<Overlay ref={ref}>
+				<Content>
+					<UnitInput
+						unit="hours"
+						value={hours}
+						onChange={i => setHandler(i, 'hours')}
+						increment={hourIncrements}
+						min={min.hours}
+						max={max.hours}
+					/>
+					<UnitInput
+						unit="minutes"
+						value={minutes}
+						onChange={i => setHandler(i, 'minutes')}
+						increment={minuteIncrements}
+						min={hours === min.hours ? min.minutes : 0}
+						max={hours === max.hours ? max.minutes : 59}
+					/>
+				</Content>
+				<DialogButtonGroup>
+					<OutlineButton
+						type="button"
+						onClick={() => {
+							onHide();
+							if (GA) {
+								event({
+									category: GA.category,
+									action: `${GA.action} (Cancel)`
+								});
+							}
+						}}
+					>
+						Cancel
+					</OutlineButton>
+					<DisplayValue>
+						<TwentyFourHourValue>
+							{formatTimePart(hours)}:{formatTimePart(minutes)}
+						</TwentyFourHourValue>
+						<TwelveHourValue>
+							{convertHours(hours)}.{formatTimePart(minutes)}
+							{hours > 11 ? 'pm' : 'am'}{' '}
+						</TwelveHourValue>
+					</DisplayValue>
+					<BrandButton
+						type="button"
+						onClick={() => {
+							onChange({ hours, minutes });
+							onHide();
+
+							if (GA) {
+								event({
+									category: GA.category,
+									action: `${GA.action} (Apply)`,
+									label: `${hours} hrs ${minutes} mins`
+								});
+							}
+						}}
+						data-e2e="time-apply"
+					>
+						Apply
+					</BrandButton>
+				</DialogButtonGroup>
+			</Overlay>
+		);
+	}
+);
 
 const timeShape = shape({
 	hours: number,

package/src/components/Time/TimePicker/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
 import styled from 'styled-components';
 import ClockIcon from 'components/Icons/Clock';
@@ -54,6 +54,7 @@ const TimePicker = ({
 	const [pickerVisible, setPickerVisible] = useState(false);
 	const [hasFocus, setFocus] = useState(false);
 	const nodeRef = useClickOutside(() => setPickerVisible(false));
+	const myRef = useRef();
 
 	const [internalValue, setInternalValue] = useState(
 		durationToTimeString(value)
@@ -64,6 +65,14 @@ const TimePicker = ({
 		setInternalValue(durationToTimeString(value));
 	}, [value]);
 
+	useEffect(() => {
+		if (myRef.current)
+			myRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'nearest'
+			});
+	}, [pickerVisible]);
+
 	const changeHandler = ({ hours: newHours, minutes: newMinutes }) => {
 		const proposedDate = new Date(
 			durationToMs(value || { hours: 0, minutes: 0 })
@@ -180,6 +189,7 @@ const TimePicker = ({
 						minuteIncrements={minuteIncrements}
 						min={min}
 						max={max}
+						ref={myRef}
 					/>
 				)}
 			</Container>

package/src/components/WithDayPicker/index.js

@@ -101,10 +101,10 @@ WithDayPicker.defaultProps = {
 	inModal: false,
 	view: 'calendar',
 	month: today.getMonth(),
-	year: today.getYear(),
+	year: today.getFullYear(),
 	yearRange: {
-		min: today.getYear() - 1,
-		max: today.getYear() + 1
+		min: today.getFullYear() - 1,
+		max: today.getFullYear() + 1
 	},
 	onClear: undefined,
 	yearsToDisplay: null,

package/src/setupTests.js

@@ -21,6 +21,8 @@ beforeEach(() => {
 		}
 	};
 
+	Element.prototype.scrollIntoView = jest.fn();
+
 	ReactGA.initialize('foo', { testMode: true });
 	jest.clearAllMocks();
 });