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 | 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x | import { FC } from 'react'
import { Controller, useFormContext } from 'react-hook-form'
import { NumericFormat } from 'react-number-format'
import { Input } from '@/shared/ui'
import { useTranslate } from '@/shared/lib'
import cn from 'classnames'
export interface TimeInputProps {
isReadMode?: boolean
minutesFieldName: string
secondsFieldName: string
label: string
fullWidth?: boolean
isLoading?: boolean
}
export const TimeInput: FC<TimeInputProps> = ({
isReadMode,
minutesFieldName,
secondsFieldName,
label,
fullWidth = false,
isLoading,
}) => {
const { t } = useTranslate(['common'])
const { control } = useFormContext()
return (
<div className='flex flex-col'>
<h4 className='text-text-secondary'>{label}</h4>
<div className='flex items-center gap-x-2.5'>
<Controller
control={control}
render={({ field, fieldState: { error } }) => (
<NumericFormat
{...field}
className={cn({
'max-w-[160px]': !fullWidth,
'max-w-fit': isReadMode,
})}
customInput={Input}
decimalScale={0}
isFilter
isSaved={isReadMode}
isLoading={isLoading}
error={error}
/>
)}
name={minutesFieldName}
/>
<h4 className='text-text-secondary'>{t('min')}.</h4>
<Controller
control={control}
render={({ field, fieldState: { error } }) => (
<NumericFormat
{...field}
className={cn({
'max-w-[160px]': !fullWidth,
'max-w-fit': isReadMode,
})}
customInput={Input}
decimalScale={0}
isSaved={isReadMode}
isFilter
isLoading={isLoading}
error={error}
/>
)}
name={secondsFieldName}
/>
<h4 className='text-text-secondary'>{t('sec')}.</h4>
</div>
</div>
)
}
|