@drivenets/design-system 0.7.3 → 0.9.0

package/src/components/ds-time-picker/ds-time-picker.tsx

@@ -0,0 +1,178 @@
+import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
+import { Popover } from '@ark-ui/react/popover';
+import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
+import type { DsTimePickerProps } from './ds-time-picker.types';
+import { clampTime, formatTime, parseTime, timeScrollerAdapter } from './ds-time-picker.utils';
+import { TimeScroller } from './components/time-scroller/time-scroller';
+import { DsIcon } from '../ds-icon';
+import { DsButton } from '../ds-button';
+import { DsTextInput } from '../ds-text-input';
+import { useControlled } from '../../utils/use-controlled';
+import styles from './ds-time-picker.module.scss';
+
+const DsTimePicker = (props: DsTimePickerProps) => {
+	const {
+		id,
+		ref,
+		className,
+		placeholder,
+		min,
+		max,
+		disabled,
+		readOnly,
+		hideClearButton = false,
+		disablePortal = false,
+		locale,
+		slotProps,
+	} = props;
+	const [value, setValue] = useControlled(props.value, props.onChange, props.defaultValue ?? null);
+	const [isOpen, setIsOpen] = useControlled(props.open, props.onOpenChange, props.defaultOpen ?? false);
+	const [isFocused, setIsFocused] = useState(false);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const formattedValue = formatTime(value);
+
+	// If the time is before the min or after the max, immediately clamp it to the min or max
+	if (value) {
+		const clamped = clampTime(value, min, max);
+
+		if (clamped !== value) {
+			setValue(clamped);
+		}
+	}
+
+	// Reformat on value change, but skip while focused to avoid disrupting typing
+	useEffect(() => {
+		if (!isFocused && inputRef.current) {
+			inputRef.current.value = formattedValue;
+		}
+	}, [isFocused, formattedValue]);
+
+	const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const inputVal = e.target.value;
+
+		if (!inputVal) {
+			setValue(null);
+			return;
+		}
+
+		const parsed = parseTime(inputVal);
+
+		if (parsed) {
+			const newDate = value ? new Date(value) : new Date();
+			newDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+			setValue(newDate);
+		}
+	};
+
+	const handleFocus = () => {
+		setIsFocused(true);
+	};
+
+	const resetInput = () => {
+		if (inputRef.current) {
+			inputRef.current.value = value ? formattedValue : '';
+		}
+	};
+
+	const handleBlur = () => {
+		setIsFocused(false);
+
+		const inputVal = inputRef.current?.value ?? '';
+
+		if (!inputVal) {
+			setValue(null);
+			return;
+		}
+
+		const parsed = parseTime(inputVal);
+
+		if (parsed) {
+			const newDate = value ? new Date(value) : new Date();
+			newDate.setHours(parsed.hours, parsed.minutes, 0, 0);
+			setValue(newDate);
+		} else {
+			resetInput();
+		}
+	};
+
+	const handleOpenChange = (details: Popover.OpenChangeDetails) => {
+		if (disabled || readOnly) {
+			return;
+		}
+
+		setIsOpen(details.open);
+	};
+
+	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
+
+	const Wrapper = disablePortal ? Fragment : Portal;
+
+	return (
+		<Popover.Root
+			open={isOpen}
+			onOpenChange={handleOpenChange}
+			positioning={{ placement: 'bottom-start', gutter: 4 }}
+		>
+			<Popover.Anchor asChild>
+				<div ref={ref} className={classNames(styles.root, className)}>
+					<DsTextInput
+						ref={inputRef}
+						id={id}
+						placeholder={placeholder ?? 'hh:mm AM/PM'}
+						defaultValue={formattedValue}
+						onChange={handleInputChange}
+						onFocus={handleFocus}
+						onBlur={handleBlur}
+						readOnly={readOnly}
+						disabled={disabled}
+						{...slotProps?.input}
+						slots={{
+							endAdornment: slotProps?.input?.slots?.endAdornment ?? (
+								<>
+									{showClearButton && (
+										<DsButton
+											className={styles.clearTrigger}
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled}
+											aria-label={locale?.clearLabel ?? 'Clear time'}
+											onClick={() => setValue(null)}
+										>
+											<DsIcon icon="close" size="tiny" />
+										</DsButton>
+									)}
+									<Popover.Trigger asChild>
+										<DsButton
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled || readOnly}
+											aria-label={locale?.openLabel ?? 'Open time picker'}
+										>
+											<DsIcon icon="schedule" variant="outlined" size="tiny" />
+										</DsButton>
+									</Popover.Trigger>
+								</>
+							),
+							...slotProps?.input?.slots,
+						}}
+					/>
+				</div>
+			</Popover.Anchor>
+
+			<Wrapper>
+				<Popover.Positioner>
+					<Popover.Content {...slotProps?.popover}>
+						<TimeScroller open={isOpen} {...timeScrollerAdapter(value, setValue, min, max)} />
+					</Popover.Content>
+				</Popover.Positioner>
+			</Wrapper>
+		</Popover.Root>
+	);
+};
+
+export default DsTimePicker;

package/src/components/ds-time-picker/ds-time-picker.types.ts

@@ -0,0 +1,54 @@
+import type { RefObject } from 'react';
+import type { DsTextInputProps } from '../ds-text-input';
+import type { PopoverContentProps } from '@ark-ui/react/popover';
+
+export interface DsTimePickerProps {
+	id?: string;
+	ref?: RefObject<HTMLDivElement>;
+	className?: string;
+
+	value?: Date | null;
+	defaultValue?: Date;
+
+	open?: boolean;
+	defaultOpen?: boolean;
+
+	placeholder?: string;
+
+	min?: Date;
+	max?: Date;
+
+	disabled?: boolean;
+	readOnly?: boolean;
+
+	/**
+	 * Whether to hide the clear button
+	 * @default false
+	 */
+	hideClearButton?: boolean;
+
+	/**
+	 * Whether to disable the portal for the popover content
+	 * @default false
+	 */
+	disablePortal?: boolean;
+
+	locale?: DsTimePickerLocale;
+	slotProps?: DsTimePickerSlotProps;
+
+	onChange?: (value: Date | null) => void;
+	onOpenChange?: (open: boolean) => void;
+}
+
+export interface DsTimePickerLocale {
+	openLabel?: string;
+	clearLabel?: string;
+	hourLabel?: string;
+	minuteLabel?: string;
+	periodLabel?: string;
+}
+
+export interface DsTimePickerSlotProps {
+	input?: DsTextInputProps;
+	popover?: PopoverContentProps;
+}

package/src/components/ds-time-picker/ds-time-picker.utils.ts

@@ -0,0 +1,176 @@
+import type { TimePeriod, TimeScrollerProps } from './components/time-scroller';
+
+const AM_END = 11 * 60 + 59;
+const PM_START = 12 * 60;
+const PM_END = 23 * 60 + 59;
+
+const to24Hour = (hour12: number, period: TimePeriod): number => {
+	if (period === 'AM') {
+		return hour12 === 12 ? 0 : hour12;
+	}
+
+	return hour12 === 12 ? 12 : hour12 + 12;
+};
+
+const to12Hour = (hour24: number): number => {
+	if (hour24 === 0) {
+		return 12;
+	}
+
+	return hour24 > 12 ? hour24 - 12 : hour24;
+};
+
+const toMinutesSinceMidnight = (date: Date): number => {
+	return date.getHours() * 60 + date.getMinutes();
+};
+
+/**
+ * If the time is before the min or after the max, clamp it to the min or max
+ */
+export const clampTime = (date: Date, min?: Date, max?: Date): Date => {
+	const time = toMinutesSinceMidnight(date);
+
+	if (min && time < toMinutesSinceMidnight(min)) {
+		const clamped = new Date(date);
+		clamped.setHours(min.getHours(), min.getMinutes(), 0, 0);
+		return clamped;
+	}
+
+	if (max && time > toMinutesSinceMidnight(max)) {
+		const clamped = new Date(date);
+		clamped.setHours(max.getHours(), max.getMinutes(), 0, 0);
+		return clamped;
+	}
+
+	return date;
+};
+
+const getTimeRange = (min?: Date, max?: Date) => ({
+	minTime: min ? toMinutesSinceMidnight(min) : 0,
+	maxTime: max ? toMinutesSinceMidnight(max) : PM_END,
+});
+
+const validateMinMax = (hour?: number, period?: TimePeriod, min?: Date, max?: Date) => {
+	if (!min && !max) {
+		return {};
+	}
+
+	const { minTime, maxTime } = getTimeRange(min, max);
+
+	return {
+		isPeriodDisabled: (p: TimePeriod) => {
+			if (p === 'AM') {
+				return AM_END < minTime;
+			}
+
+			return PM_END < minTime || PM_START > maxTime;
+		},
+
+		isHourDisabled: (h: number) => {
+			if (!period) {
+				return false;
+			}
+
+			const h24 = to24Hour(h, period);
+			return h24 * 60 + 59 < minTime || h24 * 60 > maxTime;
+		},
+
+		isMinuteDisabled: (m: number) => {
+			if (hour === undefined || !period) {
+				return false;
+			}
+
+			const time = to24Hour(hour, period) * 60 + m;
+			return time < minTime || time > maxTime;
+		},
+	};
+};
+
+/**
+ * Format a Date to a 12-hour time string (hh:mm AM/PM)
+ */
+export const formatTime = (date?: Date | null): string => {
+	if (!date) {
+		return '';
+	}
+
+	const hour24 = date.getHours();
+	const minute = date.getMinutes();
+	const period = hour24 >= 12 ? 'PM' : 'AM';
+	const paddedHour = String(to12Hour(hour24)).padStart(2, '0');
+	const paddedMinute = String(minute).padStart(2, '0');
+
+	return `${paddedHour}:${paddedMinute} ${period}`;
+};
+
+/**
+ * Parse a 12-hour time string (hh:mm AM/PM) to an object with hours and minutes
+ */
+export const parseTime = (text: string) => {
+	const match = text.match(/^(\d{1,2}):(\d{2})\s+(AM|PM)$/i);
+
+	if (!match?.[1] || !match[2] || !match[3]) {
+		return null;
+	}
+
+	const h12 = parseInt(match[1], 10);
+	const minutes = parseInt(match[2], 10);
+	const period = match[3].toUpperCase();
+
+	if (h12 < 1 || h12 > 12 || minutes < 0 || minutes > 59) {
+		return null;
+	}
+
+	const hours = period === 'AM' ? (h12 === 12 ? 0 : h12) : h12 === 12 ? 12 : h12 + 12;
+
+	return { hours, minutes };
+};
+
+export const timeScrollerAdapter = (
+	date?: Date | null,
+	setDate?: (date: Date | null) => void,
+	min?: Date,
+	max?: Date,
+) => {
+	const hour = date ? to12Hour(date.getHours()) : undefined;
+	const minute = date?.getMinutes();
+	const period = date ? (date.getHours() >= 12 ? 'PM' : 'AM') : undefined;
+
+	const clampAndSet = (newDate: Date) => {
+		setDate?.(clampTime(newDate, min, max));
+	};
+
+	const { isHourDisabled, isMinuteDisabled, isPeriodDisabled } = validateMinMax(hour, period, min, max);
+
+	return {
+		slotProps: {
+			hour: {
+				value: hour,
+				onChange: (h: number) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(h, period ?? 'AM'), minute ?? 0, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isHourDisabled,
+			},
+			minute: {
+				value: minute,
+				onChange: (m: number) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(hour ?? 12, period ?? 'AM'), m, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isMinuteDisabled,
+			},
+			period: {
+				value: period,
+				onChange: (p: TimePeriod) => {
+					const newDate = date ? new Date(date) : new Date();
+					newDate.setHours(to24Hour(hour ?? 12, p), minute ?? 0, 0, 0);
+					clampAndSet(newDate);
+				},
+				isDisabled: isPeriodDisabled,
+			},
+		},
+	} satisfies Pick<TimeScrollerProps, 'slotProps'>;
+};