@lstz/reusable-form
Version:
A reusable React component for creating simple, flexible forms.
40 lines (39 loc) • 2.56 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import FormInput from './FormInput';
import { useEffect, useMemo } from 'react';
function FormInputs({ formattedTitle, fields, options, errors, register, watch, setValue, }) {
// 1/ Identification des champs à surveiller (pour désactiver éventuellement d'autres champs)
const fieldsToWatch = options?.fieldsDesactivation?.map((field) => field.condition.field) ?? [];
// 2/ Récupération des valeurs des champs à surveiller
const watchFieldsValues = watch(fieldsToWatch);
// 3/ Identification des champs à désactiver (par comparaison des valeurs des champs surveillés aux conditions de désactivation)
// note : on utilise useMemo pour éviter de recalculer disableFields à chaque render (ce serait une nouvelle référence à chaque fois et le useEffect serait appelé à chaque render)
const disableFields = useMemo(() => {
const fieldsToDisable = [];
options?.fieldsDesactivation?.forEach(({ field, condition }, index) => {
const watchedValue = watchFieldsValues[index];
if (watchedValue === condition.value ||
String(watchedValue) === condition.value) {
fieldsToDisable.push(field);
}
});
return fieldsToDisable;
}, [options?.fieldsDesactivation, watchFieldsValues]);
useEffect(() => {
// console.log('Champs à désactiver', disableFields);
// On nettoie les champs stockés dans `disableFields` avec `setValue`
disableFields.forEach((field) => {
// note: Réinitialiser avec la valeur par défaut ou une chaîne vide ?
// il faut retrouver dans les fields du form config le champ à nettoyer (disableFields n'est qu'un tableau de string)
const fieldToClean = fields.find((f) => f.id === field);
if (fieldToClean) {
const valueToSet = fieldToClean.defaultValue ?? '';
setValue(field, valueToSet); // `setValue(field` ou `setValue(fieldToClean.id` est équivalent puisque c'est "name" de setValue qui est utilisé)
}
});
}, [disableFields, fields, setValue]);
return (_jsx(_Fragment, { children: fields.map((field) => (_jsx(FormInput, { formattedTitle: formattedTitle, ...field, error: typeof errors[field.id]?.message === 'string'
? errors[field.id]?.message
: null, register: register, disabled: disableFields.includes(field.id) }, field.id))) }));
}
export default FormInputs;