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; |