react-images
Version:
A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
2 lines (1 loc) • 21.6 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom"),require("glam"),require("raf-schd"),require("react-view-pager"),require("html-react-parser"),require("react-focus-on"),require("react-full-screen"),require("a11y-focus-store"),require("react-transition-group")):"function"==typeof define&&define.amd?define(["react","react-dom","glam","raf-schd","react-view-pager","html-react-parser","react-focus-on","react-full-screen","a11y-focus-store","react-transition-group"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Images=t(e.React,e.ReactDOM,e.glam,e.rafScheduler,e.PageView,e.ParseHtml,e.FocusOn,e.Fullscreen,e.focusStore,e.Transition)}(this,function(f,r,e,t,l,n,i,p,o,c){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var d=a(f),m=a(e),u=a(t),h=a(n),g=a(o),v=function(e,t,n){return t&&y(e.prototype,t),n&&y(e,n),e};function y(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function x(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function w(e,t){var n={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function F(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function C(e){var t=e.css,n=e.innerRef,r=e.tag,o=w(e,["css","innerRef","tag"]);return m.default(r,E({ref:n,css:E({boxSizing:"border-box"},t)},o))}function P(e){return m.default(C,E({tag:"button"},e))}function k(e){return m.default(C,E({tag:"div"},e))}function I(e){return m.default(C,E({tag:"img"},e))}function S(e){return m.default(C,E({tag:"nav"},e))}function M(e){return m.default(C,E({tag:"span"},e))}var E=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};function z(e,t){var n=Array.isArray(e)?e:[e];if(t&&"string"==typeof e)for(var r in t)t.hasOwnProperty(r)&&t[r]&&n.push(e+"--"+r);return n.map(function(e){return"react-images__"+e}).join(" ")}function N(){try{return document.createEvent("TouchEvent"),!0}catch(e){return!1}}function O(e){var t=e.size,n=w(e,["size"]);return m.default("svg",E({role:"presentation",viewBox:"0 0 24 24",css:{display:"inline-block",fill:"currentColor",height:t,stroke:"currentColor",strokeWidth:0,width:t}},n))}function T(e){var t=e.size,n=void 0===t?32:t,r=w(e,["size"]);return m.default(O,E({size:n},r),m.default("path",{d:"M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"}))}function _(e){var t=e.size,n=void 0===t?32:t,r=w(e,["size"]);return m.default(O,E({size:n},r),m.default("path",{d:"M9.984 6l6 6-6 6-1.406-1.406 4.594-4.594-4.594-4.594z"}))}function V(e){var t=e.size,n=void 0===t?32:t,r=w(e,["size"]);return m.default(O,E({size:n},r),m.default("path",{d:"M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"}))}function L(e){var t=e.size,n=void 0===t?32:t,r=w(e,["size"]);return m.default(O,E({size:n},r),m.default("path",{d:"M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z"}))}function j(e){var t=e.size,n=void 0===t?32:t,r=w(e,["size"]);return m.default(O,E({size:n},r),m.default("path",{d:"M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z"}))}function D(){return{alignItems:"center",background:0,border:0,color:"rgba(255, 255, 255, 0.75)",cursor:"pointer",display:"inline-flex ",height:44,justifyContent:"center",outline:0,padding:0,position:"relative",width:44,"&:hover":{color:"white"}}}function H(e){var t,n=e.align;return b(t={alignItems:"center",background:"rgba(255, 255, 255, 0.2)",border:0,borderRadius:"50%",color:"white",cursor:"pointer",display:"flex ",fontSize:"inherit",height:50,justifyContent:"center",marginTop:-25,outline:0,position:"absolute",top:"50%",transition:"background-color 200ms",width:50},n,20),b(t,"&:hover",{background:"rgba(255, 255, 255, 0.3)"}),b(t,"&:active",{background:"rgba(255, 255, 255, 0.2)"}),t}var B={Header:"header",Footer:"footer",View:"view",Track:"track",Positioner:"positioner"},A=B.Footer,q=B.Header,R=D,W=D,U=H,K=H;function G(e){var n=e.component,t=e.onEntered,r=e.onExited,o=e.in,i=e.innerProps,a=w(e,["component","onEntered","onExited","in","innerProps"]),s={transition:"opacity 200ms",opacity:0},l={entering:{opacity:0},entered:{opacity:1},exiting:{opacity:0,transitionDuration:"500ms"}};return d.default.createElement(c.Transition,{appear:!0,mountOnEnter:!0,unmountOnExit:!0,onEntered:t,onExited:r,key:"fade",in:o,timeout:{enter:300,exit:500}},function(e){var t=E({},i,{style:E({},s,l[e])});return"exited"===e?null:d.default.createElement(n,E({innerProps:t},a))})}function Y(e){var n=e.component,t=e.onEntered,r=e.onExited,o=e.in,i=e.innerProps,a=w(e,["component","onEntered","onExited","in","innerProps"]),s="translate3d(0, 0, 0)",l={transition:"transform 300ms "+te+", opacity 300ms "+te,transform:s},u={entering:{opacity:0,transform:"translate3d(0, 40px, 0) scale(0.9)"},entered:{opacity:1,transform:s},exiting:{opacity:0,transform:"translate3d(0, 40px, 0) scale(0.9)",transition:"transform 500ms "+te+", opacity 500ms "+te}};return d.default.createElement(c.Transition,{appear:!0,in:o,mountOnEnter:!0,onEntered:t,onExited:r,timeout:{enter:300,exit:500},unmountOnExit:!0},function(e){if("exited"===e)return null;var t=E({},i,{style:E({},l,u[e])});return d.default.createElement(n,E({innerProps:t},a))})}var J,Q=B.View,X={Container:function(e){var t=e.children,n=e.getStyles,r=e.isFullscreen,o=e.isModal,i=e.innerProps;return m.default(k,E({css:n("container",e),className:z("container",{isFullscreen:r,isModal:o})},i),t)},Footer:function(e){var t=e.components,n=e.getStyles,r=e.innerProps,o=e.isFullscreen,i=e.isModal,a=i?{background:"linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))"}:null,s={isFullscreen:o,isModal:i},l={container:z(A,s),caption:z("footer__caption",s),count:z("footer__count",s)},u={container:n(A,e),caption:n("footerCaption",e),count:n("footerCount",e)},c=t.Caption,d=t.Count;return m.default(k,E({css:u.container,className:l.container,style:a},r),m.default(c,e),m.default(d,e))},FooterCaption:function(e){var t=e.currentView,n=e.getStyles,r=e.isFullscreen,o=e.isModal,i=t.caption,a={isFullscreen:r,isModal:o};return m.default(M,{css:n("footerCaption",e),className:z("footer__caption",a)},"string"==typeof i?h.default("<span>"+i+"</span>"):i)},FooterCount:function(e){var t=e.currentIndex,n=e.getStyles,r={isFullscreen:e.isFullscreen,isModal:e.isModal},o=t+1,i=e.views.length;return o&&i?m.default(M,{css:n("footerCount",e),className:z("footer__count",r)},o," of ",i):null},Header:function(e){var t=e.components,n=e.getStyles,r=e.getCloseLabel,o=e.getFullscreenLabel,i=e.innerProps,a=e.isModal,s=e.modalProps;if(!a)return null;var l=s.allowFullscreen,u=s.isFullscreen,c=s.onClose,d=s.toggleFullscreen,f=u?j:L,p=t.CloseButton,h=t.FullscreenButton,g={isFullscreen:u,isModal:a};return m.default(k,E({css:n(q,e),className:z(q,g),style:{background:"linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))"}},i),m.default("span",null),m.default("span",null,l?m.default(h,{getStyles:n,innerProps:{onClick:d,title:o(g)}},m.default(f,{size:32})):null,m.default(p,{getStyles:n,innerProps:{onClick:c,title:r(g)}},m.default(V,{size:32}))))},HeaderClose:function(e){var t=e.children,n=e.getStyles,r=e.innerProps;return m.default(P,E({css:n("headerClose",e),className:z(["header_button","header_button--close"]),type:"button"},r),t)},HeaderFullscreen:function(e){var t=e.children,n=e.getStyles,r=e.innerProps;return m.default(P,E({css:n("headerFullscreen",e),className:z(["header_button","header_button--fullscreen"]),type:"button"},r),t)},Navigation:function(e){var t=e.children,n=e.getStyles,r=e.isFullscreen,o=e.isModal,i=e.showNavigationOnTouchDevice;return!N()||N()&&i?m.default(S,{css:n("navigation",e),className:z("navigation",{isFullscreen:r,isModal:o})},t):null},NavigationPrev:function(e){var t=e.children,n=void 0===t?m.default(T,{size:48}):t,r=e.getStyles,o=e.innerProps;return m.default(P,E({type:"button",css:r("navigationPrev",e)},o),n)},NavigationNext:function(e){var t=e.children,n=void 0===t?m.default(_,{size:48}):t,r=e.getStyles,o=e.innerProps;return m.default(P,E({type:"button",css:r("navigationNext",e)},o),n)},View:function(e){var t,n,r,o,i,a=e.data,s=e.formatters,l=e.getStyles,u=e.index,c=e.isFullscreen,d=e.isModal,f={alt:s.getAltText({data:a,index:u}),src:(n=(t={data:a,isFullscreen:c}).data,r=t.isFullscreen,o=n.source,"string"==typeof(i=void 0===o?n.src:o)?i:r?i.fullscreen:i.regular)};return m.default(k,{css:l(Q,e),className:z(Q,{isFullscreen:c,isModal:d})},m.default(I,E({},f,{className:z("view-image",{isFullscreen:c,isModal:d}),css:{height:"auto",maxHeight:"100vh",maxWidth:"100%",userSelect:"none"}})))}},Z={Blanket:function(e){var t=e.getStyles,n=e.innerProps,r=e.isFullscreen;return m.default(k,E({css:t("blanket",e),className:z("blanket",{isFullscreen:r})},n))},Positioner:function(e){var t=e.children,n=e.getStyles,r=e.innerProps,o=e.isFullscreen;return m.default(k,E({css:n(B.Positioner,e),className:z(B.Positioner,{isFullscreen:o})},r),t)},Dialog:function(e){var t=e.children,n=e.getStyles,r=e.innerProps,o=e.isFullscreen;return e.removeFocusOn?m.default(k,E({css:n("dialog",e),className:z("dialog",{isFullscreen:o})},r),t):m.default(i.FocusOn,null,m.default(k,E({css:n("dialog",e),className:z("dialog",{isFullscreen:o})},r),t))}},$={container:function(e){return{backgroundColor:e.isFullscreen?"black":null,display:"flex ",flexDirection:"column",height:"100%"}},footer:function(e){var t=e.isModal,n=e.interactionIsIdle;return b({alignItems:"top",bottom:t?0:null,color:t?"rgba(255, 255, 255, 0.9)":"#666",display:"flex ",flex:"0 0 auto",fontSize:13,justifyContent:"space-between",left:t?0:null,opacity:n&&t?0:1,padding:t?"30px 20px 20px":"10px 0",position:t?"absolute":null,right:t?0:null,transform:t?"translateY("+(n?10:0)+"px)":null,transition:"opacity 300ms, transform 300ms",zIndex:t?1:null,"& *:focus":{outline:"1.5px solid orange"}},"@media (max-width: 769px)",{padding:t?"20px 15px 15px":"5px 0"})},footerCaption:function(){return{}},footerCount:function(){return{flexShrink:0,marginLeft:"1em"}},header:function(e){var t=e.interactionIsIdle;return{alignItems:"center",display:"flex ",flex:"0 0 auto",justifyContent:"space-between",opacity:t?0:1,padding:10,paddingBottom:20,position:"absolute",transform:"translateY("+(t?-10:0)+"px)",transition:"opacity 300ms, transform 300ms",top:0,left:0,right:0,zIndex:1,"& *:focus":{outline:"1.5px solid orange"}}},headerClose:W,headerFullscreen:R,navigation:function(e){return{display:"flex ",alignItems:"center",justifyContent:"space-between",opacity:e.interactionIsIdle?0:1,transition:"opacity 300ms","& *:focus":{outline:"1.5px solid orange"}}},navigationPrev:U,navigationNext:K,view:function(){return{lineHeight:0,position:"relative",textAlign:"center"}}},ee={blanket:function(e){return{backgroundColor:e.isFullscreen?"black":"rgba(0, 0, 0, 0.8)",bottom:0,left:0,position:"fixed",right:0,top:0,zIndex:1199}},dialog:function(){return{width:"100%"}},positioner:function(){return{alignItems:"center",bottom:0,display:"flex ",justifyContent:"center",left:0,position:"fixed",right:0,top:0,zIndex:1200}}},te="cubic-bezier(0.23, 1, 0.32, 1)",ne={allowFullscreen:!N(),closeOnBackdropClick:!0,closeOnEsc:!0,preventScroll:!0,styles:{}},re=new Set([B.View,B.Header,B.Footer,B.Track,B.Positioner].map(z)),oe=(J=f.Component,x(ie,J),v(ie,[{key:"componentDidUpdate",value:function(e){e.components!==this.props.components&&this.cacheComponents(e.components)}},{key:"getCommonProps",value:function(){var e=this.state.isFullscreen;return{getStyles:this.getStyles,isFullscreen:e,modalProps:this.props}}},{key:"render",value:function(){var e=this.components,t=e.Blanket,n=e.Positioner,r=e.Dialog,o=this.props,i=o.allowFullscreen,a=o.children,s=this.state.isFullscreen,l=this.commonProps=this.getCommonProps(),u=this.props.in,c={allowFullscreen:i,isFullscreen:s,onClose:this.handleClose,preventScroll:this.preventScroll,toggleFullscreen:this.toggleFullscreen},d=f.cloneElement(a,{isModal:!0,modalProps:c});return m.default(p.FullScreen,{handle:{active:s},onChange:this.handleFullscreenChange},m.default(G,E({},l,{component:t,in:u})),m.default(Y,E({},l,{component:n,in:u,innerProps:{onClick:this.state.isClosing?null:this.handleBackdropClick},onEntered:this.modalDidMount,onExited:this.modalWillUnmount}),m.default(r,E({removeFocusOn:this.state.isClosing},l),d)))}}]),ie);function ie(e){s(this,ie);var t=F(this,(ie.__proto__||Object.getPrototypeOf(ie)).call(this,e));return ae.call(t),t.cacheComponents(e.components),t.state={isFullscreen:!1,isClosing:!1},t}oe.defaultProps=ne;var ae=function(){var l=this;this.modalDidMount=function(){document.addEventListener("keyup",l.handleKeyUp),g.default.storeFocus()},this.modalWillUnmount=function(){document.removeEventListener("keyup",l.handleKeyUp),g.default.restoreFocus(),l.setState({isClosing:!1})},this.cacheComponents=function(e){l.components=E({},Z,e)},this.handleFullscreenChange=function(e){l.setState({isFullscreen:e})},this.handleKeyUp=function(e){var t=l.props,n=t.allowFullscreen,r=t.closeOnEsc,o=l.state.isFullscreen,i="Escape"===e.key&&r&&!o;n&&"f"===e.key&&l.toggleFullscreen(),i&&l.handleClose(e)},this.handleBackdropClick=function(e){var t=!1,n=!0,r=!1,o=void 0;try{for(var i,a=e.target.classList[Symbol.iterator]();!(n=(i=a.next()).done);n=!0){var s=i.value;re.has(s)&&(t=!0)}}catch(e){r=!0,o=e}finally{try{!n&&a.return&&a.return()}finally{if(r)throw o}}t&&l.props.closeOnBackdropClick&&l.handleClose(e)},this.toggleFullscreen=function(){l.setState(function(e){return{isFullscreen:!e.isFullscreen}})},this.handleClose=function(e){var t=l.props.onClose,n=l.state,r=n.isFullscreen;n.isClosing||(l.setState({isClosing:!0}),r&&l.toggleFullscreen(),t(e))},this.getStyles=function(e,t){var n=ee[e](t);n.boxSizing="border-box";var r=l.props.styles[e];return r?r(n,t):n}};var se,le={flex:"1 1 auto",position:"relative"},ue={outline:0},ce={currentIndex:0,formatters:{getAltText:function(e){var t=e.data,n=e.index;return t.alt?("string"!=typeof t.alt&&console.error("Image "+(n+1)+" had a non-string alt property, which will probably render incorrectly.\nInstead of a plain string it was ",t.alt),t.alt):t.caption?("string"!=typeof t.caption&&console.warn("Image "+(n+1)+" has a non-string caption, but no alt value provided. This will probably make the alt prop unintelligible for screen readers. Is this intentional?"),t.caption):"Image "+(n+1)},getNextLabel:function(e){return"Show slide "+(e.currentIndex+2)+" of "+e.views.length},getPrevLabel:function(e){return"Show slide "+e.currentIndex+" of "+e.views.length},getNextTitle:function(e){return"Next (right arrow)"},getPrevTitle:function(e){return"Previous (left arrow)"},getCloseLabel:function(e){return"Close (esc)"},getFullscreenLabel:function(e){return e.isFullscreen?"Exit fullscreen (f)":"Enter fullscreen (f)"}},hideControlsWhenIdle:3e3,showNavigationOnTouchDevice:!1,styles:{},trackProps:{instant:!N(),swipe:"touch"}},de=B.Track,fe=(se=f.Component,x(pe,se),v(pe,[{key:"componentDidMount",value:function(){var e=this.props,t=e.hideControlsWhenIdle,n=e.modalProps,r=Boolean(n);this.mounted=!0,t&&this.container&&(this.container.addEventListener("mousedown",this.handleMouseActivity),this.container.addEventListener("mousemove",this.handleMouseActivity),this.container.addEventListener("touchmove",this.handleMouseActivity)),r&&this.focusViewFrame()}},{key:"componentDidUpdate",value:function(e){e.components!==this.props.components&&this.cacheComponents(e.components),this.props.currentIndex!==e.currentIndex&&this.setState({currentIndex:this.props.currentIndex})}},{key:"componentWillUnmount",value:function(){this.mounted=!1,this.props.hideControlsWhenIdle&&this.container&&(this.container.removeEventListener("mousedown",this.handleMouseActivity),this.container.removeEventListener("mousemove",this.handleMouseActivity),this.container.removeEventListener("touchmove",this.handleMouseActivity),this.handleMouseActivity.cancel())}},{key:"getCommonProps",value:function(){var e=this.props,t=e.frameProps,n=e.trackProps,r=e.modalProps,o=e.views,i=e.showNavigationOnTouchDevice,a=Boolean(r),s=Boolean(r&&r.isFullscreen),l=this.state,u=l.currentIndex,c=l.interactionIsIdle,d=this.getViewData();return{carouselProps:this.props,currentIndex:u,currentView:d,formatters:this.props.formatters,frameProps:t,getStyles:this.getStyles,showNavigationOnTouchDevice:i,isFullscreen:s,isModal:a,modalProps:r,interactionIsIdle:c,trackProps:n,views:o}}},{key:"render",value:function(){var e=this.components,t=e.Container,n=e.View,r=this.state.currentIndex,o=this.props,i=o.frameProps,a=o.views,s=this.commonProps=this.getCommonProps();return m.default(t,E({},s,{innerProps:{innerRef:this.getContainer}}),this.renderHeader(),m.default(l.ViewPager,{tag:"main",style:le,className:z("pager")},m.default(l.Frame,E({},i,{ref:this.getFrame,className:z("frame"),style:ue,tabIndex:"-1"}),m.default(l.Track,E({},this.getTrackProps(this.props),{style:{display:"flex",alignItems:"center"},currentView:r,className:z(de),onViewChange:this.handleViewChange,ref:this.getTrack}),a&&a.map(function(e,t){return m.default(l.View,{className:z("view-wrapper"),key:t},m.default(n,E({},s,{data:e,index:t})))}))),this.renderNavigation()),this.renderFooter())}}]),pe);function pe(e){s(this,pe);var t=F(this,(pe.__proto__||Object.getPrototypeOf(pe)).call(this,e));return me.call(t),t.cacheComponents(e.components),t.state={currentIndex:e.currentIndex,interactionIsIdle:N()},t}fe.defaultProps=ce;function he(e){var t=e.children;return f.Children.toArray(t)[0]||null}var ge,me=function(){var f=this;this.mounted=!1,this.cacheComponents=function(e){f.components=E({},X,e)},this.getContainer=function(e){f.container=e},this.getFooter=function(e){f.footer=e},this.getFrame=function(e){f.frame=r.findDOMNode(e)},this.getHeader=function(e){f.header=e},this.getTrack=function(e){f.track=e},this.hasPreviousView=function(){var e=f.props.trackProps,t=f.state.currentIndex;return e.infinite||0!==t},this.hasNextView=function(){var e=f.props,t=e.trackProps,n=e.views,r=f.state.currentIndex;return t.infinite||r!==n.length-1},this.getStyles=function(e,t){var n=$[e](t);n.boxSizing="border-box";var r=f.props.styles[e];return r?r(n,t):n},this.getTrackProps=function(e){return E({},ce.trackProps,e.trackProps)},this.getFormatters=function(){return E({},ce.formatters,f.props.formatters)},this.getViewData=function(){return f.props.views[f.state.currentIndex]},this.focusViewFrame=function(){f.frame&&document.activeElement!==f.frame&&f.frame.focus()},this.prev=function(e){e.stopPropagation(),f.track.prev(),f.focusViewFrame()},this.next=function(e){e.stopPropagation(),f.track.next(),f.focusViewFrame()},this.handleMouseActivity=u.default(function(){clearTimeout(f.timer),f.state.interactionIsIdle&&f.setState({interactionIsIdle:!1}),f.timer=setTimeout(function(){f.mounted&&f.setState({interactionIsIdle:!0})},f.props.hideControlsWhenIdle)}),this.handleViewChange=function(e){var t=f.props.trackProps,n=e[0];f.setState({currentIndex:n}),t&&t.onViewChange&&t.onViewChange(n)},this.renderNavigation=function(){var e=f.getFormatters(),t=e.getNextLabel,n=e.getPrevLabel,r=e.getNextTitle,o=e.getPrevTitle,i=f.components,a=i.Navigation,s=i.NavigationPrev,l=i.NavigationNext,u=f.commonProps,c=f.hasPreviousView(),d=f.hasNextView();return(c||d)&&a?m.default(a,u,c&&m.default(s,E({},u,{align:"left",innerProps:{"aria-label":n(u),onClick:f.prev,title:o(u)}})),d&&m.default(l,E({},u,{align:"right",innerProps:{"aria-label":t(u),onClick:f.next,title:r(u)}}))):null},this.renderFooter=function(){var e=f.components,t=e.Footer,n=e.FooterCaption,r=e.FooterCount,o=f.commonProps;return t?m.default(t,E({},o,{components:{Caption:n,Count:r},innerProps:{innerRef:f.getFooter}})):null},this.renderHeader=function(){var e=f.components,t=e.Header,n=e.HeaderClose,r=e.HeaderFullscreen,o=f.getFormatters(),i=o.getCloseLabel,a=o.getFullscreenLabel,s=f.commonProps;return t?m.default(t,E({},s,{getCloseLabel:i,getFullscreenLabel:a,components:{CloseButton:n,FullscreenButton:r},data:f.getViewData(),innerProps:{innerRef:f.getHeader}})):null}},ve=(ge=f.Component,x(ye,ge),v(ye,[{key:"render",value:function(){if("undefined"==typeof window)return null;var e=this.props,t=e.target,n=e.children;return r.createPortal(d.default.createElement(c.TransitionGroup,{component:he,children:n}),t)}}]),ye);function ye(){return s(this,ye),F(this,(ye.__proto__||Object.getPrototypeOf(ye)).apply(this,arguments))}return ve.defaultProps={target:"undefined"!=typeof window?document.body:null},fe.ModalGateway=ve,fe.Modal=oe,fe.carouselComponents=X,fe.modalComponents=Z,fe});