rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-07 01:54:16 +01:00
Code Issues Releases Activity

(type) fix typing the RHFInput component

Browse Source
This commit is contained in:
Sylvain 2022-04-04 16:12:42 +02:00
parent fcb59fa9a8
commit 6e5578db0c
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/frontend/src/javascript/components/base/rhf-input.tsx
View File

@ -1,20 +1,22 @@
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { FieldErrors, UseFormRegister, Validate } from 'react-hook-form'; import { FieldErrors, FieldPathValue, UseFormRegister, Validate } from 'react-hook-form';
import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FieldPath } from 'react-hook-form/dist/types/path';
type inputType = string|number|readonly string []; type inputType = string|number|readonly string [];
type ruleTypes<T> = { type ruleTypes<TFieldValues> = {
required?: boolean | string, required?: boolean | string,
pattern?: RegExp | {value: RegExp, message: string}, pattern?: RegExp | {value: RegExp, message: string},
minLenght?: number, minLenght?: number,
maxLenght?: number, maxLenght?: number,
min?: number, min?: number,
max?: number, max?: number,
validate?: Validate<T>; validate?: Validate<TFieldValues>;
}; };
interface RHFInputProps<T> { interface RHFInputProps<TFieldValues> {
id: string, id: string,
register: UseFormRegister<T>, register: UseFormRegister<TFieldValues>,
label?: string, label?: string,
tooltip?: string, tooltip?: string,
defaultValue?: inputType, defaultValue?: inputType,
@ -22,7 +24,7 @@ interface RHFInputProps<T> {
addOn?: ReactNode, addOn?: ReactNode,
addOnClassName?: string, addOnClassName?: string,
classes?: string, classes?: string,
rules?: ruleTypes<T>, rules?: ruleTypes<TFieldValues>,
readOnly?: boolean, readOnly?: boolean,
disabled?: boolean, disabled?: boolean,
placeholder?: string, placeholder?: string,
@ -34,8 +36,7 @@ interface RHFInputProps<T> {
/** /**
* This component is a template for an input component to use within React Hook Form * This component is a template for an input component to use within React Hook Form
*/ */
// eslint-disable-next-line @typescript-eslint/no-explicit-any export const RHFInput = <TFieldValues extends FieldValues>({ id, register, label, tooltip, defaultValue, icon, classes, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }: RHFInputProps<TFieldValues>) => {
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 // Compose classnames from props
const classNames = ` const classNames = `
rhf-input ${classes || ''} rhf-input ${classes || ''}
@ -54,10 +55,10 @@ export const RHFInput: React.FC<RHFInputProps<any>> = ({ id, register, label, to
<div className='rhf-input-field'> <div className='rhf-input-field'>
{icon && <span className="icon">{icon}</span>} {icon && <span className="icon">{icon}</span>}
<input id={id} <input id={id}
{...register(id, { {...register(id as FieldPath<TFieldValues>, {
...rules, ...rules,
valueAsNumber: type === 'number', valueAsNumber: type === 'number',
value: defaultValue value: defaultValue as FieldPathValue<TFieldValues, FieldPath<TFieldValues>>
})} })}
type={type} type={type}
step={step} step={step}