From 3a7ef3f51d702db4b633248d7f31da429319af33 Mon Sep 17 00:00:00 2001 From: vincent <vincent@sleede.com> Date: Mon, 4 Apr 2022 11:16:31 +0200 Subject: [PATCH] Use Generics --- .../src/javascript/components/base/rhf-input.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/app/frontend/src/javascript/components/base/rhf-input.tsx b/app/frontend/src/javascript/components/base/rhf-input.tsx index 152e477bd..77b134f4a 100644 --- a/app/frontend/src/javascript/components/base/rhf-input.tsx +++ b/app/frontend/src/javascript/components/base/rhf-input.tsx @@ -1,21 +1,20 @@ import React, { ReactNode } from 'react'; import { FieldErrors, UseFormRegister, Validate } from 'react-hook-form'; -import { FieldValues } from 'react-hook-form/dist/types/fields'; type inputType = string|number|readonly string []; -type ruleTypes = { +type ruleTypes<T> = { required?: boolean | string, pattern?: RegExp | {value: RegExp, message: string}, minLenght?: number, maxLenght?: number, min?: number, max?: number, - validate?: Validate<FieldValues>; + validate?: Validate<T>; }; -interface RHFInputProps { +interface RHFInputProps<T> { id: string, - register: UseFormRegister<FieldValues>, + register: UseFormRegister<T>, label?: string, tooltip?: string, defaultValue?: inputType, @@ -23,7 +22,7 @@ interface RHFInputProps { addOn?: ReactNode, addOnClassName?: string, classes?: string, - rules?: ruleTypes, + rules?: ruleTypes<T>, readOnly?: boolean, disabled?: boolean, placeholder?: string, @@ -35,7 +34,7 @@ interface RHFInputProps { /** * This component is a template for an input component to use within React Hook Form */ -export const RHFInput: React.FC<RHFInputProps> = ({ id, register, label, tooltip, defaultValue, icon, classes, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }) => { +export const RHFInput: React.FC<RHFInputProps<any>> = ({ id, register, label, tooltip, defaultValue, icon, classes, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }) => { // Compose classnames from props const classNames = ` rhf-input ${classes || ''}