All files / TimeSelect TimeSelectMeridiem.tsx

92.3% Statements 12/13
75% Branches 9/12
100% Functions 2/2
92.3% Lines 12/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59          2x 2x                   2x             8x     2x 2x     2x 2x 1x   1x   2x       8x                                    
import React, { useCallback } from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import SingleSelect from '../SingleSelect/SingleSelect';
import { MeridiemType } from './TimeSelect';
 
const cx = lucidClassNames.bind('&-TimeSelect');
const { Option } = SingleSelect;
 
interface ITimeSelectMeridiem {
	hour: number;
	meridiem: MeridiemType;
	time: Date;
	isDisabled?: boolean;
	onChange(time: Date): void;
}
 
const TimeSelectMeridiem = ({
	hour,
	meridiem,
	time,
	isDisabled,
	onChange,
}: ITimeSelectMeridiem) => {
	const onMeridiemChange = useCallback(
		(selectedIndex) => {
			const nextMeridiem =
				selectedIndex === 0 ? MeridiemType.AM : MeridiemType.PM;
			Iif (meridiem === nextMeridiem) {
				return;
			}
			const updatedTime = new Date(time);
			if (nextMeridiem === MeridiemType.AM) {
				updatedTime.setHours(hour === 12 ? 0 : hour);
			} else {
				updatedTime.setHours(hour === 12 ? hour : hour + 12);
			}
			onChange(updatedTime);
		},
		[time, hour]
	);
	return (
		<SingleSelect
			className={cx('&-meridiem')}
			isSelectionHighlighted={false}
			showIcon={false}
			selectedIndex={MeridiemType.AM === meridiem ? 0 : 1}
			isInvisible
			onSelect={onMeridiemChange}
			isDisabled={isDisabled}
			hasReset={false}
		>
			<Option>{MeridiemType.AM}</Option>
			<Option>{MeridiemType.PM}</Option>
		</SingleSelect>
	);
};
 
export default TimeSelectMeridiem;