formulaire-dynamique/dist/cjs/index.js

Package React pour formulaires dynamiques avec validation et tous types de champs

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=require("prop-types"),r=require("react/jsx-runtime");function t(e,n){(null==n||n>e.length)&&(n=e.length);for(var r=0,t=Array(n);r<n;r++)t[r]=e[r];return t}function i(e,n,r){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function a(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function l(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?a(Object(r),!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var t,i,a,l,s=[],c=!0,o=!1;try{if(a=(r=r.call(e)).next,0===n);else for(;!(c=(t=a.call(r)).done)&&(s.push(t.value),s.length!==n);c=!0);}catch(e){o=!0,i=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(o)throw i}}return s}}(e,n)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var c=function(n){var t=n.field,i=n.value,a=n.error,c=n.touched,o=n.onChange,u=n.onBlur,m=s(e.useState(null),2),d=m[0],f=m[1];e.useEffect((function(){if("file"===t.type&&i&&i instanceof File)if(i.type.startsWith("image/")){var e=new FileReader;e.onload=function(e){f(e.target.result)},e.readAsDataURL(i)}else f(null);else f(null)}),[i,t.type]);var p=function(e){o(t.name,e.target.files[0]||null)},h=function(){return t.icon?"function"==typeof t.icon||e.isValidElement(t.icon)?r.jsx("span",{className:"field-icon",children:t.icon}):"string"==typeof t.icon?r.jsx("i",{className:"field-icon ".concat(t.icon)}):t.icon.src?r.jsx("img",{src:t.icon.src,alt:t.icon.alt||"Icon",className:"field-icon icon-image",style:{width:t.icon.width||"16px",height:t.icon.height||"16px"}}):null:null},v=function(){var e={id:t.name,name:t.name,value:"file"!==t.type?i||"":void 0,onChange:"file"!==t.type?function(e){return o(t.name,e.target.value)}:p,onBlur:function(){return u(t.name)},className:"form-field ".concat(t.type," ").concat(a&&c?"error":""),disabled:t.disabled,required:t.required};switch(t.type){case"text":case"email":case"password":case"number":case"tel":case"url":case"date":case"time":case"datetime-local":case"color":return r.jsxs("div",{className:"input-with-icon",children:[h(),r.jsx("input",l(l({type:t.type},e),{},{placeholder:t.placeholder}))]});case"range":return r.jsxs("div",{className:"range-container",children:[h(),r.jsx("input",l(l({type:"range"},e),{},{min:t.min,max:t.max,step:t.step})),r.jsx("span",{className:"range-value",children:i})]});case"textarea":return r.jsxs("div",{className:"textarea-with-icon",children:[h(),r.jsx("textarea",l(l({},e),{},{rows:t.rows,placeholder:t.placeholder}))]});case"select":return r.jsxs("div",{className:"select-with-icon",children:[h(),r.jsxs("select",l(l({},e),{},{children:[t.placeholder&&r.jsx("option",{value:"",children:t.placeholder}),t.options.map((function(e){return r.jsx("option",{value:e.value,children:e.label},e.value)}))]}))]});case"checkbox":return r.jsxs("div",{className:"checkbox-with-icon",children:[r.jsx("input",{type:"checkbox",id:t.name,name:t.name,checked:!!i,onChange:function(e){return o(t.name,e.target.checked)},onBlur:function(){return u(t.name)},className:"form-field checkbox ".concat(a&&c?"error":""),disabled:t.disabled}),h()]});case"radio":return r.jsx("div",{className:"radio-group",children:t.options.map((function(e){return r.jsxs("label",{className:"radio-option",children:[r.jsx("input",{type:"radio",name:t.name,value:e.value,checked:i===e.value,onChange:function(e){return o(t.name,e.target.value)},onBlur:function(){return u(t.name)}}),e.icon&&r.jsx("span",{className:"option-icon",children:"string"==typeof e.icon?r.jsx("i",{className:e.icon}):e.icon}),e.label]},e.value)}))});case"file":return r.jsxs("div",{className:"file-input-container",children:[r.jsxs("div",{className:"file-input-wrapper",children:[h(),r.jsx("input",{type:"file",id:t.name,name:t.name,onChange:p,onBlur:function(){return u(t.name)},accept:t.accept,className:"form-field file ".concat(a&&c?"error":""),disabled:t.disabled})]}),d&&r.jsxs("div",{className:"image-preview",children:[r.jsx("img",{src:d,alt:"Aperçu",className:"preview-image",style:{maxWidth:t.previewWidth||"200px",maxHeight:t.previewHeight||"200px"}}),r.jsx("button",{type:"button",className:"remove-preview",onClick:function(){o(t.name,null),f(null)},title:"Supprimer l'image",children:"×"})]}),i&&!d&&r.jsxs("div",{className:"file-info",children:[r.jsx("span",{className:"file-name",children:i.name}),r.jsxs("span",{className:"file-size",children:["(",Math.round(i.size/1024)," Ko)"]}),r.jsx("button",{type:"button",className:"remove-file",onClick:function(){return o(t.name,null)},title:"Supprimer le fichier",children:"×"})]})]});default:return null}};return r.jsxs("div",{className:"form-field-container ".concat(t.type,"-container"),children:["checkbox"===t.type?r.jsxs("label",{htmlFor:t.name,className:"checkbox-label",children:[v(),r.jsxs("span",{className:"checkbox-text",children:[t.label,t.required&&r.jsx("span",{className:"required-asterisk",children:"*"})]})]}):r.jsxs(r.Fragment,{children:[r.jsxs("label",{htmlFor:t.name,className:"field-label",children:[t.label,t.required&&r.jsx("span",{className:"required-asterisk",children:"*"})]}),v()]}),a&&c&&r.jsx("div",{className:"error-message",children:a}),t.helpText&&r.jsx("div",{className:"help-text",children:t.helpText})]})};c.propTypes={field:n.object.isRequired,value:n.any,error:n.string,touched:n.bool,onChange:n.func.isRequired,onBlur:n.func.isRequired};var o=function(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};if(t[e]){var i=t[e](n);if(i)return i}if(r.required){if(null==n||""===n)return r.requiredMessage||"Ce champ est requis.";if(Array.isArray(n)&&0===n.length)return r.requiredMessage||"Veuillez ajouter au moins un élément.";if(n instanceof File&&(0===n.size||!n.name.trim()))return r.requiredMessage||"Un fichier est requis."}if(null==n||""===n)return null;if("string"==typeof n){if(r.minLength&&n.length<r.minLength)return r.minLengthMessage||"Minimum ".concat(r.minLength," caractères requis.");if(r.maxLength&&n.length>r.maxLength)return r.maxLengthMessage||"Maximum ".concat(r.maxLength," caractères autorisés.");if(r.pattern&&!new RegExp(r.pattern).test(n))return r.patternMessage||"Format invalide."}if("number"==typeof n||!isNaN(Number(n))){if(void 0!==r.min&&Number(n)<r.min)return r.minMessage||"Valeur minimale : ".concat(r.min);if(void 0!==r.max&&Number(n)>r.max)return r.maxMessage||"Valeur maximale : ".concat(r.max)}if(n instanceof File){if(r.accept)if(!r.accept.split(",").map((function(e){return e.trim()})).some((function(e){if(e.includes("*")){var r=e.split("/")[0];return n.type.startsWith(r+"/")}return e.startsWith(".")?n.name.toLowerCase().endsWith(e.toLowerCase()):n.type===e})))return r.acceptMessage||"Type de fichier non autorisé. Types acceptés : ".concat(r.accept);if(r.maxSize&&n.size>r.maxSize)return r.maxSizeMessage||"Fichier trop volumineux (max. ".concat(Math.round(r.maxSize/1024)," Ko)")}return null},u=function(e,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},t={};return n.forEach((function(n){var i=o(n.name,e[n.name],n.validation,r);i&&(t[n.name]=i)})),t},m=Object.freeze({__proto__:null,validateField:o,validateForm:u}),d=function(n){var t,a=n.config,m=n.onSubmit,d=n.customValidation,f=void 0===d?{}:d,p=n.className,h={};a.fields&&Array.isArray(a.fields)&&a.fields.forEach((function(e){h[e.name]=function(e){if(void 0!==e.defaultValue)return e.defaultValue;switch(e.type){case"checkbox":return!1;case"file":return null;case"number":default:return"";case"range":return e.min||0}}(e)}));var v=s(e.useState(h),2),x=v[0],b=v[1],g=s(e.useState({}),2),y=g[0],j=g[1],N=s(e.useState({}),2),w=N[0],O=N[1],S=e.useCallback((function(e,n){if(b((function(r){return l(l({},r),{},i({},e,n))})),O((function(n){return l(l({},n),{},i({},e,!0))})),a.validateOnChange){var r=a.fields.find((function(n){return n.name===e}));if(r){var t=o(e,n,r.validation,f);j((function(n){return l(l({},n),{},i({},e,t))}))}}}),[a.validateOnChange,a.fields,f]),q=e.useCallback((function(e){if(O((function(n){return l(l({},n),{},i({},e,!0))})),a.validateOnBlur){var n=a.fields.find((function(n){return n.name===e}));if(n){var r=o(e,x[e],n.validation,f);j((function(n){return l(l({},n),{},i({},e,r))}))}}}),[a.validateOnBlur,a.fields,x,f]);return a.fields&&Array.isArray(a.fields)?r.jsxs("form",{onSubmit:function(e){e.preventDefault();var n={};a.fields.forEach((function(e){n[e.name]=!0})),O(n);var r=u(x,a.fields,f);j(r),0===Object.keys(r).length&&m(x)},className:"dynamic-form ".concat(p||""),noValidate:!0,children:[a.fields.map((function(e){return r.jsx(c,{field:e,value:x[e.name],error:y[e.name],touched:w[e.name],onChange:S,onBlur:q},e.name)})),r.jsx("button",{type:"submit",className:"form-submit-button",disabled:a.disableSubmitOnError&&Object.keys(y).some((function(e){return y[e]})),children:(null===(t=a.submitButton)||void 0===t?void 0:t.text)||"Envoyer"})]}):r.jsx("div",{className:"form-error",children:"La configuration du formulaire est invalide."})};d.propTypes={config:n.shape({fields:n.arrayOf(n.object).isRequired,validateOnChange:n.bool,validateOnBlur:n.bool,disableSubmitOnError:n.bool,submitButton:n.shape({text:n.string})}).isRequired,onSubmit:n.func.isRequired,customValidation:n.object,className:n.string};var f={DynamicForm:d,FormField:c,validators:m};exports.DynamicForm=d,exports.FormField=c,exports.FormulaireDynamique=f,exports.default=d,exports.validators=m;
//# sourceMappingURL=index.js.map