rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-30 19:52:20 +01:00
Code Issues Releases Activity

(bug) show error validation message

Browse Source
This commit is contained in:
Karen 2023-01-25 11:05:16 +01:00 committed by Sylvain
parent 9396c5371e
commit 7357ece87f
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/frontend/src/javascript/components/form/form-input.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode, useCallback, useState } from 'react'; import { ReactNode, useCallback, useState, useEffect } from 'react';
import * as React from 'react'; import * as React from 'react';
import { FieldPathValue } from 'react-hook-form'; import { FieldPathValue, UseFormGetValues } from 'react-hook-form';
import { debounce as _debounce } from 'lodash'; import { debounce as _debounce } from 'lodash';
import { FieldValues } from 'react-hook-form/dist/types/fields'; import { FieldValues } from 'react-hook-form/dist/types/fields';
import { FieldPath } from 'react-hook-form/dist/types/path'; import { FieldPath } from 'react-hook-form/dist/types/path';
@ -22,13 +22,14 @@ type FormInputProps<TFieldValues, TInputType> = FormComponent<TFieldValues> & Ab
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void, onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
nullable?: boolean, nullable?: boolean,
ariaLabel?: string, ariaLabel?: string,
maxLength?: number maxLength?: number,
getValues?: UseFormGetValues<FieldValues>
} }
/** /**
* 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
*/ */
export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps<TFieldValues, TInputType>) => { export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, getValues, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps<TFieldValues, TInputType>) => {
const [characterCount, setCharacterCount] = useState<number>(0); const [characterCount, setCharacterCount] = useState<number>(0);
/** /**
@ -69,6 +70,13 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
} }
}; };
// If maxLength and getValues is provided, uses input ref to initiate the countdown of characters
useEffect(() => {
if (getValues && maxLength) {
setCharacterCount(getValues(id).length);
}
}, [maxLength, getValues]);
// Compose classnames from props // Compose classnames from props
const classNames = [ const classNames = [
`${className || ''}`, `${className || ''}`,