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 | 181x 181x 1x 1x 1x 1x 181x | import _ from 'lodash';
import React, { useCallback } from 'react';
import { lucidClassNames } from '../../util/style-helpers';
const cx = lucidClassNames.bind('&-TimeSelect');
export interface ITimeSelectInput {
value: number;
step?: number;
name: string;
disabled?: boolean;
className?: string;
onChange(value: number): void;
}
const TimeSelectInput = ({
className,
value,
step,
name,
disabled,
onChange,
}: ITimeSelectInput) => {
const cleanedValue =
value !== null ? _.toString(value).padStart(2, '0') : '00';
const cleanOnChange = useCallback(
(event: any) => onChange(_.get(event, 'target.value', 0)),
[onChange]
);
const isDisabledClass = disabled ? '&-time-disabled' : '';
return (
<input
className={cx('&-time', className, isDisabledClass)}
key='input'
aria-label={name}
autoComplete='off'
data-input='true'
disabled={disabled}
max={60}
min={-15}
name={name}
onChange={cleanOnChange}
step={step}
type='number'
value={cleanedValue}
/>
);
};
TimeSelectInput.defaultProps = {
step: 1,
};
export default TimeSelectInput;
|