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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 3x 3x 3x 3x 3x 1x 3x 3x 1x 1x 3x 17x 8x 8x 8x 3x 3x 5x 5x 5x 5x 2x 3x 2x 1x 5x 8x 17x 3x | import React, { useCallback } from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import TimeSelectInput from './TimeSelectInput';
const cx = lucidClassNames.bind('&-TimeSelect');
const getCleanedHour = (partialCleanedHour: number) => {
return partialCleanedHour < 0
? 23
: partialCleanedHour > 23
? 0
: partialCleanedHour;
};
const getCleanedAMHour = (nextHour: number) => {
const partialCleanedHour =
nextHour > 12 ? nextHour - 12 : nextHour < 0 ? nextHour + 12 : nextHour;
return getCleanedHour(partialCleanedHour);
};
const getCleanedPMHour = (nextHour: number) => {
const partialCleanedHour =
nextHour === 12 ? 12 : nextHour > 12 ? nextHour : nextHour + 12;
return getCleanedHour(partialCleanedHour);
};
interface ITimeSelectHour {
hour: number;
time: Date;
is24HourClock?: boolean;
isAM: boolean;
isDisabled?: boolean;
onChange(time: Date): void;
}
const TimeSelectHour = ({
hour,
is24HourClock,
time,
isAM,
isDisabled,
onChange,
}: ITimeSelectHour) => {
const onHourChange = useCallback(
nextHourString => {
const nextHour = +nextHourString;
const updatedTime = new Date(time);
if (is24HourClock) {
const cleanedNextHour =
nextHour < 0 ? -1 : nextHour > 23 ? 24 : nextHour;
updatedTime.setHours(cleanedNextHour);
} else {
const nextHouris12 = nextHour === 12;
const shouldRollOver = hour === 11 && nextHouris12;
const shouldRollBack = hour === 12 && nextHour === 11;
let cleanedHour;
if (shouldRollOver) {
cleanedHour = isAM ? 12 : 24;
} else if (shouldRollBack) {
cleanedHour = isAM ? -1 : 11;
} else {
cleanedHour = isAM
? getCleanedAMHour(nextHour)
: getCleanedPMHour(nextHour);
}
updatedTime.setHours(cleanedHour);
}
onChange(updatedTime);
},
[time, is24HourClock, isAM, hour]
);
return (
<TimeSelectInput
className={cx('&-time-hour')}
value={hour}
name='Hour'
onChange={onHourChange}
disabled={isDisabled}
/>
);
};
export default TimeSelectHour;
|