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