|
| 1 | +import { FieldValues, UseFormRegister } from 'react-hook-form'; |
| 2 | + |
| 3 | +interface ICustomValidation { |
| 4 | + required: boolean; |
| 5 | + minlength: number; |
| 6 | +} |
| 7 | + |
| 8 | +interface Errors {} |
| 9 | + |
| 10 | +export interface IInputRootObject { |
| 11 | + inputLabel: string; |
| 12 | + inputName: string; |
| 13 | + customValidation: ICustomValidation; |
| 14 | + errors: Errors; |
| 15 | + register: UseFormRegister<FieldValues>; |
| 16 | + type?: string; |
| 17 | +} |
| 18 | + |
1 | 19 | /**
|
2 | 20 | * Input field component displays a text input in a form, with label.
|
3 | 21 | * The various properties of the input field can be determined with the props:
|
4 | 22 | * @param {Object} [customValidation] - the validation rules to apply to the input field
|
5 | 23 | * @param {Object} errors - the form errors object provided by react-hook-form
|
6 |
| - * @param {string} label - used for the display label |
7 |
| - * @param {string} name - the key of the value in the submitted data. Must be unique |
8 |
| - * @param {function} register - register function from react-hook-form |
| 24 | + * @param {string} inputLabel - used for the display label |
| 25 | + * @param {string} inputName - the key of the value in the submitted data. Must be unique |
| 26 | + * @param {UseFormRegister<FieldValues>} register - register function from react-hook-form |
9 | 27 | * @param {boolean} [required=true] - whether or not this field is required. default true
|
10 | 28 | * @param {'text'|'number'} [type='text'] - the input type. defaults to text
|
11 | 29 | */
|
12 | 30 | export const InputField = ({
|
13 |
| - customValidation = {}, |
14 |
| - label, |
15 |
| - name, |
| 31 | + customValidation, |
| 32 | + inputLabel, |
| 33 | + inputName, |
16 | 34 | register,
|
17 |
| - type = 'text', |
18 |
| -}: any) => ( |
| 35 | + type, |
| 36 | +}: IInputRootObject) => ( |
19 | 37 | <div className="w-1/2 p-2">
|
20 |
| - <label htmlFor={name} className="pb-4"> |
21 |
| - {label} |
| 38 | + <label htmlFor={inputName} className="pb-4"> |
| 39 | + {inputLabel} |
22 | 40 | </label>
|
23 | 41 | <input
|
24 | 42 | className="bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
25 |
| - name={name} |
26 |
| - id={name} |
27 |
| - placeholder={label} |
28 |
| - label={label} |
| 43 | + id={inputName} |
| 44 | + placeholder={inputLabel} |
29 | 45 | type={type ?? 'text'}
|
30 | 46 | {...customValidation}
|
31 |
| - {...register(name)} |
| 47 | + {...register(inputName)} |
32 | 48 | />
|
33 | 49 | </div>
|
34 | 50 | );
|
0 commit comments