Skip to content

Commit d8e3654

Browse files
committed
Typescript improvements
1 parent 5c66903 commit d8e3654

File tree

2 files changed

+33
-17
lines changed

2 files changed

+33
-17
lines changed

refactor/src/components/Checkout/Billing.component.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ const Billing = ({ onSubmit }: any) => {
3737
{INPUT_FIELDS.map(({ id, label, name, customValidation }) => (
3838
<InputField
3939
key={id}
40-
label={label}
41-
name={name}
40+
inputLabel={label}
41+
inputName={name}
4242
customValidation={customValidation}
4343
errors={errors}
4444
register={register}
Lines changed: 31 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
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+
119
/**
220
* Input field component displays a text input in a form, with label.
321
* The various properties of the input field can be determined with the props:
422
* @param {Object} [customValidation] - the validation rules to apply to the input field
523
* @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
927
* @param {boolean} [required=true] - whether or not this field is required. default true
1028
* @param {'text'|'number'} [type='text'] - the input type. defaults to text
1129
*/
1230
export const InputField = ({
13-
customValidation = {},
14-
label,
15-
name,
31+
customValidation,
32+
inputLabel,
33+
inputName,
1634
register,
17-
type = 'text',
18-
}: any) => (
35+
type,
36+
}: IInputRootObject) => (
1937
<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}
2240
</label>
2341
<input
2442
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}
2945
type={type ?? 'text'}
3046
{...customValidation}
31-
{...register(name)}
47+
{...register(inputName)}
3248
/>
3349
</div>
3450
);

0 commit comments

Comments
 (0)