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 | 1x 4x 4x 4x | import React, { type ChangeEvent } from 'react';
import { type Control, Controller, type FieldValues } from 'react-hook-form';
import { TextInput } from '@carbon/react';
import { type TextInputProps } from '@carbon/react/lib/components/TextInput/TextInput';
interface ControlledTextInputProps<T> extends TextInputProps {
controllerName: string;
name: string;
control: Control<FieldValues, T>;
}
const ControlledTextInput = <T,>(props: ControlledTextInputProps<T>) => {
const { controllerName, control, ...textInputProps } = props;
return (
<Controller
name={controllerName}
control={control}
render={({ field: { onChange, value, ref } }) => (
<TextInput
{...textInputProps}
onChange={(e: ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
// Fire prop change
if (props.onChange) {
props.onChange(e);
}
}}
id={props.id}
ref={ref}
value={value ?? props.value}
/>
)}
/>
);
};
export default ControlledTextInput;
|