@adyen/adyen-web
Version:
[](https://www.npmjs.com/package/@adyen/adyen-web)
3 lines (2 loc) • 4.88 kB
JavaScript
import e from"../../../../_virtual/index.js";import{createElement as t,Fragment as n,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 d,useState as u,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,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),a.forEach(function(t){y(e,t,n[t])})}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach(function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}),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:$,labelEndAdornment:L,name:S,onBlur:I,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,errorLive:Q}=y,U=null==G||G,X=D&&"string"==typeof w&&w.length>0,Y=q&&!X&&H&&H.length>0,Z=s(m(`adyen-checkout-${S}`)),ee=d(()=>B?`input-static-value-${h()}`:null,[B]),[te,ne]=u(!1),[ae,le]=u(!1);null!=W&&ne(!!W),null!=R&&le(!!R);const re=p(e=>{ne(!0),null==A||A(e)},[A]),oe=p(e=>{ne(!1),null==I||I(e),null==C||C(e)},[I,C]),ie=p(()=>t(n,null,"string"==typeof $&&t("span",{className:e({"adyen-checkout__label__text":!0,"adyen-checkout__label__text--error":w}),"data-id":S,"data-testid":S},$),"function"==typeof $&&$(),L&&t("span",{className:"adyen-checkout__label-adornment--end"},L),E&&t("span",{className:"adyen-checkout__helper-text"},E)),[$,w,L,E]),ce=p(()=>{const s=t("span",_(b(_({className:e({"adyen-checkout-contextual-text--error":!0,"adyen-checkout-contextual-text--hidden":!X})},U&&{id:`${Z.current}${i}`}),{"aria-hidden":U?void 0:"true"}),U&&Q&&{"aria-live":"polite"}),w),d=t("span",b(_({className:e({"adyen-checkout-contextual-text":!0,"adyen-checkout-contextual-text--hidden":!Y})},U&&{id:`${Z.current}${c}`}),{"aria-hidden":U?void 0:"true"}),H);return t(n,null,t("div",{className:e(["adyen-checkout__input-wrapper",...N.map(e=>`adyen-checkout__input-wrapper--${e}`)]),dir:O,onClick:K},B&&t("span",{id:ee,className:"adyen-checkout__field-static-value"},B),a(k).map(e=>{const t=b(_({isValid:P,onFocusHandler:re,onBlurHandler:oe,isInvalid:!!w,"aria-owns":ee},S&&{uniqueId:Z.current}),{showErrorElement:D});return l(e,t)}),F&&t("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--loading"},t(r,{size:"small"})),P&&!1!==T&&t("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--valid"},t(o,{type:`${f}checkmark_black`,alt:null==z?void 0:z.get("field.valid")})),w&&t("span",{className:"adyen-checkout-input__inline-validation adyen-checkout-input__inline-validation--invalid"},t(o,{type:`${f}field_error`,alt:null==z?void 0:z.get("error.title")}))),s,d)},[k,w,H,F,P,re,oe]),se=p(({onFocusField:n,focused:a,filled:l,disabled:r,name:o,uniqueId:i,useLabelElement:c,isSecuredField:s,children:d,renderAlternativeToLabel:u})=>{const p={onClick:n,className:e({"adyen-checkout__label":!0,"adyen-checkout__label--focused":a,"adyen-checkout__label--filled":l,"adyen-checkout__label--disabled":r})};return c?t("label",_({},p,!s&&o&&{htmlFor:i,id:`${i}-label`}),d):u(p,d,i)},[]);return t("div",{"data-testid":"form-field",className:e("adyen-checkout__field",v,null==j?void 0:j.map(e=>`adyen-checkout__field--${e}`),{"adyen-checkout__field--error":w,"adyen-checkout__field--valid":P,"adyen-checkout__field--inactive":x||g})},t(se,{onFocusField:M,name:S,disabled:g,filled:ae,focused:te,useLabelElement:V,uniqueId:Z.current,isSecuredField:!U,renderAlternativeToLabel:J},ie()),ce())};k.defaultProps={className:"",classNameModifiers:[],inputWrapperModifiers:[],useLabelElement:!0,showErrorElement:!0,showContextualElement:!0,renderAlternativeToLabel:()=>null};export{k as default};
//# sourceMappingURL=Field.js.map