All files / TimeSelect TimeSelectInput.tsx

87.5% Statements 7/8
50% Branches 2/4
50% Functions 1/2
87.5% Lines 7/8

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;