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 | 5x 5x 1x 1x 1x 1x 5x | 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; |