@ebay/ui-core-react
Version:
Skin components build off React
2 lines (1 loc) • 5.77 kB
JavaScript
;const h=require("./tslib.es6-C4EgNkz1.js"),o=require("react"),ae=require("react-remove-scroll"),_=require("classnames"),ie=require("makeup-screenreader-trap"),se=require("makeup-keyboard-trap"),le=require("./random-id-DlJj_RWH.js"),ce=require("./icons/ebay-icon-close-16/index.js"),ue=require("./icon-button-AJ6dtyvc.js"),de=require("./icons/ebay-icon-chevron-left-16/index.js");function W(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const q=W(ie),A=W(se),F=e=>{var{children:n}=e,t=h.__rest(e,["children"]);return o.createElement("h2",Object.assign({},t),n)},I=({children:e})=>o.createElement(o.Fragment,null,e),T=({children:e})=>o.createElement(o.Fragment,null,e);function z({open:e,classPrefix:n,transitionElement:t,dialogRef:r,dialogWindowRef:d,enabled:m,onTransitionEnd:c}){const s=o.useRef(e);o.useLayoutEffect(()=>{if(!m)return;let i=[d,r];t==="window"?i=[d]:t==="root"&&(i=[r]);let a;return e?a=me({dialog:r,waitFor:i,classPrefix:n,onTransitionEnd:c}):s.current!==e&&(a=fe({dialog:r,waitFor:i,classPrefix:n,onTransitionEnd:c})),s.current=e,()=>{a&&a()}},[e,m])}function me({dialog:e,waitFor:n,classPrefix:t,onTransitionEnd:r}){return K(e,n,`${t}--show`,r)}function fe({dialog:e,waitFor:n,classPrefix:t,onTransitionEnd:r}){return K(e,n,`${t}--hide`,r)}function K(e,n,t,r){if(!e.current||!t)return;let d=0;const m=n?n.length:0,c=`${t}-init`;return e.current.classList.add(c),be(()=>{e.current&&(e.current.classList.add(t),e.current.classList.remove(c),n.forEach(s=>{const i=()=>{var a,b;++d===m&&((a=e.current)===null||a===void 0||a.classList.remove(t),r(),(b=s.current)===null||b===void 0||b.removeEventListener("transitionend",i))};s.current.addEventListener("transitionend",i,{once:!0})}))})}function be(e){let n,t;return window.requestAnimationFrame?(n=window.requestAnimationFrame(()=>{n=window.requestAnimationFrame(e)}),t=window.cancelAnimationFrame):(n=window.setTimeout(e,26),t=window.clearTimeout),()=>{n&&(t(n),n=void 0)}}const ve=e=>{var n,{baseEl:t="div",classPrefix:r="drawer-dialog",windowClass:d,windowType:m,mainId:c,top:s,header:i,buttonPosition:a="right",children:b,ariaLabelledby:B,a11yCloseText:C,onCloseBtnClick:y=()=>{},footer:p,actions:D,onScroll:l,open:u=!1,onOpen:V=()=>{},onBackgroundClick:G=()=>{},ignoreEscape:J,closeButton:Q,previousButton:U,isModal:w,role:X="dialog",focus:j,transitionElement:Y,animated:M,closeButtonClass:Z}=e,E=h.__rest(e,["baseEl","classPrefix","windowClass","windowType","mainId","top","header","buttonPosition","children","ariaLabelledby","a11yCloseText","onCloseBtnClick","footer","actions","onScroll","open","onOpen","onBackgroundClick","ignoreEscape","closeButton","previousButton","isModal","role","focus","transitionElement","animated","closeButtonClass"]);const S=o.useRef(null),g=o.useRef(null),P=o.useRef(null),[ee,ne]=o.useState("");o.useEffect(()=>{ne(le.randomId())},[]);const te=f=>{var v;(v=E.onClick)===null||v===void 0||v.call(E,f),g.current&&!g.current.contains(f.target)&&G(f)};o.useEffect(()=>(u&&w?(q.trap(g.current),A.trap(g.current)):(q.untrap(),A.untrap()),()=>{q.untrap(),A.untrap()})),z({open:u,classPrefix:r,transitionElement:Y,dialogRef:S,dialogWindowRef:g,enabled:M,onTransitionEnd:()=>R(u)});const L=f=>{!J&&f.key==="Escape"&&(f.stopPropagation(),y(f))};o.useEffect(()=>{M||R(u),u&&V()},[u]);function R(f){var v,k;if(f)return j?(v=j.current)===null||v===void 0||v.focus():w&&((k=P.current)===null||k===void 0||k.focus()),document.addEventListener("keydown",L,!1),()=>document.removeEventListener("keydown",L,!1)}const x=a!=="hidden"&&o.createElement("button",{ref:P,className:_("icon-btn",Z,`${r}__close`,{"icon-btn--transparent":r==="toast-dialog"}),type:"button","aria-label":C,onClick:y},Q||o.createElement(ce.EbayIconClose16,null)),oe=m?`${r}__${m}-window`:`${r}__window`,H=((n=i?.props)===null||n===void 0?void 0:n.id)||`dialog-title-${ee}`,re=B||H,O=i?o.cloneElement(i,Object.assign(Object.assign({},i.props),{id:H})):null;return o.createElement(t,Object.assign({},E,{"aria-labelledby":re,"aria-modal":w?"true":"false",role:X,hidden:!u,className:_(r,E.className),"aria-live":w?void 0:"polite",ref:S,onKeyDown:L,onMouseDown:u&&a!=="hidden"?te:E.onMouseDown}),o.createElement("div",{className:_(oe,d),ref:g},s,O&&o.createElement("div",{className:`${r}__header`},U,a==="right"&&O,a!=="bottom"&&x,(a==="left"||a==="hidden")&&O),o.createElement("div",{id:c,className:`${r}__main`,onScroll:l},b),D?o.createElement("div",{className:`${r}__actions`},D):null,p||a==="bottom"?o.createElement("div",{className:`${r}__footer`},p,a==="bottom"&&x):null))},ge=e=>{var{isModal:n,open:t,children:r,animated:d=!0}=e,m=h.__rest(e,["isModal","open","children","animated"]);const c=n!==!1,s=o.Children.toArray(r),i=s.find(l=>l.type===F),a=s.find(l=>l.type===I),b=s.find(l=>l.type===$),B=s.find(l=>l.type===T),C=s.find(l=>l.type===N),y=s.filter(l=>![F,I,T,$,N].some(u=>u===l.type)),p=o.createElement(ve,Object.assign({},m,{open:t,isModal:c,header:i,footer:a,actions:b,closeButton:B,previousButton:C,animated:d}),y);return d||t?c?o.createElement(ae.RemoveScroll,{enabled:t},p):p:null},$=({children:e})=>o.createElement(o.Fragment,null,e),N=e=>{var{className:n,icon:t}=e,r=h.__rest(e,["className","icon"]);return o.createElement(ue.EbayIconButton,Object.assign({},r,{icon:t||o.createElement(de.EbayIconChevronLeft16,null),className:_(n,"lightbox-dialog__prev")}))};exports.DialogBaseWithState=ge;exports.EbayDialogActions=$;exports.EbayDialogCloseButton=T;exports.EbayDialogFooter=I;exports.EbayDialogHeader=F;exports.EbayDialogPreviousButton=N;exports.useDialogAnimation=z;