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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 178x 178x 178x 178x 178x 178x 178x 178x 178x 178x 178x 5x 5x 5x 5x 5x 1x 4x 4x 4x 5x 5x 5x 5x 5x 178x 178x 178x 178x | import React, { useMemo, useState } from 'react';
import { lucidClassNames } from '../../util/style-helpers';
import ClockIcon from '../Icon/ClockIcon/ClockIcon';
import TimeSelectHour from './TimeSelectHour';
import TimeSelectMeridiem from './TimeSelectMeridiem';
import TimeSelectMinute from './TimeSelectMinute';
const cx = lucidClassNames.bind('&-TimeSelect');
export interface ITimeSelect {
/** JS Date for the time to display and update */
time: Date;
/** Set to true to display the TimeSelect as a 24 hour clock. Set to false
to display the TimeSelect as a 12 hour clock */
is24HourClock?: boolean;
/** The callback that will take a new Date object */
onChange(time: Date): void;
/** Set to true to disable the TimeSelect */
isDisabled?: boolean;
}
enum MeridiemType {
AM = 'AM',
PM = 'PM',
}
const TimeSelect = ({
time,
is24HourClock,
onChange,
isDisabled,
}: ITimeSelect) => {
const [inputFocus, setInputFocus] = useState(false);
const minute = useMemo(() => time.getMinutes(), [time]);
const { hour, meridiem = MeridiemType.AM } = useMemo(() => {
const hour = time.getHours();
if (is24HourClock) {
return { hour };
}
const cleanedHour =
hour === 0 || hour === 12 ? 12 : hour < 12 ? hour : hour - 12;
const cleanedMeridiem = hour < 12 ? MeridiemType.AM : MeridiemType.PM;
return { hour: cleanedHour, meridiem: cleanedMeridiem };
}, [time, is24HourClock]);
const isAM = useMemo(() => meridiem === MeridiemType.AM, [meridiem]);
const isDisabledClass = isDisabled ? '&-time-disabled' : '';
const timeSelectorClass = isDisabled ? '&-isDisabled' : '';
const toggleInputFocus = () => setInputFocus(!inputFocus);
return (
<div
className={cx('&', timeSelectorClass)}
onFocus={toggleInputFocus}
onBlur={toggleInputFocus}
>
<TimeSelectHour
hour={hour}
time={time}
is24HourClock={is24HourClock}
isAM={isAM}
isDisabled={isDisabled}
onChange={onChange}
/>
<span className={cx(isDisabledClass)}>:</span>
<TimeSelectMinute
minute={minute}
time={time}
isDisabled={isDisabled}
onChange={onChange}
/>
{!is24HourClock && (
<TimeSelectMeridiem
hour={hour}
meridiem={meridiem}
time={time}
isDisabled={isDisabled}
onChange={onChange}
/>
)}
<ClockIcon
className={cx('&-clock', { active: !isDisabled && inputFocus })}
disabled={isDisabled}
/>
</div>
);
};
TimeSelect.peek = {
notes: {
overview: `
A time selector that is tab-able. Hour/Minute/Meridiem are tied together. As a user scrolls
up or down, the hours or minutes and meridiem will corresponding scroll.
`,
technicalRecommendations: `
User must provide value. This component will process and return the next values.
For use as a pluggable pure functional component.
`,
intendedUse: `
Help users select a time with less risk of typing incorrect data.
`,
},
categories: ['controls', 'selectors'],
};
TimeSelect.defaultProps = {
time: new Date(),
};
export default TimeSelect;
export { MeridiemType };
|