lucid-ui
Version:
A UI component library from Xandr.
51 lines • 2.13 kB
JavaScript
import React, { useCallback } from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import TimeSelectInput from './TimeSelectInput';
const cx = lucidClassNames.bind('&-TimeSelect');
const getCleanedHour = (partialCleanedHour) => {
return partialCleanedHour < 0
? 23
: partialCleanedHour > 23
? 0
: partialCleanedHour;
};
const getCleanedAMHour = (nextHour) => {
const partialCleanedHour = nextHour > 12 ? nextHour - 12 : nextHour < 0 ? nextHour + 12 : nextHour;
return getCleanedHour(partialCleanedHour);
};
const getCleanedPMHour = (nextHour) => {
const partialCleanedHour = nextHour === 12 ? 12 : nextHour > 12 ? nextHour : nextHour + 12;
return getCleanedHour(partialCleanedHour);
};
const TimeSelectHour = ({ hour, is24HourClock, time, isAM, isDisabled, onChange, }) => {
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 (React.createElement(TimeSelectInput, { className: cx('&-time-hour'), value: hour, name: 'Hour', onChange: onHourChange, disabled: isDisabled }));
};
export default TimeSelectHour;
//# sourceMappingURL=TimeSelectHour.js.map