@atlas-kitchen/adyen-web
Version:
3 lines (2 loc) • 4.79 kB
JavaScript
import e from"../../../../_virtual/index.js";import{createElement as n,Fragment as t,toChildArray as a,cloneElement as l}from"../../../../external/preact/dist/preact.js";import r from"../../Spinner/Spinner.js";import o from"../../Icon/Icon.js";import{ARIA_ERROR_SUFFIX as i,ARIA_CONTEXT_SUFFIX as c}from"../../../../core/Errors/constants.js";import{useRef as s,useMemo as u,useState as d,useCallback as p}from"../../../../external/preact/hooks/dist/hooks.js";import{getUniqueId as m}from"../../../../utils/idGenerator.js";import{PREFIX as f}from"../../Icon/constants.js";import h from"../../../../utils/uuid.js";function y(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function _(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(n){y(e,n,t[n])}))}return e}function b(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}const k=y=>{const{children:k,className:v,classNameModifiers:j,dir:O,disabled:g,readOnly:x,errorMessage:w,helper:E,inputWrapperModifiers:N,isLoading:F,isValid:P,label:S,labelEndAdornment:$,name:I,onBlur:L,onFieldBlur:C,onFocus:A,onFocusField:M,showValidIcon:T,useLabelElement:V,showErrorElement:D,showContextualElement:q,staticValue:B,contextualText:H,filled:R,focused:W,i18n:z,contextVisibleToScreenReader:G,renderAlternativeToLabel:J,onInputContainerClick:K}=y,Q=null==G||G,U=D&&"string"==typeof w&&w.length>0,X=q&&!U&&(null==H?void 0:H.length)>0,Y=s(m(`adyen-checkout-${I}`)),Z=u((()=>B?`input-static-value-${h()}`:null),[B]),[ee,ne]=d(!1),[te,ae]=d(!1);null!=W&&ne(!!W),null!=R&&ae(!!R);const le=p((e=>{ne(!0),null==A||A(e)}),[A]),re=p((e=>{ne(!1),null==L||L(e),null==C||C(e)}),[L,C]),oe=p((()=>n(t,null,"string"==typeof S&&n("span",{className:e({"adyen-checkout__label__text":!0,"adyen-checkout__label__text--error":w}),"data-id":I},S),"function"==typeof S&&S(),$&&n("span",{className:"adyen-checkout__label-adornment--end"},$),E&&n("span",{className:"adyen-checkout__helper-text"},E))),[S,w,$,E]),ie=p((()=>{const s=n("span",b(_({className:e({"adyen-checkout-contextual-text--error":!0,"adyen-checkout-contextual-text--hidden":!U})},Q&&{id:`${Y.current}${i}`}),{"aria-hidden":Q?null:"true"}),w),u=n("span",b(_({className:e({"adyen-checkout-contextual-text":!0,"adyen-checkout-contextual-text--hidden":!X})},Q&&{id:`${Y.current}${c}`}),{"aria-hidden":Q?null:"true"}),H);return n(t,null,n("div",{className:e(["adyen-checkout__input-wrapper",...N.map((e=>`adyen-checkout__input-wrapper--${e}`))]),dir:O,onClick:K},B&&n("span",{id:Z,className:"adyen-checkout__field-static-value"},B),a(k).map((e=>{const n=b(_({isValid:P,onFocusHandler:le,onBlurHandler:re,isInvalid:!!w,"aria-owns":Z},I&&{uniqueId:Y.current}),{showErrorElement:D});return l(e,n)})),F&&n("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading"},n(r,{size:"small"})),P&&!1!==T&&n("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid"},n(o,{type:`${f}checkmark`,alt:null==z?void 0:z.get("field.valid")})),w&&n("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid"},n(o,{type:`${f}field_error`,alt:null==z?void 0:z.get("error.title")}))),s,u)}),[k,w,H,F,P,le,re]),ce=p((({onFocusField:t,focused:a,filled:l,disabled:r,name:o,uniqueId:i,useLabelElement:c,isSecuredField:s,children:u,renderAlternativeToLabel:d})=>{const p={onClick:t,className:e({"adyen-checkout__label":!0,"adyen-checkout__label--focused":a,"adyen-checkout__label--filled":l,"adyen-checkout__label--disabled":r})};return c?n("label",_({},p,!s&&o&&{htmlFor:i}),u):d(p,u,i)}),[]);return n("div",{className:e("adyen-checkout__field",v,j.map((e=>`adyen-checkout__field--${e}`)),{"adyen-checkout__field--error":w,"adyen-checkout__field--valid":P,"adyen-checkout__field--inactive":x||g})},n(ce,{onFocusField:M,name:I,disabled:g,filled:te,focused:ee,useLabelElement:V,uniqueId:Y.current,isSecuredField:!Q,renderAlternativeToLabel:J},oe()),ie())};k.defaultProps={className:"",classNameModifiers:[],inputWrapperModifiers:[],useLabelElement:!0,showErrorElement:!0,showContextualElement:!0,renderAlternativeToLabel:()=>null};export{k as default};
//# sourceMappingURL=Field.js.map