time-period-select.tsx•2.43 kB
'use client';
import { t } from 'i18next';
import * as React from 'react';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { Period, display12HourValue, setDateByType } from './time-picker-utils';
export interface PeriodSelectorProps {
period: Period;
setPeriod: (m: Period) => void;
date: Date | undefined;
setDate: (date: Date) => void;
onRightFocus?: () => void;
onLeftFocus?: () => void;
isActive: boolean;
}
export const TimePeriodSelect = React.forwardRef<
HTMLButtonElement,
PeriodSelectorProps
>(
(
{ period, setPeriod, date, setDate, onLeftFocus, onRightFocus, isActive },
ref,
) => {
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.key === 'ArrowRight') onRightFocus?.();
if (e.key === 'ArrowLeft') onLeftFocus?.();
};
const handleValueChange = (value: Period) => {
setPeriod(value);
/**
* trigger an update whenever the user switches between AM and PM;
* otherwise user must manually change the hour each time
*/
if (date) {
const tempDate = new Date(date);
const hours = display12HourValue(date.getHours());
setDate(
setDateByType(
tempDate,
hours.toString(),
'12hours',
period === 'AM' ? 'PM' : 'AM',
),
);
}
};
return (
<div className="flex h-10 items-center">
<Select
value={period}
onValueChange={(value: Period) => handleValueChange(value)}
>
<SelectTrigger
ref={ref}
className={cn(
' hover:bg-accent w-[73px] h-[29px] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-xs justify-center p-0 transition-all border-none text-sm shadow-none gap-3 ',
{
'bg-background': isActive,
},
)}
onKeyDown={handleKeyDown}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="AM">{t('AM')}</SelectItem>
<SelectItem value="PM">{t('PM')}</SelectItem>
</SelectContent>
</Select>
</div>
);
},
);
TimePeriodSelect.displayName = 'TimePeriodSelect';