@lstz/reusable-form
Version:
A reusable React component for creating simple, flexible forms.
12 lines (11 loc) • 1.46 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function FormInput({ formattedTitle, label, id, type, options, required, error, register, ...inputProps // '...inputProps' permet de récupérer toutes les autres props passées à FormInput et les transmet à l’<input>
}) {
return (_jsxs("div", { className: `${formattedTitle}-form__input-container`, children: [_jsx("label", { htmlFor: id, className: `${formattedTitle}-form__label`, children: label }), type === 'select' ? (_jsx("select", { id: id, required: required, ...register(id, {
// required: required,
}), ...inputProps, className: `${formattedTitle}-form__input`, children: options?.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) })) : type === 'switch' ? (_jsx("input", { id: id, type: "checkbox", ...register(id), className: `${formattedTitle}-form__checkbox-switch`, ...inputProps })) : (_jsx("input", { id: id, type: type, required: required, ...register(id, {
// required: required ? 'Ce champ est requis.' : false, // Todo: Fix this
valueAsNumber: type === 'number',
}), ...inputProps, className: `${formattedTitle}-form__input` })), _jsx("div", { className: `${formattedTitle}-form__error-container`, children: error && _jsx("p", { className: `${formattedTitle}-form__error`, children: error }) })] }));
}
export default FormInput;