@umbraco/headless-forms-react/index.js

Umbraco Forms React Components for Umbraco Heartcore

import e,{createContext as r,useContext as t,useEffect as n,useRef as a,useCallback as i,useState as u}from"react";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */var l=function(){return(l=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e}).apply(this,arguments)};function c(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t}var o=function(e,r){var t=e[r];return"string"==typeof t?[t,void 0]:[void 0,t]},s=r({data:{},errors:{},form:{},registerField:function(){},unregisterField:function(){},onValueChange:function(){}});s.displayName="FormContext";var f={form:"Form",page:"Form-page",fieldset:"Form-fieldset",column:"Form-column",fieldGroup:"Form-fieldGroup"},d=r(f);d.displayName="ThemeContext";var p,m,h,v,y,E,g=function(r){var n=r.caption,a=r.children,i=r.width,u=t(d),l=o(u,"column"),c=l[0],s=l[1];return e.createElement("div",{className:c,style:s,"data-columns":i},n&&e.createElement("span",null,n),a)};g.displayName="Column",function(e){e.Is="IS",e.IsNot="IS_NOT",e.GreaterThen="GREATER_THEN",e.LessThen="LESS_THEN",e.Contains="CONTAINS",e.StartsWith="STARTS_WITH",e.EndsWith="ENDS_WITH"}(p||(p={})),function(e){e.All="ALL",e.Any="ANY"}(m||(m={})),function(e){e.Show="SHOW",e.Hide="HIDE"}(h||(h={})),function(e){e.NoIndicator="NO_INDICATOR",e.MarkMandatoryFields="MARK_MANDATORY_FIELDS",e.MarkOptionalFields="MARK_OPTIONAL_FIELDS"}(v||(v={}));var b=((y={})[p.Contains]=function(e){return function(r){return r.indexOf(e)>-1}},y[p.EndsWith]=function(e){return function(r){return Array.isArray(r)?r.some((function(r){return r.endsWith(e)})):r.endsWith(e)}},y[p.Is]=function(e){return function(r){return e===r}},y[p.IsNot]=function(e){return function(r){return e!==r}},y[p.GreaterThen]=function(e){return function(r){return e>r}},y[p.LessThen]=function(e){return function(r){return e<r}},y[p.StartsWith]=function(e){return function(r){return Array.isArray(r)?r.some((function(r){return r.endsWith(e)})):r.startsWith(e)}},y),N=((E={})[m.All]=function(e,r){return e.every((function(e){var t=r[e.field];return!!t&&b[e.operator](e.value)(t)}))},E[m.Any]=function(e,r){return e.some((function(e){var t=r[e.field];return!!t&&b[e.operator](e.value)(t)}))},E),T=function(e){var r=t(s).data;if(!e)return!0;var n=e,a=N[n.logicType](n.rules,r);return n.actionType===h.Show?a:!a},F=function(r){var n=r.caption,a=r.children,i=r.condition,u=t(d),l=o(u,"fieldset"),c=l[0],s=l[1],f=T(i);return e.createElement(e.Fragment,null,f&&e.createElement("fieldset",{className:c,style:s},n&&e.createElement("legend",null,n),a))};F.displayName="Fieldset";var x=function(e){var r=t(s),a=r.data,i=r.errors,u=r.form,l=r.registerField,c=r.unregisterField,o=r.onValueChange;return n((function(){return function(){return c(e)}}),[e,c]),{currentValue:a[e],error:i[e],form:u,onValueChange:o,registerField:l}},O=function(r){var n=r.alias,a=r.caption,i=r.children,u=r.required,l=r.condition,c=t(d),f=t(s).form,p=f.fieldIndicationType,m=f.indicator,h=o(c,"fieldGroup"),y=h[0],E=h[1],g=T(l);return e.createElement(e.Fragment,null,g&&e.createElement("div",{className:y,style:E},e.createElement("label",{htmlFor:n},a,function(){switch(p){case v.MarkMandatoryFields:return u;case v.MarkOptionalFields:return!u;default:return!1}}()&&m),i))};O.displayName="FieldGroup";var A=function(r){var t=r.alias,a=r.caption,i=r.condition,u=r.helpText,l=r.label,c=r.required,o=x(t),s=o.currentValue,f=o.error,d=o.registerField,p=o.onValueChange;return n((function(){d({name:t})}),[t,d]),e.createElement(O,{alias:t,caption:a,helpText:u,required:c,condition:i},e.createElement("input",{type:"checkbox",name:t,id:t,defaultChecked:"true"===s||"on"===s,required:c,onChange:function(e){return p(t,e.currentTarget.checked?"true":null)}}),l&&e.createElement("label",{htmlFor:t},l),f&&e.createElement("span",null,f))};A.displayName="Checkbox";var V=function(r){var t=r.alias,u=r.caption,l=r.condition,c=r.helpText,o=r.multiple,s=r.preValues,f=r.required,d=x(t),p=d.registerField,m=d.currentValue,h=d.error,v=a([]),y=i((function(e){var r=e.filter((function(e){return e.checked})).map((function(e){return e.value}));return o?r:r[0]}),[o]);n((function(){p({name:t,ref:v.current,parseValue:y})}),[t,v,p,y]);var E=function(e){return!!m&&("string"==typeof m?m===e:Array.from(m).includes(e))},g=o?"checkbox":"radio",b=function(r,n,a){var i=t+"-"+a;return e.createElement("div",{key:r},e.createElement("input",{type:g,name:t,id:i,defaultChecked:E(r),ref:function(e){v.current[a]=e},value:r,required:f})," ",e.createElement("label",{htmlFor:i},n))};return e.createElement(O,{alias:t,caption:u,helpText:c,required:f||!1,condition:l},function(e){if(e instanceof Array)return e.map((function(e,r){return b(e,e,r)}));var r=e;return Object.keys(e).map((function(e,t){return b(e,r[e],t)}))}(s),h&&e.createElement("span",null,h))};V.displayName="Choice";var k=function(r){var t=r.alias,n=r.placeholder,a=r.required,u=r.pattern,l=r.patternInvalidErrorMessage,c=r.type,o=x(t),s=o.currentValue,f=o.error,d=o.registerField,p=i((function(e){d({name:t,ref:e,validate:function(e){var r=[];return e&&u&&"string"==typeof e&&!e.match(u)&&r.push(l||"Please match the requested format: "+u),r}})}),[t,u,l,d]);return e.createElement(e.Fragment,null,e.createElement("input",{type:c,name:t,id:t,ref:p,defaultValue:s,placeholder:n,pattern:u,required:a}),f&&e.createElement("span",null,f))};k.displayName="Input";var q=function(r){var a=r.alias,i=r.theme,u=void 0===i?"clean":i,l=r.size,c=void 0===l?"normal":l,f=e.createRef(),p=x(a),m=p.error,h=p.registerField,v=p.onValueChange,y=t(s),E=t(d),g=o(E,"fieldGroup"),b=g[0],N=g[1];n((function(){v(a,null)}),[a,v]),n((function(){h({name:a})}),[a,h]),n((function(){var e=document.createElement("script");return e.src="https://www.google.com/recaptcha/api.js?render=explicit",e.async=!0,e.defer=!0,document.body.appendChild(e),function(){document.body.removeChild(e)}}),[]);var T=setInterval((function(){if(f.current&&f.current.children.length)clearInterval(T);else if(Object.prototype.hasOwnProperty.call(window,"grecaptcha")&&f.current){clearInterval(T);var e=window.grecaptcha;e.ready((function(){e.render(f.current,{sitekey:y.recaptchaPublicKey,size:c,theme:u,callback:function(e){v(a,e)},"expired-callback":function(){v(a,void 0)}})}))}}),500);return e.createElement("div",{className:b,style:N},e.createElement("div",{className:"g-recaptcha",ref:f}),m&&e.createElement("span",null,m))};q.displayName="ReCaptcha2";var C=function(r){var t=r.alias,n=r.caption,a=r.condition,u=r.helpText,l=r.preValues,c=r.required,o=x(t),s=o.currentValue,f=o.error,d=o.registerField,p=i((function(e){d({name:t,ref:e})}),[t,d]),m=function(r,t){return e.createElement("option",{key:r,value:r},t)};return e.createElement(O,{alias:t,caption:n,condition:a,helpText:u,required:c},e.createElement("select",{name:t,id:t,defaultValue:s,ref:p,required:c},e.createElement("option",null,"Please select a value"),function(e){if(e instanceof Array)return e.map((function(e){return m(e,e)}));var r=e;return Object.keys(e).map((function(e){return m(e,r[e])}))}(l)),f&&e.createElement("span",null,f))};C.displayName="Select";var I=function(r){var t=r.alias,n=r.caption,a=r.condition,i=r.helpText,u=r.required,o=c(r,["alias","caption","condition","helpText","required"]);return e.createElement(O,{alias:t,caption:n,condition:a,helpText:i,required:u},e.createElement(k,l({type:"text",alias:t,required:u},o)))};I.displayName="InputWithLabel";var w=function(r){var t=r.alias,n=r.caption,a=r.condition,u=r.helpText,l=r.placeholder,c=r.required,o=x(t),s=o.currentValue,f=o.error,d=o.registerField,p=i((function(e){d({name:t,ref:e})}),[t,d]);return e.createElement(O,{alias:t,caption:n,condition:a,helpText:u,required:c},e.createElement("textarea",{name:t,id:t,defaultValue:s,placeholder:l,required:c,ref:p}),f&&e.createElement("span",null,f))};w.displayName="TextArea";var S=function(r){var n=r.caption,a=r.bodyText,i=t(d),u=o(i,"fieldGroup"),l=u[0],c=u[1];return e.createElement("div",{className:l,style:c},n&&e.createElement("h1",null,n),a&&e.createElement("p",null,a))};S.displayName="TitleAndDescription";var P=function(r){var n=r.caption,a=r.children,i=t(d),u=o(i,"page"),l=u[0],c=u[1];return e.createElement("div",{className:l,style:c},n&&e.createElement("h1",null,n),a)};P.displayName="Page";var M={checkbox:A,checkboxList:function(r){return e.createElement(V,l({multiple:!0},r))},dataConsent:function(r){var t=r.acceptCopy,n=c(r,["acceptCopy"]);return e.createElement(A,l({label:t},n))},date:function(r){return e.createElement(I,l({type:"date"},r))},hidden:function(r){return e.createElement(k,l({type:"hidden"},r))},password:function(r){return e.createElement(I,l({type:"password"},r))},recaptcha2:q,radioList:function(r){return e.createElement(V,l({multiple:!0},r))},select:C,text:function(r){return e.createElement(I,l({type:"text"},r))},textarea:w,titleAndDescription:S},W=function(r){var t=r.form,a=r.recaptchaPublicKey,c=r.theme,p=void 0===c?f:c,m=r.onSubmit,h=t.pages.reduce((function(e,r){return e.push.apply(e,r.fieldsets),e}),[]).reduce((function(e,r){return e.push.apply(e,r.columns),e}),[]).reduce((function(e,r){return e.push.apply(e,r.fields),e}),[]),v=u(h.reduce((function(e,r){return Object.prototype.hasOwnProperty.call(r.settings,"defaultValue")&&(e[r.alias]=r.settings.defaultValue),e}),{})),y=v[0],E=v[1],b=u({}),N=b[0],T=b[1],x=u([]),O=x[0],A=x[1],V=u(0),k=V[0],q=V[1],C=o(p,"form"),I=C[0],w=C[1],S=e.createRef(),W=i((function(e){var r=h.find((function(r){return r.alias===e.name}));if(r){var t=[],n=y[r.alias];if(r.required&&!n&&t.push(r.requiredErrorMessage||"This field is required"),e.validate){var a=e.validate(n);a&&a.length&&t.push.apply(t,a)}return t.length?T((function(e){var n;return l(l({},e),((n={})[r.alias]=t,n))})):T((function(e){return delete e[r.alias],e})),t}}),[N,y]),j=i((function(e){void 0===e&&(e=!1);for(var r=!0,t=0,n=O;t<n.length;t++){var a=n[t];if(!e||N[a.name]){var i=W(a);i&&i.length&&(r=!1)}}return r}),[O,W]);n((function(){j(!0)}),[y]);var D=i((function(e,r){E((function(t){var n;return l(l({},t),((n={})[e]=r,n))}))}),[]),L=i((function(e){if(A((function(r){return function(){for(var e=0,r=0,t=arguments.length;r<t;r++)e+=arguments[r].length;var n=Array(e),a=0;for(r=0;r<t;r++)for(var i=arguments[r],u=0,l=i.length;u<l;u++,a++)n[a]=i[u];return n}(r,[e])})),e.ref)if(Array.isArray(e.ref))for(var r=function(){var r=e.ref,t=e.parseValue?e.parseValue(r):r.map((function(e){return e.value}));D(e.name,t)},t=0,n=e.ref;t<n.length;t++){var a=n[t];a&&(a.onchange=r)}else e.ref.onchange=function(){var r=e.ref,t=e.parseValue?e.parseValue(r.value):r.value;D(e.name,t)}}),[D]),R=i((function(e){A((function(r){return r.filter((function(r){return r.name!==e}))}))}),[]),_=function(r){var t=r.alias,n=r.caption,a=r.condition,i=r.required,u=r.requiredErrorMessage,c=r.settings,o=r.type,s=M[o];if(!s)return e.createElement("div",{key:t},"Missing field ",r.type);var f=l({},c);return r.preValues&&(f.preValues=r.preValues),e.createElement(s,l({caption:n,condition:a,key:t,alias:t,required:i,requiredErrorMessage:u},f))};return e.createElement(e.Fragment,null,t&&e.createElement(s.Provider,{value:{form:t,data:y,errors:N,registerField:L,unregisterField:R,onValueChange:D,recaptchaPublicKey:a}},e.createElement(d.Provider,{value:p},e.createElement("form",{onSubmit:function(e){e.preventDefault(),j()&&m(y)},ref:S,className:I,style:w,noValidate:!0},t.pages.map((function(r,t){return t===k&&e.createElement(P,{key:t,caption:r.caption},r.fieldsets.map((function(r,t){return e.createElement(F,{key:t,caption:r.caption,condition:r.condition},r.columns.map((function(r,t){return e.createElement(g,{key:t,caption:r.caption,width:r.width},r.fields.map(_))})))})))})),k>0&&e.createElement("button",{type:"button",onClick:function(e){e.preventDefault(),q((function(e){return--e}))}},"Previous"),t.pages.length-1>k&&e.createElement("button",{type:"button",onClick:function(e){e.preventDefault(),j()&&q((function(e){return++e}))}},"Next"),t.pages.length-1===k&&e.createElement("button",null,"Submit")))))};W.displayName="Form";export{W as Form};
//# sourceMappingURL=index.js.map