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 | 1x 1x | import { TFunction } from '@/shared/@types'
import { Datepicker, Input } from '@tmk/ui-kit'
import { ControllerRenderProps, FieldError, FieldValues } from 'react-hook-form'
export type FieldErrorNested = { value: FieldError | undefined }
export interface GetFormField<FieldName extends string> {
field: ControllerRenderProps<FieldValues, FieldName>
value: string
label: string
type: 'string' | 'number' | 'date'
error: FieldErrorNested | FieldError | undefined
t: TFunction
valueAsObject?: boolean
}
export const getFormField = <FieldName extends string>({
label,
type,
error,
field,
value,
valueAsObject = false,
t,
}: GetFormField<FieldName>) => {
const errorStructure = (valueAsObject ? (error as FieldErrorNested)?.value : error) as FieldError
const hasError = errorStructure && Object.keys(errorStructure).length > 0 && errorStructure.message
const fieldError = hasError ? errorStructure : undefined
switch (type) {
case 'string':
return (
<Input
className='col-span-1'
error={fieldError}
label={t(label)}
placeholder={t(label)}
{...field}
value={value}
onChange={event => {
!valueAsObject && field.onChange(event.target.value)
valueAsObject && field.onChange({ ...field.value, value: event.target.value })
}}
/>
)
case 'number':
return (
<Input
className='col-span-1'
type='number'
error={fieldError}
label={t(label)}
{...field}
value={value}
onChange={event => {
!valueAsObject && field.onChange(event.target.value)
valueAsObject && field.onChange({ ...field.value, value: event.target.value })
}}
/>
)
case 'date':
return (
<Datepicker
className='col-span-1'
inputProps={{
label: t(label),
error: fieldError,
}}
{...field}
value={value}
onChange={event => {
!valueAsObject && field.onChange(event)
valueAsObject && field.onChange({ ...field.value, value: event })
}}
/>
)
}
}
|