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