UNPKG

@gravityforms/components

Version:

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

1 lines 8.54 kB
"use strict";(self.webpackChunkgravityforms=self.webpackChunkgravityforms||[]).push([[881],{8881:function(e,r,t){t.r(r),t.d(r,{default:function(){return R}});var o=t(7940),s=t(6111),n=t(2492),a=t(7616),l=t(8335),i=t(5798),u=t(1969),p=t(1917),c=t(1025),d=t(6404),y=t(8840),b=t(9907),f=t(6793),v=/Android/i,m=function(e,r){void 0!==r&&("undefined"!=typeof navigator&&v.test(navigator.userAgent)?setTimeout(function(){return e.setSelectionRange(r,r)},0):e.setSelectionRange(r,r))},g=function(e,r){return(0,i.slugify)("".concat(e,"-").concat(r))};function h(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function T(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?h(Object(t),!0).forEach(function(r){(0,s.A)(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):h(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var P=a.React.useEffect,C=a.React.useRef,w=a.React.useState,A=a.React.forwardRef,j=".gform-input",x="default",O="error",_=A(function(e,r){var t=e.countries,v=e.customAttributes,h=e.customClasses,A=e.disabled,_=e.dropdownAttributes,R=e.dropdownClasses,q=e.helpTextAttributes,E=e.helpTextClasses,V=e.i18n,S=e.inputAttributes,z=e.inputClasses,D=e.international,k=e.label,Y=e.labelAttributes,F=e.labelClasses,L=e.language,N=e.onChange,I=e.preferredCountries,M=e.required,B=e.requiredLabelAttributes,K=e.requiredLabelClasses,U=e.size,H=e.spacing,$=e.usePlaceholder,G=e.useValidation,J=e.width,Q=C(null),W=r||Q,X=C(null),Z=C(null),ee=C(null),re=(0,l.useIdContext)(),te=(0,l.usePhoneInputFormatUtilsContext)().inputFormatUtils.getFormattedInputText,oe=w(function(){var e=(0,y.h$)(t,L,V,{showFlag:(null==_?void 0:_.showFlag)||!0,showCallingCode:(null==_?void 0:_.showCallingCode)||!0});if(null!=_&&_.initialValue)return(0,c.Oj)(null==_?void 0:_.initialValue,e,!1);if(I.length){var r,o,s=(0,y.oL)(e,I,V);return"group"===(null==s||null===(r=s[0])||void 0===r?void 0:r.type)?(null==s||null===(o=s[0])||void 0===o||null===(o=o.items)||void 0===o?void 0:o[0])||{}:null==s?void 0:s[0]}return null!=e&&e[0]?null==e?void 0:e[0]:{}}),se=(0,n.A)(oe,2),ne=se[0],ae=se[1],le=w(function(){if(null!=S&&S.value){var e=te(null==S?void 0:S.value,0,null==ne?void 0:ne.value,D),r=e.asYouType,t=e.formatted;return{asYouType:r,chars:(null==r?void 0:r.getChars())||"",value:t.text,numberValue:(null==r?void 0:r.getNumberValue())||""}}return{asYouType:null,chars:"",value:"",numberValue:""}}),ie=(0,n.A)(le,2),ue=ie[0],pe=ie[1],ce=w(x),de=(0,n.A)(ce,2),ye=de[0],be=de[1];P(function(){Z.current&&ee.current!==Z.current.querySelector(j)&&(ee.current=Z.current.querySelector(j))},[Z,ee]);var fe=function(){if(G){var e=ue.asYouType,r=ue.numberValue,t=null==e?void 0:e.isPossible();be(r?t?"correct":O:x)}else ye!==x&&be(x)},ve=function(e,r,t){var o=ee.current,s=o.selectionStart,n=te(e,s,null==ne?void 0:ne.value,D,r),a=n.asYouType,l=n.formatted,i=(null==a?void 0:a.getNumberValue())||"";pe({asYouType:a,chars:(null==a?void 0:a.getChars())||"",value:l.text,numberValue:i});var u={country:null==ne?void 0:ne.value,number:i,isValid:(null==a?void 0:a.isPossible())||!1};requestAnimationFrame(function(){m(o,l.caret)}),N(u,t)},me=g(re,"help-text"),ge=g(re,"label"),he=T({className:(0,a.classnames)(T((0,s.A)((0,s.A)({"gform-phone":!0,"wp-exclude-emoji":!0},"gform-phone--size-".concat(U),!0),"gform-phone--disabled",A),(0,i.spacerClasses)(H)),h),id:re,style:{width:J?"".concat(J,"px"):void 0}},v),Te=T(T({className:(0,a.classnames)(["gform-phone__label","gform-text","gform-text--color-port","gform-typography--size-text-sm","gform-typography--weight-medium"],F)},Y),{},{id:ge,onClick:function(){var e,r=null==X||null===(e=X.current)||void 0===e?void 0:e.querySelector(".gform-dropdown__trigger");r&&r.focus()}}),Pe=T(T({size:"text-sm",weight:"medium"},B),{},{customClasses:(0,a.classnames)(["gform-phone__required"],K)}),Ce=T(T({countries:t,hasSearch:!0,popoverMaxHeight:300},_),{},{customClasses:(0,a.classnames)(["gform-phone__dropdown"],R),disabled:A,i18n:V,id:g(re,"dropdown"),language:L,onChange:function(e,r){ae(r);var t=te(ue.chars,0,null==r?void 0:r.value,D),o=t.asYouType,s=t.formatted,n=(null==o?void 0:o.getNumberValue())||"";pe({asYouType:o,chars:(null==o?void 0:o.getChars())||"",value:s.text,numberValue:n});var a={country:null==r?void 0:r.value,number:n,isValid:(null==o?void 0:o.isPossible())||!1};N(a,e),requestAnimationFrame(fe)},preferredCountries:I,searchAttributes:T({wrapperClasses:["gform-phone__dropdown-search-wrapper"]},(null==_?void 0:_.searchAttributes)||{}),searchClasses:["gform-phone__dropdown-search"],size:U,triggerAttributes:{"aria-labelledby":k?ge:void 0},triggerClasses:["gform-phone__dropdown-trigger"]}),we=T(T({},S),{},{borderStyle:ye,customAttributes:{"aria-describedby":q.content&&ye===O?me:void 0,"aria-labelledby":k?ge:void 0},customClasses:(0,a.classnames)(["gform-phone__input"],z),directControlled:!0,disabled:A,id:g(re,"input"),onBlur:function(e){var r;null!=S&&S.onBlur&&(null==S||null===(r=S.onBlur)||void 0===r||r.call(S,e));e.defaultPrevented||fe()},onChange:function(e,r){ve(e,void 0,r)},onKeyDown:function(e){var r;null!=S&&S.onKeyDown&&(null==S||null===(r=S.onKeyDown)||void 0===r||r.call(S,e));if(!e.defaultPrevented){var t=ee.current;if(!t.hasAttribute("readonly")){var o=e.key;if(["Backspace","Delete"].includes(o)){e.preventDefault();var s=t.value,n=function(e){if(e.selectionStart!==e.selectionEnd)return{start:Math.min(e.selectionStart,e.selectionEnd),end:Math.max(e.selectionStart,e.selectionEnd)}}(t),a=n?function(e,r){var t=Math.min(r.start,r.end),o=Math.max(r.start,r.end);return e.slice(0,t)+e.slice(o)}(s,n):s;ve(a,n?void 0:o,e)}}}},placeholder:function(){if($){var e=(0,p.a)(null==ne?void 0:ne.value,u.A);if(e)return D?e.formatInternational():e.formatNational()}}(),required:M,size:"size-".concat(U),type:"tel",value:ue.value,wrapperClasses:(0,a.classnames)({"gform-phone__input-wrapper":!0},(null==S?void 0:S.wrapperClasses)||[])}),Ae=T(T({size:"text-xs",weight:"regular"},q),{},{customClasses:(0,a.classnames)(["gform-phone__help-text"],E),id:me});return a.React.createElement("div",(0,o.A)({},he,{ref:W}),k&&a.React.createElement("div",Te,k,M&&a.React.createElement(b.A,Pe)),a.React.createElement("div",{className:"gform-phone__wrapper"},a.React.createElement(d.A,(0,o.A)({},Ce,{ref:X})),a.React.createElement(f.A,(0,o.A)({},we,{ref:Z}))),ye===O&&a.React.createElement(b.A,Ae))});_.propTypes={countries:a.PropTypes.array,customAttributes:a.PropTypes.object,customClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),disabled:a.PropTypes.bool,dropdownAttributes:a.PropTypes.object,dropdownClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),helpTextAttributes:a.PropTypes.object,helpTextClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),i18n:a.PropTypes.object,id:a.PropTypes.string,inputAttributes:a.PropTypes.object,inputClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),international:a.PropTypes.bool,label:a.PropTypes.string,labelAttributes:a.PropTypes.object,labelClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),language:a.PropTypes.string,onChange:a.PropTypes.func,preferredCountries:a.PropTypes.array,required:a.PropTypes.bool,requiredLabelAttributes:a.PropTypes.object,requiredLabelClasses:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.array,a.PropTypes.object]),size:a.PropTypes.oneOf(["r","l","xl"]),spacing:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.number,a.PropTypes.array,a.PropTypes.object]),usePlaceholder:a.PropTypes.bool,useValidation:a.PropTypes.bool,width:a.PropTypes.number};var R=A(function(e,r){var t=T(T({},{countries:[],customAttributes:{},customClasses:[],disabled:!1,dropdownAttributes:{},dropdownClasses:[],helpTextAttributes:{},helpTextClasses:[],i18n:{},id:"",inputAttributes:{},inputClasses:[],international:!0,label:"",labelAttributes:{},labelClasses:[],language:"en",onChange:function(){},preferredCountries:[],required:!1,requiredLabelAttributes:{},requiredLabelClasses:[],size:"r",spacing:"",usePlaceholder:!0,useValidation:!1,width:0}),e),s={id:t.id};return a.React.createElement(l.IdProvider,s,a.React.createElement(_,(0,o.A)({},t,{ref:r})))})}}]);