refactor(@clayui/date-picker): controls the state of the TimePicker v…

…alues with the DatePicker input and remove timeFormat API
liferay · Jul 22, 2019 · a22e825 · a22e825
1 parent 68003a7
commit a22e825
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 45 deletions.
diff --git a/packages/clay-date-picker/src/Hooks.ts b/packages/clay-date-picker/src/Hooks.ts
@@ -35,18 +35,28 @@ const useCurrentTime = (format: string) => {
 			.format(format)
 	);
 
-	function setCurrentTime(hours: number, minutes: number): void {
-		set(
-			moment()
+	function setCurrentTime(
+		hours: number | string,
+		minutes: number | string
+	): void {
+		if (typeof hours !== 'string') {
+			hours = moment()
 				.set('h', hours)
+				.format('H');
+		}
+
+		if (typeof minutes !== 'string') {
+			minutes = moment()
 				.set('m', minutes)
-				.format(format)
-		);
+				.format('m');
+		}
+
+		set(`${hours}:${minutes}`);
 	}
 
 	return [currentTime, setCurrentTime] as [
 		string,
-		(hours: number, minutes: number) => void
+		(hours: number | string, minutes: number | string) => void
 	];
 };
 

diff --git a/packages/clay-date-picker/src/TimePicker.tsx b/packages/clay-date-picker/src/TimePicker.tsx
@@ -4,50 +4,66 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import ClayTimePicker from '@clayui/time-picker';
-import Icon from '@clayui/icon';
-import moment from 'moment';
-import React, {ChangeEventHandler, FunctionComponent} from 'react';
+import ClayTimePicker, {Input} from '@clayui/time-picker';
+import React, {useEffect, useState} from 'react';
 
 interface IProps {
 	currentTime: string;
-	onTimeChange: (hours: number, minutes: number) => void;
+	onTimeChange: (hours: number | string, minutes: number | string) => void;
 	spritemap: string;
-	timeFormat: string;
 	timezone?: string;
 }
 
-const ClayDatePickerTimePicker: FunctionComponent<IProps> = ({
+const DEFAULT_VALUE = '--';
+
+const ClayDatePickerTimePicker: React.FunctionComponent<IProps> = ({
 	currentTime,
 	onTimeChange,
 	spritemap,
-	timeFormat,
 	timezone,
 }) => {
+	const [values, setValues] = useState<Input>({
+		ampm: DEFAULT_VALUE,
+		hours: DEFAULT_VALUE,
+		minutes: DEFAULT_VALUE,
+	});
+
 	/**
 	 * Handles the control time picker
 	 */
-	const handleOnChange: ChangeEventHandler<HTMLInputElement> = event => {
-		const date = moment(event.target.value, timeFormat);
-		onTimeChange(date.hours(), date.minutes());
+	const handleOnChange = (values: Input) => {
+		const hours =
+			values.hours === DEFAULT_VALUE
+				? DEFAULT_VALUE
+				: Number(values.hours);
+		const minutes =
+			values.minutes === DEFAULT_VALUE
+				? DEFAULT_VALUE
+				: Number(values.minutes);
+
+		setValues(values);
+		onTimeChange(hours, minutes);
 	};
 
+	useEffect(() => {
+		const time = currentTime.split(':');
+
+		setValues(prevValues => ({
+			...prevValues,
+			hours: String(time[0]),
+			minutes: String(time[1]),
+		}));
+	}, [currentTime]);
+
 	return (
 		<div className="time-picker">
-			<div className="input-group">
-				<div className="input-group-item input-group-item-shrink">
-					<span className="input-group-text">
-						<Icon spritemap={spritemap} symbol="time" />
-					</span>
-				</div>
-				<ClayTimePicker
-					name="timer"
-					onChange={handleOnChange}
-					timezone={timezone}
-					value={currentTime}
-					wrapTime={false}
-				/>
-			</div>
+			<ClayTimePicker
+				icon
+				onInputChange={handleOnChange}
+				spritemap={spritemap}
+				timezone={timezone}
+				values={values}
+			/>
 		</div>
 	);
 };

diff --git a/packages/clay-date-picker/src/index.tsx b/packages/clay-date-picker/src/index.tsx
@@ -98,12 +98,6 @@ interface IProps {
 	 */
 	time?: boolean;
 
-	/**
-	 * Set the format of how the time will appear in the input element.
-	 * See available: https://momentjs.com/docs/#/parsing/string-format/
-	 */
-	timeFormat?: string;
-
 	/**
 	 * Flag to indicate the timezone of the Time Picker.
 	 */
@@ -132,6 +126,7 @@ interface IProps {
 }
 
 const DateNow = new Date();
+const TIME_FORMAT = 'H:m';
 
 /**
  * ClayDatePicker component.
@@ -167,7 +162,6 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 	placeholder,
 	spritemap,
 	time = false,
-	timeFormat = 'HH:mm',
 	timezone,
 	useNative = false,
 	value,
@@ -200,7 +194,7 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 	/**
 	 * Indicates the time selected by the user.
 	 */
-	const [currentTime, setCurrentTime] = useCurrentTime(timeFormat);
+	const [currentTime, setCurrentTime] = useCurrentTime(TIME_FORMAT);
 
 	/**
 	 * The day selected by the user.
@@ -258,7 +252,7 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 	 */
 	const inputChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const {value} = event.target;
-		const format = time ? `${dateFormat} ${timeFormat}` : dateFormat;
+		const format = time ? `${dateFormat} ${TIME_FORMAT}` : dateFormat;
 		const date = moment(value, format);
 		const year = date.year();
 
@@ -283,6 +277,21 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 		onValueChange(initialMonth);
 	};
 
+	const handleTimeChange = (
+		hours: number | string,
+		minutes: number | string
+	) => {
+		const format = time ? `${dateFormat} ${TIME_FORMAT}` : dateFormat;
+
+		// Hack to force InputDate to add `currentTime` to the value of
+		// the input when the value was edited by the user.
+		if (typeof value === 'string' && moment(value, format).isValid()) {
+			onValueChange(moment(value, format).toDate());
+		}
+
+		setCurrentTime(hours, minutes);
+	};
+
 	/**
 	 * Handles datepicker view
 	 */
@@ -300,7 +309,7 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 						onChange={inputChange}
 						placeholder={placeholder}
 						time={time}
-						timeFormat={timeFormat}
+						timeFormat={TIME_FORMAT}
 						useNative={useNative}
 						value={value}
 					/>
@@ -363,9 +372,8 @@ const ClayDatePicker: FunctionComponent<IProps> = ({
 								{time && (
 									<TimePicker
 										currentTime={currentTime}
-										onTimeChange={setCurrentTime}
+										onTimeChange={handleTimeChange}
 										spritemap={spritemap}
-										timeFormat={timeFormat}
 										timezone={timezone}
 									/>
 								)}

diff --git a/packages/clay-date-picker/stories/index.tsx b/packages/clay-date-picker/stories/index.tsx
@@ -25,8 +25,10 @@ const ClayDatePickerWithState = (props: {[key: string]: any}) => {
 
 storiesOf('ClayDatePicker', module)
 	.addDecorator(storyFn => (
-		<div className="form-group" style={{maxWidth: 520}}>
-			{storyFn()}
+		<div className="sheet">
+			<div className="form-group" style={{maxWidth: 520}}>
+				{storyFn()}
+			</div>
 		</div>
 	))
 	.add('default', () => (