react-hybrid-form/dist/esm/index.js

A super simple, straightforward and powerful hybrid form library which combines the benefits of both controlled or uncontrolled form.

import e,{useRef as r,forwardRef as l,useState as a,useImperativeHandle as s}from"react";function o(){const e={},l=r({});return[e=>r=>{r&&(l.current[e]=r)},()=>{let r=!0;return Object.entries(l.current).forEach((([l,a])=>{a.validate&&!a.validate()?r=!1:e[l]=a.getValue()})),r?e:null},()=>{Object.values(l.current).forEach((e=>{e.reset()}))}]}const i="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\InputField.tsx",t=l((({name:r,label:l,fieldClass:o,inputClass:t,labelClass:n,errorClass:c,placeholder:u,autoComplete:d,type:m="text",defaultValue:_="",validate:f=()=>null},v)=>{if(!v)throw new Error("Critical error: Input field is not registered via ref !!!");if(!r)throw new Error("Input field requires a name");if(!l&&!u)throw new Error("Input field requires either a label or a placeholder");const[w,h]=a({value:_,error:null}),N=()=>{const e=f(w.value);return h((r=>({...r,error:e}))),!e},p=()=>w.value,b=()=>h({value:_,error:null});return s(v,(()=>({reset:b,getValue:p,validate:N}))),e.createElement("div",{className:o,__self:void 0,__source:{fileName:i,lineNumber:33}},l&&e.createElement("label",{htmlFor:r,className:n,__self:void 0,__source:{fileName:i,lineNumber:34}},l),e.createElement("input",{id:r,type:m,name:r,value:w.value,className:t,onChange:e=>{const r=e.target.value,l=f(r);h({value:r,error:l})},placeholder:u,autoComplete:d,style:{width:"100%",border:w.error?"2px solid red":""},__self:void 0,__source:{fileName:i,lineNumber:37}}),w.error&&e.createElement("p",{className:c,__self:void 0,__source:{fileName:i,lineNumber:41}},w.error))})),n="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\RadioField.tsx",c=l((({name:r,label:l,options:o,fieldClass:i,labelClass:t,optionsClass:c,optionClass:u},d)=>{if(!d)throw new Error("Critical error: Radio field is not registered via ref !!!");if(!r)throw new Error("Radio field requires a name");if(!l)throw new Error("Radio field requires a label");if(!o||0===o.length)throw new Error("Radio field requires at least one option");const[m,_]=a(o[0].value),f=()=>m,v=()=>_(o[0].value),w=e=>{_(e.target.value)};return s(d,(()=>({reset:v,getValue:f}))),e.createElement("div",{className:i,__self:void 0,__source:{fileName:n,lineNumber:25}},e.createElement("span",{className:t,__self:void 0,__source:{fileName:n,lineNumber:26}},l),e.createElement("div",{className:c,__self:void 0,__source:{fileName:n,lineNumber:27}},o.map((l=>e.createElement("div",{key:l.value,className:u,__self:void 0,__source:{fileName:n,lineNumber:28}},e.createElement("input",{type:"radio",name:r,id:l.value,value:l.value,onChange:w,checked:m===l.value,__self:void 0,__source:{fileName:n,lineNumber:29}}),e.createElement("label",{htmlFor:l.value,__self:void 0,__source:{fileName:n,lineNumber:30}},l.label))))))})),u="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\SelectField.tsx",d=l((({name:r,label:l,options:o,fieldClass:i,labelClass:t,optionsClass:n,optionClass:c},d)=>{if(!d)throw new Error("Critical error: Select Field is not registered via ref !!!");if(!r)throw new Error("Select field requires a name");if(!l)throw new Error("Select field requires a label");if(!o||0===o.length)throw new Error("Select field requires at least one option");const[m,_]=a(o[0].value),f=()=>_(o[0].value),v=()=>m;return s(d,(()=>({reset:f,getValue:v}))),e.createElement("div",{className:i,__self:void 0,__source:{fileName:u,lineNumber:25}},e.createElement("label",{htmlFor:r,className:t,__self:void 0,__source:{fileName:u,lineNumber:26}},l),e.createElement("select",{id:r,name:r,value:m,onChange:e=>{_(e.target.value)},className:n,__self:void 0,__source:{fileName:u,lineNumber:29}},o.map((r=>e.createElement("option",{key:r.value,value:r.value,className:c,__self:void 0,__source:{fileName:u,lineNumber:30}},r.label)))))})),m="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\CheckBoxField.tsx",_=l((({name:r,label:l,options:o,fieldClass:i,labelClass:t,optionsClass:n,optionClass:c},u)=>{if(!u)throw new Error("Critical error: Checkbox field is not registered via ref !!!");if(!r)throw new Error("Checkbox field requires a name");if(!l)throw new Error("Checkbox field requires a label");if(!o||0===o.length)throw new Error("Checkbox field requires at least one option");const[d,_]=a([]),f=e=>{const r=e.target.value;_((e=>e.includes(r)?e.filter((e=>e!==r)):[...e,r]))},v=()=>_([]),w=()=>d;return s(u,(()=>({reset:v,getValue:w}))),e.createElement("div",{className:i,__self:void 0,__source:{fileName:m,lineNumber:28}},e.createElement("span",{className:t,__self:void 0,__source:{fileName:m,lineNumber:29}},l),e.createElement("div",{className:n,__self:void 0,__source:{fileName:m,lineNumber:30}},o.map((l=>e.createElement("label",{key:l.value,htmlFor:l.value,className:c,__self:void 0,__source:{fileName:m,lineNumber:31}},e.createElement("span",{__self:void 0,__source:{fileName:m,lineNumber:32}},l.label),e.createElement("input",{name:r,type:"checkbox",id:l.value,value:l.value,onChange:f,checked:d.includes(l.value),__self:void 0,__source:{fileName:m,lineNumber:33}}))))))})),f="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\PasswordField.tsx",v=l((({name:r,label:l,validate:o,fieldClass:i,inputClass:t,labelClass:n,errorClass:c,placeholder:u,showPasswordIcon:d,hidePasswordIcon:m,toggleVisibilityClass:_,requiresConfirmation:v=!0,requiresTogglingVisibility:w=!0},h)=>{if(!h)throw new Error("Critical error: Password Field is not registered via ref !!!");if(!r)throw new Error("Password field requires a name");if(!o)throw new Error("Password field requires a validation function");if(!l&&!u)throw new Error("Password field requires either a label or a placeholder");const[N,p]=a({password:{value:"",error:null,show:!1},cPassword:{value:"",error:null,show:!1}}),b=()=>N.password.value,E=()=>p({password:{value:"",error:null,show:!1},cPassword:{value:"",error:null,show:!1}}),C=()=>{const e=(()=>{const e=o(N.password.value);return p((r=>({...r,password:{...r.password,error:e}}))),!e})();if(v){const r=(()=>{const e=N.cPassword.value&&N.password.value===N.cPassword.value?null:"Passwords do not match";return p((r=>({...r,cPassword:{...r.cPassword,error:e}}))),!e})();return e&&r}return e};return s(h,(()=>({reset:E,getValue:b,validate:C}))),e.createElement(e.Fragment,null,e.createElement("div",{className:i,__self:void 0,__source:{fileName:f,lineNumber:79}},l&&e.createElement("label",{htmlFor:r,className:n,__self:void 0,__source:{fileName:f,lineNumber:80}},l),e.createElement("div",{style:{position:"relative"},__self:void 0,__source:{fileName:f,lineNumber:84}},e.createElement("input",{id:r,name:r,className:t,placeholder:u,value:N.password.value,onChange:e=>{const r=e.target.value,l=o(r),a=r===N.cPassword.value?null:"Passwords do not match";p({password:{value:r,error:l,show:N.password.show},cPassword:{value:N.cPassword.value,error:a,show:N.cPassword.show}})},type:N.password.show?"text":"password",style:{width:"100%",border:N.password.error?"2px solid red":""},__self:void 0,__source:{fileName:f,lineNumber:85}}),w&&e.createElement("img",{alt:N.password.show?"hide":"show",src:N.password.show?d:m,className:_,onClick:()=>{p((e=>({...e,password:{...e.password,show:!e.password.show}})))},__self:void 0,__source:{fileName:f,lineNumber:89}})),N.password.error&&e.createElement("p",{className:c,__self:void 0,__source:{fileName:f,lineNumber:97}},N.password.error)),v&&e.createElement("div",{className:i,__self:void 0,__source:{fileName:f,lineNumber:100}},l&&e.createElement("label",{htmlFor:`${r}-cPwd`,className:n,__self:void 0,__source:{fileName:f,lineNumber:101}},"Confirm ",l),e.createElement("div",{style:{position:"relative"},__self:void 0,__source:{fileName:f,lineNumber:104}},e.createElement("input",{id:`${r}-cPwd`,name:`${r}-cPwd`,className:t,value:N.cPassword.value,onChange:e=>{const r=e.target.value,l=r===N.password.value?null:"Passwords do not match";p((e=>({...e,cPassword:{value:r,error:l,show:e.cPassword.show}})))},placeholder:u&&`Confirm ${r}`,type:N.cPassword.show?"text":"password",style:{width:"100%",border:N.cPassword.error?"2px solid red":""},__self:void 0,__source:{fileName:f,lineNumber:105}}),w&&e.createElement("img",{alt:N.cPassword.show?"hide":"show",src:N.cPassword.show?d:m,className:_,onClick:()=>{p((e=>({...e,cPassword:{...e.cPassword,show:!e.cPassword.show}})))},__self:void 0,__source:{fileName:f,lineNumber:109}})),N.cPassword.error&&e.createElement("p",{className:c,__self:void 0,__source:{fileName:f,lineNumber:119}},N.cPassword.error)))})),w="C:\\Users\\Shahin M Hashim\\OneDrive\\Desktop\\react-hybrid-form\\src\\components\\TextAreaField.tsx",h=l((({name:r,label:l,rows:o=3,cols:i=20,fieldClass:t,labelClass:n,errorClass:c,placeholder:u,defaultValue:d,textareaClass:m,validate:_=()=>null},f)=>{if(!f)throw new Error("Critical error: Text Area Field is not registered via ref !!!");if(!r)throw new Error("Text area field requires a name");if(!l&&!u)throw new Error("Input field requires either a label or a placeholder");const[v,h]=a({value:d||"",error:null}),N=()=>{const e=_(v.value);return h((r=>({...r,error:e}))),!e},p=()=>h({value:d||"",error:null}),b=()=>v.value;return s(f,(()=>({reset:p,getValue:b,validate:N}))),e.createElement("div",{className:t,__self:void 0,__source:{fileName:w,lineNumber:33}},l&&e.createElement("label",{htmlFor:r,className:n,__self:void 0,__source:{fileName:w,lineNumber:34}},l),e.createElement("textarea",{id:r,rows:o,cols:i,name:r,value:v.value,onChange:e=>{const r=e.target.value,l=_(r);h({value:r,error:l})},placeholder:u,className:m,style:{border:v.error?"2px solid red":""},__self:void 0,__source:{fileName:w,lineNumber:37}}),v.error&&e.createElement("p",{className:c,__self:void 0,__source:{fileName:w,lineNumber:40}},v.error))}));export{_ as CheckBoxField,t as InputField,v as PasswordField,c as RadioField,d as SelectField,h as TextAreaField,o as useHybridForm};
//# sourceMappingURL=index.js.map