react-image-gallery 1.2.6 → 1.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.eslintrc.json CHANGED
@@ -19,5 +19,6 @@
19
19
  "react"
20
20
  ],
21
21
  "rules": {
22
+ "react/display-name": "off"
22
23
  }
23
24
  }
@@ -10,6 +10,9 @@ assignees: ''
10
10
  **Describe the bug**
11
11
  A clear and concise description of what the bug is.
12
12
 
13
+ **Image Gallery Version**
14
+ What version of `react-image-gallery` are you using?
15
+
13
16
  **To Reproduce**
14
17
  Steps to reproduce the behavior:
15
18
  1. Go to '...'
package/README.md CHANGED
@@ -2,7 +2,8 @@ React Image Gallery
2
2
  ===
3
3
 
4
4
  [![npm version](https://badge.fury.io/js/react-image-gallery.svg)](https://badge.fury.io/js/react-image-gallery)
5
- [![Download Count](http://img.shields.io/npm/dm/react-image-gallery.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
5
+ [![Download Count](http://img.shields.io/npm/dm/react-image-gallery.svg?style=flat)](https://www.npmjs.com/package/react-image-gallery)
6
+ [![Bundle size](https://badgen.net/bundlephobia/minzip/react-image-gallery)](https://bundlephobia.com/package/react-image-gallery)
6
7
 
7
8
  ### Live Demo (try it on mobile for swipe support)
8
9
  [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
@@ -20,7 +21,6 @@ React image gallery is a React component for building image galleries and carous
20
21
  * RTL support
21
22
  * Responsive design
22
23
  * Tons of customization options (see props below)
23
- * Lightweight ~13.1kb gzipped
24
24
 
25
25
  ## Getting started
26
26
 
@@ -75,8 +75,10 @@ class MyGallery extends React.Component {
75
75
  * `fullscreen` - image for fullscreen (defaults to original)
76
76
  * `originalHeight` - image height (html5 attribute)
77
77
  * `originalWidth` - image width (html5 attribute)
78
+ * `loading` - image loading. Either "lazy" or "eager" (html5 attribute)
78
79
  * `thumbnailHeight` - image height (html5 attribute)
79
80
  * `thumbnailWidth` - image width (html5 attribute)
81
+ * `thumbnailLoading` - image loading. Either "lazy" or "eager" (html5 attribute)
80
82
  * `originalClass` - custom image class
81
83
  * `thumbnailClass` - custom thumbnail class
82
84
  * `renderItem` - Function for custom rendering a specific slide (see renderItem below)
@@ -170,60 +172,48 @@ class MyGallery extends React.Component {
170
172
  * As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference
171
173
 
172
174
  * `renderLeftNav`: Function, custom left nav component
175
+ * See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/LeftNav.js)
173
176
  * Use this to render a custom left nav control
174
- * Passes `onClick` callback that will slide to the previous item and `disabled` argument for when to disable the nav
177
+ * Args:
178
+ * `onClick` callback that will slide to the previous item
179
+ * `disabled` boolean for when the nav is disabled
175
180
  ```javascript
176
- renderLeftNav(onClick, disabled) {
177
- return (
178
- <button
179
- className='image-gallery-custom-left-nav'
180
- disabled={disabled}
181
- onClick={onClick}/>
182
- )
183
- }
181
+ renderLeftNav: (onClick, disabled) => (
182
+ <LeftNav onClick={onClick} disabled={disabled} />
183
+ )
184
184
  ```
185
185
  * `renderRightNav`: Function, custom right nav component
186
+ * See [`<RightNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/RightNav.js)
186
187
  * Use this to render a custom right nav control
187
- * Passes `onClick` callback that will slide to the next item and `disabled` argument for when to disable the nav
188
+ * Args:
189
+ * `onClick` callback that will slide to the next item
190
+ * `disabled` boolean for when the nav is disabled
188
191
  ```javascript
189
- renderRightNav(onClick, disabled) {
190
- return (
191
- <button
192
- className='image-gallery-custom-right-nav'
193
- disabled={disabled}
194
- onClick={onClick}/>
195
- )
196
- }
192
+ renderRightNav: (onClick, disabled) => (
193
+ <RightNav onClick={onClick} disabled={disabled} />
194
+ )
197
195
  ```
198
196
  * `renderPlayPauseButton`: Function, play pause button component
197
+ * See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/PlayPause.js)
199
198
  * Use this to render a custom play pause button
200
- * Passes `onClick` callback that will toggle play/pause and `isPlaying` argument for when gallery is playing
199
+ * Args:
200
+ * `onClick` callback that will toggle play/pause
201
+ * `isPlaying` boolean for when gallery is playing
201
202
  ```javascript
202
- renderPlayPauseButton: (onClick, isPlaying) => {
203
- return (
204
- <button
205
- type='button'
206
- className={
207
- `image-gallery-play-button${isPlaying ? ' active' : ''}`}
208
- onClick={onClick}
209
- />
210
- );
211
- }
203
+ renderPlayPauseButton: (onClick, isPlaying) => (
204
+ <PlayPause onClick={onClick} isPlaying={isPlaying} />
205
+ )
212
206
  ```
213
207
  * `renderFullscreenButton`: Function, custom fullscreen button component
208
+ * See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/controls/Fullscreen.js)
214
209
  * Use this to render a custom fullscreen button
215
- * Passes `onClick` callback that will toggle fullscreen and `isFullscreen` argument for when fullscreen is active
210
+ * Args:
211
+ * `onClick` callback that will toggle fullscreen
212
+ * `isFullscreen` argument for when fullscreen is active
216
213
  ```javascript
217
- renderFullscreenButton: (onClick, isFullscreen) => {
218
- return (
219
- <button
220
- type='button'
221
- className={
222
- `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
223
- onClick={onClick}
224
- />
225
- );
226
- },
214
+ renderFullscreenButton: (onClick, isFullscreen) => (
215
+ <Fullscreen onClick={onClick} isFullscreen={isFullscreen} />
216
+ ),
227
217
  ```
228
218
  * `useWindowKeyDown`: Boolean, default `true`
229
219
  * If `true`, listens to keydown events on window (window.addEventListener)
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.ImageGallery=t(require("react")):e.ImageGallery=t(e.React)}(this,(function(e){return(()=>{var t={703:(e,t,n)=>{"use strict";var i=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,s){if(s!==i){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},590:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,i="function"==typeof Set,r="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,s){if(e===s)return!0;if(e&&s&&"object"==typeof e&&"object"==typeof s){if(e.constructor!==s.constructor)return!1;var o,l,u,c;if(Array.isArray(e)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(!a(e[l],s[l]))return!1;return!0}if(n&&e instanceof Map&&s instanceof Map){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;for(c=e.entries();!(l=c.next()).done;)if(!a(l.value[1],s.get(l.value[0])))return!1;return!0}if(i&&e instanceof Set&&s instanceof Set){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;return!0}if(r&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(s)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(e[l]!==s[l])return!1;return!0}if(e.constructor===RegExp)return e.source===s.source&&e.flags===s.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===s.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===s.toString();if((o=(u=Object.keys(e)).length)!==Object.keys(s).length)return!1;for(l=o;0!=l--;)if(!Object.prototype.hasOwnProperty.call(s,u[l]))return!1;if(t&&e instanceof Element)return!1;for(l=o;0!=l--;)if(("_owner"!==u[l]&&"__v"!==u[l]&&"__o"!==u[l]||!e.$$typeof)&&!a(e[u[l]],s[u[l]]))return!1;return!0}return e!=e&&s!=s}e.exports=function(e,t){try{return a(e,t)}catch(e){if((e.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw e}}},37:function(e,t,n){!function(e,t){function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var i="Left",r="Right",a="Down",s={delta:10,preventDefaultTouchmoveEvent:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0},o={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},l="mousemove",u="mouseup";function c(e,t){if(0===t)return e;var n=Math.PI/180*t;return[e[0]*Math.cos(n)+e[1]*Math.sin(n),e[1]*Math.cos(n)-e[0]*Math.sin(n)]}function h(e,t){var s=function(t){t&&"touches"in t&&t.touches.length>1||e((function(e,i){i.trackMouse&&(document.addEventListener(l,h),document.addEventListener(u,f));var r="touches"in t?t.touches[0]:t,a=c([r.clientX,r.clientY],i.rotationAngle);return n({},e,o,{initial:[].concat(a),xy:a,start:t.timeStamp||0})}))},h=function(t){e((function(e,s){if("touches"in t&&t.touches.length>1)return e;var o="touches"in t?t.touches[0]:t,l=c([o.clientX,o.clientY],s.rotationAngle),u=l[0],h=l[1],d=u-e.xy[0],f=h-e.xy[1],p=Math.abs(d),m=Math.abs(f),v=(t.timeStamp||0)-e.start,g=Math.sqrt(p*p+m*m)/(v||1),b=[d/(v||1),f/(v||1)];if(p<s.delta&&m<s.delta&&!e.swiping)return e;var y=function(e,t,n,s){return e>t?n>0?r:i:s>0?a:"Up"}(p,m,d,f),w={absX:p,absY:m,deltaX:d,deltaY:f,dir:y,event:t,first:e.first,initial:e.initial,velocity:g,vxvy:b};s.onSwiping&&s.onSwiping(w);var T=!1;return(s.onSwiping||s.onSwiped||"onSwiped"+y in s)&&(T=!0),T&&s.preventDefaultTouchmoveEvent&&s.trackTouch&&t.cancelable&&t.preventDefault(),n({},e,{first:!1,eventData:w,swiping:!0})}))},d=function(t){e((function(e,i){var r;if(e.swiping&&e.eventData){r=n({},e.eventData,{event:t}),i.onSwiped&&i.onSwiped(r);var a="onSwiped"+r.dir;a in i&&i[a](r)}else i.onTap&&i.onTap({event:t});return n({},e,o,{eventData:r})}))},f=function(e){document.removeEventListener(l,h),document.removeEventListener(u,f),d(e)},p=function(e,t){var n=function(){};if(e&&e.addEventListener){var i=[["touchstart",s],["touchmove",h],["touchend",d]];i.forEach((function(n){var i=n[0],r=n[1];return e.addEventListener(i,r,{passive:t})})),n=function(){return i.forEach((function(t){var n=t[0],i=t[1];return e.removeEventListener(n,i)}))}}return n},m={ref:function(t){null!==t&&e((function(e,i){if(e.el===t)return e;var r={};return e.el&&e.el!==t&&e.cleanUpTouch&&(e.cleanUpTouch(),r.cleanUpTouch=void 0),i.trackTouch&&t&&(r.cleanUpTouch=p(t,!i.preventDefaultTouchmoveEvent)),n({},e,{el:t},r)}))}};return t.trackMouse&&(m.onMouseDown=s),[m,p]}e.DOWN=a,e.LEFT=i,e.RIGHT=r,e.UP="Up",e.useSwipeable=function(e){var i=e.trackMouse,r=t.useRef(n({},o)),a=t.useRef(n({},s));a.current=n({},s,e);var l=t.useMemo((function(){return h((function(e){return r.current=e(r.current,a.current)}),{trackMouse:i})}),[i]),u=l[0],c=l[1];return r.current=function(e,t,i){var r={};return!t.trackTouch&&e.cleanUpTouch?(e.cleanUpTouch(),r.cleanUpTouch=void 0):t.trackTouch&&!e.cleanUpTouch&&e.el&&(r.cleanUpTouch=i(e.el,!t.preventDefaultTouchmoveEvent)),n({},e,r)}(r.current,a.current,c),u}}(t,n(798))},798:t=>{"use strict";t.exports=e}},n={};function i(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,i),a.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{"use strict";function e(t){var n,i,r="";if("string"==typeof t||"number"==typeof t)r+=t;else if("object"==typeof t)if(Array.isArray(t))for(n=0;n<t.length;n++)t[n]&&(i=e(t[n]))&&(r&&(r+=" "),r+=i);else for(n in t)t[n]&&(r&&(r+=" "),r+=n);return r}function t(){for(var t,n,i=0,r="";i<arguments.length;)(t=arguments[i++])&&(n=e(t))&&(r&&(r+=" "),r+=n);return r}i.r(r),i.d(r,{default:()=>Oe});var n=i(798),a=i.n(n);const s=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},o="object"==typeof global&&global&&global.Object===Object&&global;var l="object"==typeof self&&self&&self.Object===Object&&self;const u=o||l||Function("return this")(),c=function(){return u.Date.now()};var h=/\s/;var d=/^\s+/;const f=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&h.test(e.charAt(t)););return t}(e)+1).replace(d,""):e},p=u.Symbol;var m=Object.prototype,v=m.hasOwnProperty,g=m.toString,b=p?p.toStringTag:void 0;var y=Object.prototype.toString;var w=p?p.toStringTag:void 0;const T=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?function(e){var t=v.call(e,b),n=e[b];try{e[b]=void 0;var i=!0}catch(e){}var r=g.call(e);return i&&(t?e[b]=n:delete e[b]),r}(e):function(e){return y.call(e)}(e)};var S=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,I=parseInt;const k=function(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&"[object Symbol]"==T(e)}(e))return NaN;if(s(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=s(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=f(e);var n=O.test(e);return n||E.test(e)?I(e.slice(2),n?2:8):S.test(e)?NaN:+e};var x=Math.max,_=Math.min;const L=function(e,t,n){var i,r,a,o,l,u,h=0,d=!1,f=!1,p=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var n=i,a=r;return i=r=void 0,h=t,o=e.apply(a,n)}function v(e){return h=e,l=setTimeout(b,t),d?m(e):o}function g(e){var n=e-u;return void 0===u||n>=t||n<0||f&&e-h>=a}function b(){var e=c();if(g(e))return y(e);l=setTimeout(b,function(e){var n=t-(e-u);return f?_(n,a-(e-h)):n}(e))}function y(e){return l=void 0,p&&i?m(e):(i=r=void 0,o)}function w(){var e=c(),n=g(e);if(i=arguments,r=this,u=e,n){if(void 0===l)return v(u);if(f)return clearTimeout(l),l=setTimeout(b,t),m(u)}return void 0===l&&(l=setTimeout(b,t)),o}return t=k(t)||0,s(n)&&(d=!!n.leading,a=(f="maxWait"in n)?x(k(n.maxWait)||0,t):a,p="trailing"in n?!!n.trailing:p),w.cancel=function(){void 0!==l&&clearTimeout(l),h=0,i=u=r=l=void 0},w.flush=function(){return void 0===l?o:y(c())},w},M=function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return s(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),L(e,t,{leading:i,maxWait:t,trailing:r})};var P=i(590),R=i.n(P),D=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some((function(e,i){return e[0]===t&&(n=i,!0)})),n}return function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),i=this.__entries__[n];return i&&i[1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,i=this.__entries__;n<i.length;n++){var r=i[n];e.call(t,r[1],r[0])}},t}()}(),F="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,W=void 0!==i.g&&i.g.Math===Math?i.g:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),C="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(W):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)},N=["top","right","bottom","left","width","height","size","weight"],j="undefined"!=typeof MutationObserver,z=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,i=!1,r=0;function a(){n&&(n=!1,e()),i&&o()}function s(){C(a)}function o(){var e=Date.now();if(n){if(e-r<2)return;i=!0}else n=!0,i=!1,setTimeout(s,20);r=e}return o}(this.refresh.bind(this))}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter((function(e){return e.gatherActive(),e.hasActive()}));return e.forEach((function(e){return e.broadcastActive()})),e.length>0},e.prototype.connect_=function(){F&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),j?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){F&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;N.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),B=function(e,t){for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];Object.defineProperty(e,r,{value:t[r],enumerable:!1,writable:!1,configurable:!0})}return e},A=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||W},G=V(0,0,0,0);function H(e){return parseFloat(e)||0}function U(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+H(e["border-"+n+"-width"])}),0)}var K="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof A(e).SVGGraphicsElement}:function(e){return e instanceof A(e).SVGElement&&"function"==typeof e.getBBox};function q(e){return F?K(e)?function(e){var t=e.getBBox();return V(0,0,t.width,t.height)}(e):function(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return G;var i=A(e).getComputedStyle(e),r=function(e){for(var t={},n=0,i=["top","right","bottom","left"];n<i.length;n++){var r=i[n],a=e["padding-"+r];t[r]=H(a)}return t}(i),a=r.left+r.right,s=r.top+r.bottom,o=H(i.width),l=H(i.height);if("border-box"===i.boxSizing&&(Math.round(o+a)!==t&&(o-=U(i,"left","right")+a),Math.round(l+s)!==n&&(l-=U(i,"top","bottom")+s)),!function(e){return e===A(e).document.documentElement}(e)){var u=Math.round(o+a)-t,c=Math.round(l+s)-n;1!==Math.abs(u)&&(o-=u),1!==Math.abs(c)&&(l-=c)}return V(r.left,r.top,o,l)}(e):G}function V(e,t,n,i){return{x:e,y:t,width:n,height:i}}var X=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=V(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=q(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),Y=function(e,t){var n,i,r,a,s,o,l,u=(i=(n=t).x,r=n.y,a=n.width,s=n.height,o="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(o.prototype),B(l,{x:i,y:r,width:a,height:s,top:r,right:i+a,bottom:s+r,left:i}),l);B(this,{target:e,contentRect:u})},$=function(){function e(e,t,n){if(this.activeObservations_=[],this.observations_=new D,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=n}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof A(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new X(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof A(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map((function(e){return new Y(e.target,e.broadcastRect())}));this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),J="undefined"!=typeof WeakMap?new WeakMap:new D,Q=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=z.getInstance(),i=new $(t,n,this);J.set(this,i)};["observe","unobserve","disconnect"].forEach((function(e){Q.prototype[e]=function(){var t;return(t=J.get(this))[e].apply(t,arguments)}}));const Z=void 0!==W.ResizeObserver?W.ResizeObserver:Q;var ee=i(37),te=i(697),ne={left:a().createElement("polyline",{points:"15 18 9 12 15 6"}),right:a().createElement("polyline",{points:"9 18 15 12 9 6"}),maximize:a().createElement("path",{d:"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"}),minimize:a().createElement("path",{d:"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"}),play:a().createElement("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:a().createElement(a().Fragment,null,a().createElement("rect",{x:"6",y:"4",width:"4",height:"16"}),a().createElement("rect",{x:"14",y:"4",width:"4",height:"16"}))},ie=function(e){var t=e.strokeWidth,n=e.viewBox,i=e.icon;return a().createElement("svg",{className:"image-gallery-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:n,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round"},ne[i])};ie.propTypes={strokeWidth:te.number,viewBox:te.string,icon:(0,te.oneOf)(["left","right","maximize","minimize","play","pause"]).isRequired},ie.defaultProps={strokeWidth:1,viewBox:"0 0 24 24"};const re=ie;var ae=a().memo((function(e){var t=e.description,n=e.fullscreen,i=e.handleImageLoaded,r=e.isFullscreen,s=e.onImageError,o=e.original,l=e.originalAlt,u=e.originalHeight,c=e.originalWidth,h=e.originalTitle,d=e.sizes,f=e.srcSet,p=r&&n||o;return a().createElement(a().Fragment,null,a().createElement("img",{className:"image-gallery-image",src:p,alt:l,srcSet:f,height:u,width:c,sizes:d,title:h,onLoad:function(e){return i(e,o)},onError:s}),t&&a().createElement("span",{className:"image-gallery-description"},t))}));ae.displayName="Item",ae.propTypes={description:te.string,fullscreen:te.string,handleImageLoaded:te.func.isRequired,isFullscreen:te.bool,onImageError:te.func.isRequired,original:te.string.isRequired,originalAlt:te.string,originalHeight:te.string,originalWidth:te.string,originalTitle:te.string,sizes:te.string,srcSet:te.string},ae.defaultProps={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:""};const se=ae;function oe(){return(oe=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var le=function(e){var t=e.children,n=e.className,i=e.delta,r=e.onSwiping,s=e.onSwiped,o=(0,ee.useSwipeable)({delta:i,onSwiping:r,onSwiped:s});return a().createElement("div",oe({},o,{className:n}),t)};le.propTypes={children:te.node.isRequired,className:te.string,delta:te.number,onSwiped:te.func,onSwiping:te.func},le.defaultProps={className:"",delta:0,onSwiping:function(){},onSwiped:function(){}};const ue=le;function ce(e){return(ce="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function he(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function de(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?he(Object(n),!0).forEach((function(t){fe(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):he(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function fe(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function pe(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function me(e,t){return(me=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ve(e,t){return!t||"object"!==ce(t)&&"function"!=typeof t?ge(e):t}function ge(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e){return(be=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var ye=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"],we=(0,te.arrayOf)((0,te.shape)({srcSet:te.string,media:te.string}));function Te(e){var t=parseInt(e.keyCode||e.which||0,10);return 66===t||62===t}var Se=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&me(e,t)}(l,e);var n,i,r,s,o=(r=l,s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=be(r);if(s){var n=be(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return ve(this,e)});function l(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(t=o.call(this,e)).state={currentIndex:e.startIndex,thumbsTranslate:0,thumbsSwipedTranslate:0,currentSlideOffset:0,galleryWidth:0,thumbnailsWrapperWidth:0,thumbnailsWrapperHeight:0,thumbsStyle:{transition:"all ".concat(e.slideDuration,"ms ease-out")},isFullscreen:!1,isSwipingThumbnail:!1,isPlaying:!1},t.loadedImages={},t.imageGallery=a().createRef(),t.thumbnailsWrapper=a().createRef(),t.thumbnails=a().createRef(),t.imageGallerySlideWrapper=a().createRef(),t.handleImageLoaded=t.handleImageLoaded.bind(ge(t)),t.handleKeyDown=t.handleKeyDown.bind(ge(t)),t.handleMouseDown=t.handleMouseDown.bind(ge(t)),t.handleTouchMove=t.handleTouchMove.bind(ge(t)),t.handleOnSwiped=t.handleOnSwiped.bind(ge(t)),t.handleScreenChange=t.handleScreenChange.bind(ge(t)),t.handleSwiping=t.handleSwiping.bind(ge(t)),t.handleThumbnailSwiping=t.handleThumbnailSwiping.bind(ge(t)),t.handleOnThumbnailSwiped=t.handleOnThumbnailSwiped.bind(ge(t)),t.onThumbnailMouseLeave=t.onThumbnailMouseLeave.bind(ge(t)),t.handleImageError=t.handleImageError.bind(ge(t)),t.pauseOrPlay=t.pauseOrPlay.bind(ge(t)),t.renderThumbInner=t.renderThumbInner.bind(ge(t)),t.renderItem=t.renderItem.bind(ge(t)),t.slideLeft=t.slideLeft.bind(ge(t)),t.slideRight=t.slideRight.bind(ge(t)),t.toggleFullScreen=t.toggleFullScreen.bind(ge(t)),t.togglePlay=t.togglePlay.bind(ge(t)),t.unthrottledSlideToIndex=t.slideToIndex,t.slideToIndex=M(t.unthrottledSlideToIndex,e.slideDuration,{trailing:!1}),e.lazyLoad&&(t.lazyLoaded=[]),t}return n=l,(i=[{key:"componentDidMount",value:function(){var e=this.props,t=e.autoPlay,n=e.useWindowKeyDown;t&&this.play(),n?window.addEventListener("keydown",this.handleKeyDown):this.imageGallery.current.addEventListener("keydown",this.handleKeyDown),window.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),this.initResizeObserver(this.imageGallerySlideWrapper),this.addScreenChangeEvent()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props,i=n.items,r=n.lazyLoad,a=n.slideDuration,s=n.slideInterval,o=n.startIndex,l=n.thumbnailPosition,u=n.showThumbnails,c=n.useWindowKeyDown,h=this.state.currentIndex,d=e.items.length!==i.length,f=!R()(e.items,i),p=e.startIndex!==o,m=e.thumbnailPosition!==l,v=e.showThumbnails!==u;s===e.slideInterval&&a===e.slideDuration||(this.pause(),this.play()),m&&(this.removeResizeObserver(),this.initResizeObserver(this.imageGallerySlideWrapper)),(d||v)&&this.handleResize(),t.currentIndex!==h&&this.slideThumbnailBar(),e.slideDuration!==a&&(this.slideToIndex=M(this.unthrottledSlideToIndex,a,{trailing:!1})),!r||e.lazyLoad&&!f||(this.lazyLoaded=[]),c!==e.useWindowKeyDown&&(c?(this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown),window.addEventListener("keydown",this.handleKeyDown)):(window.removeEventListener("keydown",this.handleKeyDown),this.imageGallery.current.addEventListener("keydown",this.handleKeyDown))),(p||f)&&this.setState({currentIndex:o})}},{key:"componentWillUnmount",value:function(){var e=this.props.useWindowKeyDown;window.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("touchmove",this.handleTouchMove),this.removeScreenChangeEvent(),this.removeResizeObserver(),this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null),this.transitionTimer&&window.clearTimeout(this.transitionTimer),e?window.removeEventListener("keydown",this.handleKeyDown):this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown)}},{key:"onSliding",value:function(){var e=this,t=this.state,n=t.currentIndex,i=t.isTransitioning,r=this.props,a=r.onSlide,s=r.slideDuration;this.transitionTimer=window.setTimeout((function(){i&&(e.setState({isTransitioning:!i,isSwipingThumbnail:!1}),a&&a(n))}),s+50)}},{key:"onThumbnailClick",value:function(e,t){var n=this.props.onThumbnailClick;e.target.parentNode.parentNode.blur(),this.slideToIndex(t,e),n&&n(e,t)}},{key:"onThumbnailMouseOver",value:function(e,t){var n=this;this.thumbnailMouseOverTimer&&(window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null),this.thumbnailMouseOverTimer=window.setTimeout((function(){n.slideToIndex(t),n.pause()}),300)}},{key:"onThumbnailMouseLeave",value:function(){if(this.thumbnailMouseOverTimer){var e=this.props.autoPlay;window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null,e&&this.play()}}},{key:"setThumbsTranslate",value:function(e){this.setState({thumbsTranslate:e})}},{key:"setModalFullscreen",value:function(e){var t=this.props.onScreenChange;this.setState({modalFullscreen:e}),t&&t(e)}},{key:"getThumbsTranslate",value:function(e){var t,n=this.props,i=n.disableThumbnailScroll,r=n.items,a=this.state,s=a.thumbnailsWrapperWidth,o=a.thumbnailsWrapperHeight,l=this.thumbnails&&this.thumbnails.current;if(i)return 0;if(l){if(this.isThumbnailVertical()){if(l.scrollHeight<=o)return 0;t=l.scrollHeight-o}else{if(l.scrollWidth<=s||s<=0)return 0;t=l.scrollWidth-s}return e*(t/(r.length-1))}return 0}},{key:"getAlignmentClassName",value:function(e){var t=this.state.currentIndex,n=this.props,i=n.infinite,r=n.items,a="",s="left",o="right";switch(e){case t-1:a=" ".concat(s);break;case t:a=" ".concat("center");break;case t+1:a=" ".concat(o)}return r.length>=3&&i&&(0===e&&t===r.length-1?a=" ".concat(o):e===r.length-1&&0===t&&(a=" ".concat(s))),a}},{key:"getTranslateXForTwoSlide",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.previousIndex,a=n!==r,s=0===e&&0===r,o=1===e&&1===r,l=0===e&&1===n,u=1===e&&0===n,c=0===i,h=-100*n+100*e+i;return i>0?this.direction="left":i<0&&(this.direction="right"),u&&i>0&&(h=-100+i),l&&i<0&&(h=100+i),a?s&&c&&"left"===this.direction?h=100:o&&c&&"right"===this.direction&&(h=-100):(u&&c&&"left"===this.direction&&(h=-100),l&&c&&"right"===this.direction&&(h=100)),h}},{key:"getThumbnailBarHeight",value:function(){return this.isThumbnailVertical()?{height:this.state.gallerySlideWrapperHeight}:{}}},{key:"getSlideStyle",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.slideStyle,a=this.props,s=a.infinite,o=a.items,l=a.useTranslate3D,u=a.isRTL,c=-100*n,h=o.length-1,d=(c+100*e)*(u?-1:1)+i;s&&o.length>2&&(0===n&&e===h?d=-100*(u?-1:1)+i:n===h&&0===e&&(d=100*(u?-1:1)+i)),s&&2===o.length&&(d=this.getTranslateXForTwoSlide(e));var f="translate(".concat(d,"%, 0)");return l&&(f="translate3d(".concat(d,"%, 0, 0)")),de({display:this.isSlideVisible(e)?"inherit":"none",WebkitTransform:f,MozTransform:f,msTransform:f,OTransform:f,transform:f},r)}},{key:"getCurrentIndex",value:function(){return this.state.currentIndex}},{key:"getThumbnailStyle",value:function(){var e,t=this.props,n=t.useTranslate3D,i=t.isRTL,r=this.state,a=r.thumbsTranslate,s=r.thumbsStyle,o=i?-1*a:a;return this.isThumbnailVertical()?(e="translate(0, ".concat(a,"px)"),n&&(e="translate3d(0, ".concat(a,"px, 0)"))):(e="translate(".concat(o,"px, 0)"),n&&(e="translate3d(".concat(o,"px, 0, 0)"))),de({WebkitTransform:e,MozTransform:e,msTransform:e,OTransform:e,transform:e},s)}},{key:"getSlideItems",value:function(){var e=this,n=this.state.currentIndex,i=this.props,r=i.items,s=i.slideOnThumbnailOver,o=i.onClick,l=i.lazyLoad,u=i.onTouchMove,c=i.onTouchEnd,h=i.onTouchStart,d=i.onMouseOver,f=i.onMouseLeave,p=i.renderItem,m=i.renderThumbInner,v=i.showThumbnails,g=i.showBullets,b=[],y=[],w=[];return r.forEach((function(i,r){var T=e.getAlignmentClassName(r),S=i.originalClass?" ".concat(i.originalClass):"",O=i.thumbnailClass?" ".concat(i.thumbnailClass):"",E=i.renderItem||p||e.renderItem,I=i.renderThumbInner||m||e.renderThumbInner,k=!l||T||e.lazyLoaded[r];k&&l&&!e.lazyLoaded[r]&&(e.lazyLoaded[r]=!0);var x=e.getSlideStyle(r),_=a().createElement("div",{"aria-label":"Go to Slide ".concat(r+1),key:"slide-".concat(r),tabIndex:"-1",className:"image-gallery-slide ".concat(T," ").concat(S),style:x,onClick:o,onKeyUp:e.handleSlideKeyUp,onTouchMove:u,onTouchEnd:c,onTouchStart:h,onMouseOver:d,onFocus:d,onMouseLeave:f,role:"button"},k?E(i):a().createElement("div",{style:{height:"100%"}}));if(b.push(_),v&&i.thumbnail){var L=t("image-gallery-thumbnail",O,{active:n===r});y.push(a().createElement("button",{key:"thumbnail-".concat(r),type:"button",tabIndex:"0","aria-pressed":n===r?"true":"false","aria-label":"Go to Slide ".concat(r+1),className:L,onMouseLeave:s?e.onThumbnailMouseLeave:null,onMouseOver:function(t){return e.handleThumbnailMouseOver(t,r)},onFocus:function(t){return e.handleThumbnailMouseOver(t,r)},onKeyUp:function(t){return e.handleThumbnailKeyUp(t,r)},onClick:function(t){return e.onThumbnailClick(t,r)}},I(i)))}if(g){var M=t("image-gallery-bullet",i.bulletClass,{active:n===r});w.push(a().createElement("button",{type:"button",key:"bullet-".concat(r),className:M,onClick:function(t){return i.bulletOnClick&&i.bulletOnClick({item:i,itemIndex:r,currentIndex:n}),t.target.blur(),e.slideToIndex.call(e,r,t)},"aria-pressed":n===r?"true":"false","aria-label":"Go to Slide ".concat(r+1)}))}})),{slides:b,thumbnails:y,bullets:w}}},{key:"ignoreIsTransitioning",value:function(){var e=this.props.items,t=this.state,n=t.previousIndex,i=t.currentIndex,r=e.length-1;return Math.abs(n-i)>1&&!(0===n&&i===r)&&!(n===r&&0===i)}},{key:"isFirstOrLastSlide",value:function(e){return e===this.props.items.length-1||0===e}},{key:"slideIsTransitioning",value:function(e){var t=this.state,n=t.isTransitioning,i=t.previousIndex,r=t.currentIndex;return n&&!(e===i||e===r)}},{key:"isSlideVisible",value:function(e){return!this.slideIsTransitioning(e)||this.ignoreIsTransitioning()&&!this.isFirstOrLastSlide(e)}},{key:"slideThumbnailBar",value:function(){var e=this.state,t=e.currentIndex,n=e.isSwipingThumbnail,i=-this.getThumbsTranslate(t);n||(0===t?this.setState({thumbsTranslate:0,thumbsSwipedTranslate:0}):this.setState({thumbsTranslate:i,thumbsSwipedTranslate:i}))}},{key:"canSlide",value:function(){return this.props.items.length>=2}},{key:"canSlideLeft",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t||(n?this.canSlideNext():this.canSlidePrevious())}},{key:"canSlideRight",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t||(n?this.canSlidePrevious():this.canSlideNext())}},{key:"canSlidePrevious",value:function(){return this.state.currentIndex>0}},{key:"canSlideNext",value:function(){return this.state.currentIndex<this.props.items.length-1}},{key:"handleSwiping",value:function(e){var t=e.event,n=e.absX,i=e.dir,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=this.state,l=o.galleryWidth,u=o.isTransitioning,c=o.scrollingUpDown,h=o.scrollingLeftRight;if(i!==ee.UP&&i!==ee.DOWN&&!c||h){if(i!==ee.LEFT&&i!==ee.RIGHT||h||this.setState({scrollingLeftRight:!0}),!a){var d=this.props.swipingTransitionDuration;if(s&&t.preventDefault(),u)this.setState({currentSlideOffset:0});else{var f=i===ee.RIGHT?1:-1,p=n/l*100;Math.abs(p)>=100&&(p=100);var m={transition:"transform ".concat(d,"ms ease-out")};this.setState({currentSlideOffset:f*p,slideStyle:m})}}}else c||this.setState({scrollingUpDown:!0})}},{key:"handleThumbnailSwiping",value:function(e){var t,n,i,r,a,s=e.event,o=e.absX,l=e.absY,u=e.dir,c=this.props,h=c.stopPropagation,d=c.swipingThumbnailTransitionDuration,f=this.state,p=f.thumbsSwipedTranslate,m=f.thumbnailsWrapperHeight,v=f.thumbnailsWrapperWidth,g=this.thumbnails&&this.thumbnails.current;if(this.isThumbnailVertical()?(t=p+(u===ee.DOWN?l:-l),n=g.scrollHeight-m+20,i=Math.abs(t)>n,r=t>20,a=g.scrollHeight<=m):(t=p+(u===ee.RIGHT?o:-o),n=g.scrollWidth-v+20,i=Math.abs(t)>n,r=t>20,a=g.scrollWidth<=v),!a&&(u!==ee.LEFT&&u!==ee.UP||!i)&&(u!==ee.RIGHT&&u!==ee.DOWN||!r)){h&&s.stopPropagation();var b={transition:"transform ".concat(d,"ms ease-out")};this.setState({thumbsTranslate:t,thumbsStyle:b})}}},{key:"handleOnThumbnailSwiped",value:function(){var e=this.state.thumbsTranslate,t=this.props.slideDuration;this.setState({isSwipingThumbnail:!0,thumbsSwipedTranslate:e,thumbsStyle:{transition:"all ".concat(t,"ms ease-out")}})}},{key:"sufficientSwipe",value:function(){var e=this.state.currentSlideOffset,t=this.props.swipeThreshold;return Math.abs(e)>t}},{key:"handleOnSwiped",value:function(e){var t=e.event,n=e.dir,i=e.velocity,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=r.flickThreshold,l=this.state,u=l.scrollingUpDown,c=l.scrollingLeftRight;if(!a){var h=this.props.isRTL;s&&t.stopPropagation(),u&&this.setState({scrollingUpDown:!1}),c&&this.setState({scrollingLeftRight:!1});var d=(n===ee.LEFT?1:-1)*(h?-1:1),f=n===ee.UP||n===ee.DOWN,p=i>o&&!f;this.handleOnSwipedTo(d,p)}}},{key:"handleOnSwipedTo",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=i;!this.sufficientSwipe()&&!t||r||(a+=e),(-1===e&&!this.canSlideLeft()||1===e&&!this.canSlideRight())&&(a=i),this.unthrottledSlideToIndex(a)}},{key:"handleTouchMove",value:function(e){this.state.scrollingLeftRight&&e.preventDefault()}},{key:"handleMouseDown",value:function(){this.imageGallery.current.classList.add("image-gallery-using-mouse")}},{key:"handleKeyDown",value:function(e){var t=this.props,n=t.disableKeyDown,i=t.useBrowserFullscreen,r=this.state.isFullscreen;if(this.imageGallery.current.classList.remove("image-gallery-using-mouse"),!n)switch(parseInt(e.keyCode||e.which||0,10)){case 37:this.canSlideLeft()&&!this.playPauseIntervalId&&this.slideLeft(e);break;case 39:this.canSlideRight()&&!this.playPauseIntervalId&&this.slideRight(e);break;case 27:r&&!i&&this.exitFullScreen()}}},{key:"handleImageError",value:function(e){var t=this.props.onErrorImageURL;t&&-1===e.target.src.indexOf(t)&&(e.target.src=t)}},{key:"removeResizeObserver",value:function(){this.resizeObserver&&this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&(this.resizeObserver.unobserve(this.imageGallerySlideWrapper.current),this.resizeObserver=null)}},{key:"handleResize",value:function(){var e=this.state.currentIndex;this.resizeObserver&&(this.imageGallery&&this.imageGallery.current&&this.setState({galleryWidth:this.imageGallery.current.offsetWidth}),this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&this.setState({gallerySlideWrapperHeight:this.imageGallerySlideWrapper.current.offsetHeight}),this.thumbnailsWrapper&&this.thumbnailsWrapper.current&&(this.isThumbnailVertical()?this.setState({thumbnailsWrapperHeight:this.thumbnailsWrapper.current.offsetHeight}):this.setState({thumbnailsWrapperWidth:this.thumbnailsWrapper.current.offsetWidth})),this.setThumbsTranslate(-this.getThumbsTranslate(e)))}},{key:"initResizeObserver",value:function(e){var t=this;this.resizeObserver=new Z(L((function(e){e&&e.forEach((function(){t.handleResize()}))}),300)),this.resizeObserver.observe(e.current)}},{key:"toggleFullScreen",value:function(){this.state.isFullscreen?this.exitFullScreen():this.fullScreen()}},{key:"togglePlay",value:function(){this.playPauseIntervalId?this.pause():this.play()}},{key:"handleScreenChange",value:function(){var e=this.props,t=e.onScreenChange,n=e.useBrowserFullscreen,i=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,r=this.imageGallery.current===i;t&&t(r),n&&this.setState({isFullscreen:r})}},{key:"slideToIndex",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=this.props,s=a.items,o=a.slideDuration,l=a.onBeforeSlide;if(!r){t&&this.playPauseIntervalId&&(this.pause(!1),this.play(!1));var u=s.length-1,c=e;e<0?c=u:e>u&&(c=0),l&&c!==i&&l(c),this.setState({previousIndex:i,currentIndex:c,isTransitioning:c!==i,currentSlideOffset:0,slideStyle:{transition:"all ".concat(o,"ms ease-out")}},this.onSliding)}}},{key:"slideLeft",value:function(e){this.props.isRTL?this.slideNext(e):this.slidePrevious(e)}},{key:"slideRight",value:function(e){this.props.isRTL?this.slidePrevious(e):this.slideNext(e)}},{key:"slidePrevious",value:function(e){var t=this,n=this.state,i=n.currentIndex,r=n.currentSlideOffset,a=n.isTransitioning,s=this.props.items,o=i-1;a||(2===s.length?this.setState({currentSlideOffset:r+.001,slideStyle:{transition:"none"}},(function(){window.setTimeout((function(){return t.slideToIndex(o,e)}),25)})):this.slideToIndex(o,e))}},{key:"slideNext",value:function(e){var t=this,n=this.state,i=n.currentIndex,r=n.currentSlideOffset,a=n.isTransitioning,s=this.props.items,o=i+1;a||(2===s.length?this.setState({currentSlideOffset:r-.001,slideStyle:{transition:"none"}},(function(){window.setTimeout((function(){return t.slideToIndex(o,e)}),25)})):this.slideToIndex(o,e))}},{key:"handleThumbnailMouseOver",value:function(e,t){this.props.slideOnThumbnailOver&&this.onThumbnailMouseOver(e,t)}},{key:"handleThumbnailKeyUp",value:function(e,t){Te(e)&&this.onThumbnailClick(e,t)}},{key:"handleSlideKeyUp",value:function(e){Te(e)&&(0,this.props.onClick)(e)}},{key:"isThumbnailVertical",value:function(){var e=this.props.thumbnailPosition;return"left"===e||"right"===e}},{key:"addScreenChangeEvent",value:function(){var e=this;ye.forEach((function(t){document.addEventListener(t,e.handleScreenChange)}))}},{key:"removeScreenChangeEvent",value:function(){var e=this;ye.forEach((function(t){document.removeEventListener(t,e.handleScreenChange)}))}},{key:"fullScreen",value:function(){var e=this.props.useBrowserFullscreen,t=this.imageGallery.current;e?t.requestFullscreen?t.requestFullscreen():t.msRequestFullscreen?t.msRequestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():this.setModalFullscreen(!0):this.setModalFullscreen(!0),this.setState({isFullscreen:!0})}},{key:"exitFullScreen",value:function(){var e=this.state.isFullscreen,t=this.props.useBrowserFullscreen;e&&(t?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen?document.msExitFullscreen():this.setModalFullscreen(!1):this.setModalFullscreen(!1),this.setState({isFullscreen:!1}))}},{key:"pauseOrPlay",value:function(){var e=this.props.infinite,t=this.state.currentIndex;e||this.canSlideRight()?this.slideToIndex(t+1):this.pause()}},{key:"play",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this.props,n=t.onPlay,i=t.slideInterval,r=t.slideDuration,a=this.state.currentIndex;this.playPauseIntervalId||(this.setState({isPlaying:!0}),this.playPauseIntervalId=window.setInterval(this.pauseOrPlay,Math.max(i,r)),n&&e&&n(a))}},{key:"pause",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this.props.onPause,n=this.state.currentIndex;this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null,this.setState({isPlaying:!1}),t&&e&&t(n))}},{key:"isImageLoaded",value:function(e){return!!this.loadedImages[e.original]||(this.loadedImages[e.original]=!0,!1)}},{key:"handleImageLoaded",value:function(e,t){var n=this.props.onImageLoad;!this.loadedImages[t]&&n&&(this.loadedImages[t]=!0,n(e))}},{key:"renderItem",value:function(e){var t=this.state.isFullscreen,n=this.props.onImageError||this.handleImageError;return a().createElement(se,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:this.handleImageLoaded,isFullscreen:t,onImageError:n,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalWidth:e.originalWidth,originalTitle:e.originalTitle,sizes:e.sizes,srcSet:e.srcSet})}},{key:"renderThumbInner",value:function(e){var t=this.props.onThumbnailError||this.handleImageError;return a().createElement("span",{className:"image-gallery-thumbnail-inner"},a().createElement("img",{className:"image-gallery-thumbnail-image",src:e.thumbnail,height:e.thumbnailHeight,width:e.thumbnailWidth,alt:e.thumbnailAlt,title:e.thumbnailTitle,onError:t}),e.thumbnailLabel&&a().createElement("div",{className:"image-gallery-thumbnail-label"},e.thumbnailLabel))}},{key:"render",value:function(){var e=this.state,n=e.currentIndex,i=e.isFullscreen,r=e.modalFullscreen,s=e.isPlaying,o=this.props,l=o.additionalClass,u=o.disableThumbnailSwipe,c=o.indexSeparator,h=o.isRTL,d=o.items,f=o.thumbnailPosition,p=o.renderFullscreenButton,m=o.renderCustomControls,v=o.renderLeftNav,g=o.renderRightNav,b=o.showBullets,y=o.showFullscreenButton,w=o.showIndex,T=o.showThumbnails,S=o.showNav,O=o.showPlayButton,E=o.renderPlayPauseButton,I=this.getThumbnailStyle(),k=this.getSlideItems(),x=k.slides,_=k.thumbnails,L=k.bullets,M=t("image-gallery-slide-wrapper",f,{"image-gallery-rtl":h}),P=a().createElement("div",{ref:this.imageGallerySlideWrapper,className:M},m&&m(),this.canSlide()?a().createElement(a().Fragment,null,S&&a().createElement(a().Fragment,null,v(this.slideLeft,!this.canSlideLeft()),g(this.slideRight,!this.canSlideRight())),a().createElement(ue,{className:"image-gallery-swipe",delta:0,onSwiping:this.handleSwiping,onSwiped:this.handleOnSwiped},a().createElement("div",{className:"image-gallery-slides"},x))):a().createElement("div",{className:"image-gallery-slides"},x),O&&E(this.togglePlay,s),b&&a().createElement("div",{className:"image-gallery-bullets"},a().createElement("div",{className:"image-gallery-bullets-container",role:"navigation","aria-label":"Bullet Navigation"},L)),y&&p(this.toggleFullScreen,i),w&&a().createElement("div",{className:"image-gallery-index"},a().createElement("span",{className:"image-gallery-index-current"},n+1),a().createElement("span",{className:"image-gallery-index-separator"},c),a().createElement("span",{className:"image-gallery-index-total"},d.length))),R=t("image-gallery",l,{"fullscreen-modal":r}),D=t("image-gallery-content",f,{fullscreen:i}),F=t("image-gallery-thumbnails-wrapper",f,{"thumbnails-wrapper-rtl":!this.isThumbnailVertical()&&h},{"thumbnails-swipe-horizontal":!this.isThumbnailVertical()&&!u},{"thumbnails-swipe-vertical":this.isThumbnailVertical()&&!u});return a().createElement("div",{ref:this.imageGallery,className:R,"aria-live":"polite"},a().createElement("div",{className:D},("bottom"===f||"right"===f)&&P,T&&_.length>0?a().createElement(ue,{className:F,delta:0,onSwiping:!u&&this.handleThumbnailSwiping,onSwiped:!u&&this.handleOnThumbnailSwiped},a().createElement("div",{className:"image-gallery-thumbnails",ref:this.thumbnailsWrapper,style:this.getThumbnailBarHeight()},a().createElement("div",{ref:this.thumbnails,className:"image-gallery-thumbnails-container",style:I,"aria-label":"Thumbnail Navigation"},_))):null,("top"===f||"left"===f)&&P))}}])&&pe(n.prototype,i),l}(a().Component);Se.propTypes={flickThreshold:te.number,items:(0,te.arrayOf)((0,te.shape)({bulletClass:te.string,bulletOnClick:te.func,description:te.string,original:te.string,originalHeight:te.number,originalWidth:te.number,thumbnailHeight:te.number,thumbnailWidth:te.number,fullscreen:te.string,originalAlt:te.string,originalTitle:te.string,thumbnail:te.string,thumbnailAlt:te.string,thumbnailLabel:te.string,thumbnailTitle:te.string,originalClass:te.string,thumbnailClass:te.string,renderItem:te.func,renderThumbInner:te.func,imageSet:we,srcSet:te.string,sizes:te.string})).isRequired,showNav:te.bool,autoPlay:te.bool,lazyLoad:te.bool,infinite:te.bool,showIndex:te.bool,showBullets:te.bool,showThumbnails:te.bool,showPlayButton:te.bool,showFullscreenButton:te.bool,disableThumbnailScroll:te.bool,disableKeyDown:te.bool,disableSwipe:te.bool,disableThumbnailSwipe:te.bool,useBrowserFullscreen:te.bool,onErrorImageURL:te.string,indexSeparator:te.string,thumbnailPosition:(0,te.oneOf)(["top","bottom","left","right"]),startIndex:te.number,slideDuration:te.number,slideInterval:te.number,slideOnThumbnailOver:te.bool,swipeThreshold:te.number,swipingTransitionDuration:te.number,swipingThumbnailTransitionDuration:te.number,onSlide:te.func,onBeforeSlide:te.func,onScreenChange:te.func,onPause:te.func,onPlay:te.func,onClick:te.func,onImageLoad:te.func,onImageError:te.func,onTouchMove:te.func,onTouchEnd:te.func,onTouchStart:te.func,onMouseOver:te.func,onMouseLeave:te.func,onThumbnailError:te.func,onThumbnailClick:te.func,renderCustomControls:te.func,renderLeftNav:te.func,renderRightNav:te.func,renderPlayPauseButton:te.func,renderFullscreenButton:te.func,renderItem:te.func,renderThumbInner:te.func,stopPropagation:te.bool,additionalClass:te.string,useTranslate3D:te.bool,isRTL:te.bool,useWindowKeyDown:te.bool},Se.defaultProps={onErrorImageURL:"",additionalClass:"",showNav:!0,autoPlay:!1,lazyLoad:!1,infinite:!0,showIndex:!1,showBullets:!1,showThumbnails:!0,showPlayButton:!0,showFullscreenButton:!0,disableThumbnailScroll:!1,disableKeyDown:!1,disableSwipe:!1,disableThumbnailSwipe:!1,useTranslate3D:!0,isRTL:!1,useBrowserFullscreen:!0,flickThreshold:.4,stopPropagation:!1,indexSeparator:" / ",thumbnailPosition:"bottom",startIndex:0,slideDuration:450,swipingTransitionDuration:0,swipingThumbnailTransitionDuration:0,onSlide:null,onBeforeSlide:null,onScreenChange:null,onPause:null,onPlay:null,onClick:null,onImageLoad:null,onImageError:null,onTouchMove:null,onTouchEnd:null,onTouchStart:null,onMouseOver:null,onMouseLeave:null,onThumbnailError:null,onThumbnailClick:null,renderCustomControls:null,renderThumbInner:null,renderItem:null,slideInterval:3e3,slideOnThumbnailOver:!1,swipeThreshold:30,renderLeftNav:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-left-nav",disabled:t,onClick:e,"aria-label":"Previous Slide"},a().createElement(re,{icon:"left",viewBox:"6 0 12 24"}))},renderRightNav:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-right-nav",disabled:t,onClick:e,"aria-label":"Next Slide"},a().createElement(re,{icon:"right",viewBox:"6 0 12 24"}))},renderPlayPauseButton:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-play-button",onClick:e,"aria-label":"Play or Pause Slideshow"},a().createElement(re,{strokeWidth:2,icon:t?"pause":"play"}))},renderFullscreenButton:function(e,t){return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-fullscreen-button",onClick:e,"aria-label":"Open Fullscreen"},a().createElement(re,{strokeWidth:2,icon:t?"minimize":"maximize"}))},useWindowKeyDown:!0};const Oe=Se})(),r})()}));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ImageGallery=t(require("react")):e.ImageGallery=t(e.React)}(this,(function(e){return(()=>{var t={703:(e,t,n)=>{"use strict";var i=n(414);function r(){}function a(){}a.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,a,s){if(s!==i){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:r};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},590:e=>{var t="undefined"!=typeof Element,n="function"==typeof Map,i="function"==typeof Set,r="function"==typeof ArrayBuffer&&!!ArrayBuffer.isView;function a(e,s){if(e===s)return!0;if(e&&s&&"object"==typeof e&&"object"==typeof s){if(e.constructor!==s.constructor)return!1;var o,l,u,c;if(Array.isArray(e)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(!a(e[l],s[l]))return!1;return!0}if(n&&e instanceof Map&&s instanceof Map){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;for(c=e.entries();!(l=c.next()).done;)if(!a(l.value[1],s.get(l.value[0])))return!1;return!0}if(i&&e instanceof Set&&s instanceof Set){if(e.size!==s.size)return!1;for(c=e.entries();!(l=c.next()).done;)if(!s.has(l.value[0]))return!1;return!0}if(r&&ArrayBuffer.isView(e)&&ArrayBuffer.isView(s)){if((o=e.length)!=s.length)return!1;for(l=o;0!=l--;)if(e[l]!==s[l])return!1;return!0}if(e.constructor===RegExp)return e.source===s.source&&e.flags===s.flags;if(e.valueOf!==Object.prototype.valueOf)return e.valueOf()===s.valueOf();if(e.toString!==Object.prototype.toString)return e.toString()===s.toString();if((o=(u=Object.keys(e)).length)!==Object.keys(s).length)return!1;for(l=o;0!=l--;)if(!Object.prototype.hasOwnProperty.call(s,u[l]))return!1;if(t&&e instanceof Element)return!1;for(l=o;0!=l--;)if(("_owner"!==u[l]&&"__v"!==u[l]&&"__o"!==u[l]||!e.$$typeof)&&!a(e[u[l]],s[u[l]]))return!1;return!0}return e!=e&&s!=s}e.exports=function(e,t){try{return a(e,t)}catch(e){if((e.message||"").match(/stack|recursion/i))return console.warn("react-fast-compare cannot handle circular refs"),!1;throw e}}},37:function(e,t,n){!function(e,t){function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var i="Left",r="Right",a="Down",s={delta:10,preventDefaultTouchmoveEvent:!1,rotationAngle:0,trackMouse:!1,trackTouch:!0},o={first:!0,initial:[0,0],start:0,swiping:!1,xy:[0,0]},l="mousemove",u="mouseup";function c(e,t){if(0===t)return e;var n=Math.PI/180*t;return[e[0]*Math.cos(n)+e[1]*Math.sin(n),e[1]*Math.cos(n)-e[0]*Math.sin(n)]}function h(e,t){var s=function(t){t&&"touches"in t&&t.touches.length>1||e((function(e,i){i.trackMouse&&(document.addEventListener(l,h),document.addEventListener(u,f));var r="touches"in t?t.touches[0]:t,a=c([r.clientX,r.clientY],i.rotationAngle);return n({},e,o,{initial:[].concat(a),xy:a,start:t.timeStamp||0})}))},h=function(t){e((function(e,s){if("touches"in t&&t.touches.length>1)return e;var o="touches"in t?t.touches[0]:t,l=c([o.clientX,o.clientY],s.rotationAngle),u=l[0],h=l[1],d=u-e.xy[0],f=h-e.xy[1],p=Math.abs(d),m=Math.abs(f),g=(t.timeStamp||0)-e.start,v=Math.sqrt(p*p+m*m)/(g||1),b=[d/(g||1),f/(g||1)];if(p<s.delta&&m<s.delta&&!e.swiping)return e;var y=function(e,t,n,s){return e>t?n>0?r:i:s>0?a:"Up"}(p,m,d,f),w={absX:p,absY:m,deltaX:d,deltaY:f,dir:y,event:t,first:e.first,initial:e.initial,velocity:v,vxvy:b};s.onSwiping&&s.onSwiping(w);var T=!1;return(s.onSwiping||s.onSwiped||"onSwiped"+y in s)&&(T=!0),T&&s.preventDefaultTouchmoveEvent&&s.trackTouch&&t.cancelable&&t.preventDefault(),n({},e,{first:!1,eventData:w,swiping:!0})}))},d=function(t){e((function(e,i){var r;if(e.swiping&&e.eventData){r=n({},e.eventData,{event:t}),i.onSwiped&&i.onSwiped(r);var a="onSwiped"+r.dir;a in i&&i[a](r)}else i.onTap&&i.onTap({event:t});return n({},e,o,{eventData:r})}))},f=function(e){document.removeEventListener(l,h),document.removeEventListener(u,f),d(e)},p=function(e,t){var n=function(){};if(e&&e.addEventListener){var i=[["touchstart",s],["touchmove",h],["touchend",d]];i.forEach((function(n){var i=n[0],r=n[1];return e.addEventListener(i,r,{passive:t})})),n=function(){return i.forEach((function(t){var n=t[0],i=t[1];return e.removeEventListener(n,i)}))}}return n},m={ref:function(t){null!==t&&e((function(e,i){if(e.el===t)return e;var r={};return e.el&&e.el!==t&&e.cleanUpTouch&&(e.cleanUpTouch(),r.cleanUpTouch=void 0),i.trackTouch&&t&&(r.cleanUpTouch=p(t,!i.preventDefaultTouchmoveEvent)),n({},e,{el:t},r)}))}};return t.trackMouse&&(m.onMouseDown=s),[m,p]}e.DOWN=a,e.LEFT=i,e.RIGHT=r,e.UP="Up",e.useSwipeable=function(e){var i=e.trackMouse,r=t.useRef(n({},o)),a=t.useRef(n({},s));a.current=n({},s,e);var l=t.useMemo((function(){return h((function(e){return r.current=e(r.current,a.current)}),{trackMouse:i})}),[i]),u=l[0],c=l[1];return r.current=function(e,t,i){var r={};return!t.trackTouch&&e.cleanUpTouch?(e.cleanUpTouch(),r.cleanUpTouch=void 0):t.trackTouch&&!e.cleanUpTouch&&e.el&&(r.cleanUpTouch=i(e.el,!t.preventDefaultTouchmoveEvent)),n({},e,r)}(r.current,a.current,c),u}}(t,n(888))},888:t=>{"use strict";t.exports=e}},n={};function i(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,i),a.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{"use strict";function e(t){var n,i,r="";if("string"==typeof t||"number"==typeof t)r+=t;else if("object"==typeof t)if(Array.isArray(t))for(n=0;n<t.length;n++)t[n]&&(i=e(t[n]))&&(r&&(r+=" "),r+=i);else for(n in t)t[n]&&(r&&(r+=" "),r+=n);return r}function t(){for(var t,n,i=0,r="";i<arguments.length;)(t=arguments[i++])&&(n=e(t))&&(r&&(r+=" "),r+=n);return r}i.r(r),i.d(r,{default:()=>Me});var n=i(888),a=i.n(n);const s=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)},o="object"==typeof global&&global&&global.Object===Object&&global;var l="object"==typeof self&&self&&self.Object===Object&&self;const u=o||l||Function("return this")(),c=function(){return u.Date.now()};var h=/\s/;var d=/^\s+/;const f=function(e){return e?e.slice(0,function(e){for(var t=e.length;t--&&h.test(e.charAt(t)););return t}(e)+1).replace(d,""):e},p=u.Symbol;var m=Object.prototype,g=m.hasOwnProperty,v=m.toString,b=p?p.toStringTag:void 0;var y=Object.prototype.toString;var w=p?p.toStringTag:void 0;const T=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":w&&w in Object(e)?function(e){var t=g.call(e,b),n=e[b];try{e[b]=void 0;var i=!0}catch(e){}var r=v.call(e);return i&&(t?e[b]=n:delete e[b]),r}(e):function(e){return y.call(e)}(e)};var S=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,E=/^0o[0-7]+$/i,I=parseInt;const k=function(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return null!=e&&"object"==typeof e}(e)&&"[object Symbol]"==T(e)}(e))return NaN;if(s(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=s(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=f(e);var n=O.test(e);return n||E.test(e)?I(e.slice(2),n?2:8):S.test(e)?NaN:+e};var x=Math.max,_=Math.min;const L=function(e,t,n){var i,r,a,o,l,u,h=0,d=!1,f=!1,p=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var n=i,a=r;return i=r=void 0,h=t,o=e.apply(a,n)}function g(e){return h=e,l=setTimeout(b,t),d?m(e):o}function v(e){var n=e-u;return void 0===u||n>=t||n<0||f&&e-h>=a}function b(){var e=c();if(v(e))return y(e);l=setTimeout(b,function(e){var n=t-(e-u);return f?_(n,a-(e-h)):n}(e))}function y(e){return l=void 0,p&&i?m(e):(i=r=void 0,o)}function w(){var e=c(),n=v(e);if(i=arguments,r=this,u=e,n){if(void 0===l)return g(u);if(f)return clearTimeout(l),l=setTimeout(b,t),m(u)}return void 0===l&&(l=setTimeout(b,t)),o}return t=k(t)||0,s(n)&&(d=!!n.leading,a=(f="maxWait"in n)?x(k(n.maxWait)||0,t):a,p="trailing"in n?!!n.trailing:p),w.cancel=function(){void 0!==l&&clearTimeout(l),h=0,i=u=r=l=void 0},w.flush=function(){return void 0===l?o:y(c())},w},P=function(e,t,n){var i=!0,r=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return s(n)&&(i="leading"in n?!!n.leading:i,r="trailing"in n?!!n.trailing:r),L(e,t,{leading:i,maxWait:t,trailing:r})};var M=i(590),R=i.n(M),D=function(){if("undefined"!=typeof Map)return Map;function e(e,t){var n=-1;return e.some((function(e,i){return e[0]===t&&(n=i,!0)})),n}return function(){function t(){this.__entries__=[]}return Object.defineProperty(t.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),t.prototype.get=function(t){var n=e(this.__entries__,t),i=this.__entries__[n];return i&&i[1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t.prototype.clear=function(){this.__entries__.splice(0)},t.prototype.forEach=function(e,t){void 0===t&&(t=null);for(var n=0,i=this.__entries__;n<i.length;n++){var r=i[n];e.call(t,r[1],r[0])}},t}()}(),F="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,C=void 0!==i.g&&i.g.Math===Math?i.g:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),W="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(C):function(e){return setTimeout((function(){return e(Date.now())}),1e3/60)},N=["top","right","bottom","left","width","height","size","weight"],j="undefined"!=typeof MutationObserver,z=function(){function e(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e,t){var n=!1,i=!1,r=0;function a(){n&&(n=!1,e()),i&&o()}function s(){W(a)}function o(){var e=Date.now();if(n){if(e-r<2)return;i=!0}else n=!0,i=!1,setTimeout(s,20);r=e}return o}(this.refresh.bind(this))}return e.prototype.addObserver=function(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()},e.prototype.removeObserver=function(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()},e.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},e.prototype.updateObservers_=function(){var e=this.observers_.filter((function(e){return e.gatherActive(),e.hasActive()}));return e.forEach((function(e){return e.broadcastActive()})),e.length>0},e.prototype.connect_=function(){F&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),j?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},e.prototype.disconnect_=function(){F&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},e.prototype.onTransitionEnd_=function(e){var t=e.propertyName,n=void 0===t?"":t;N.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()},e.getInstance=function(){return this.instance_||(this.instance_=new e),this.instance_},e.instance_=null,e}(),B=function(e,t){for(var n=0,i=Object.keys(t);n<i.length;n++){var r=i[n];Object.defineProperty(e,r,{value:t[r],enumerable:!1,writable:!1,configurable:!0})}return e},A=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||C},G=V(0,0,0,0);function U(e){return parseFloat(e)||0}function H(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+U(e["border-"+n+"-width"])}),0)}var q="undefined"!=typeof SVGGraphicsElement?function(e){return e instanceof A(e).SVGGraphicsElement}:function(e){return e instanceof A(e).SVGElement&&"function"==typeof e.getBBox};function K(e){return F?q(e)?function(e){var t=e.getBBox();return V(0,0,t.width,t.height)}(e):function(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return G;var i=A(e).getComputedStyle(e),r=function(e){for(var t={},n=0,i=["top","right","bottom","left"];n<i.length;n++){var r=i[n],a=e["padding-"+r];t[r]=U(a)}return t}(i),a=r.left+r.right,s=r.top+r.bottom,o=U(i.width),l=U(i.height);if("border-box"===i.boxSizing&&(Math.round(o+a)!==t&&(o-=H(i,"left","right")+a),Math.round(l+s)!==n&&(l-=H(i,"top","bottom")+s)),!function(e){return e===A(e).document.documentElement}(e)){var u=Math.round(o+a)-t,c=Math.round(l+s)-n;1!==Math.abs(u)&&(o-=u),1!==Math.abs(c)&&(l-=c)}return V(r.left,r.top,o,l)}(e):G}function V(e,t,n,i){return{x:e,y:t,width:n,height:i}}var X=function(){function e(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=V(0,0,0,0),this.target=e}return e.prototype.isActive=function(){var e=K(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e.prototype.broadcastRect=function(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e}(),Y=function(e,t){var n,i,r,a,s,o,l,u=(i=(n=t).x,r=n.y,a=n.width,s=n.height,o="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,l=Object.create(o.prototype),B(l,{x:i,y:r,width:a,height:s,top:r,right:i+a,bottom:s+r,left:i}),l);B(this,{target:e,contentRect:u})},$=function(){function e(e,t,n){if(this.activeObservations_=[],this.observations_=new D,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=n}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof A(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new X(e)),this.controller_.addObserver(this),this.controller_.refresh())}},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof A(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}},e.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},e.prototype.gatherActive=function(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map((function(e){return new Y(e.target,e.broadcastRect())}));this.callback_.call(e,t,e),this.clearActive()}},e.prototype.clearActive=function(){this.activeObservations_.splice(0)},e.prototype.hasActive=function(){return this.activeObservations_.length>0},e}(),J="undefined"!=typeof WeakMap?new WeakMap:new D,Q=function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=z.getInstance(),i=new $(t,n,this);J.set(this,i)};["observe","unobserve","disconnect"].forEach((function(e){Q.prototype[e]=function(){var t;return(t=J.get(this))[e].apply(t,arguments)}}));const Z=void 0!==C.ResizeObserver?C.ResizeObserver:Q;var ee=i(37),te=i(697),ne=a().memo((function(e){var t=e.description,n=e.fullscreen,i=e.handleImageLoaded,r=e.isFullscreen,s=e.onImageError,o=e.original,l=e.originalAlt,u=e.originalHeight,c=e.originalWidth,h=e.originalTitle,d=e.sizes,f=e.srcSet,p=e.loading,m=r&&n||o;return a().createElement(a().Fragment,null,a().createElement("img",{className:"image-gallery-image",src:m,alt:l,srcSet:f,height:u,width:c,sizes:d,title:h,onLoad:function(e){return i(e,o)},onError:s,loading:p}),t&&a().createElement("span",{className:"image-gallery-description"},t))}));ne.displayName="Item",ne.propTypes={description:te.string,fullscreen:te.string,handleImageLoaded:te.func.isRequired,isFullscreen:te.bool,onImageError:te.func.isRequired,original:te.string.isRequired,originalAlt:te.string,originalHeight:te.string,originalWidth:te.string,originalTitle:te.string,sizes:te.string,srcSet:te.string,loading:te.string},ne.defaultProps={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"};const ie=ne;var re={left:a().createElement("polyline",{points:"15 18 9 12 15 6"}),right:a().createElement("polyline",{points:"9 18 15 12 9 6"}),maximize:a().createElement("path",{d:"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"}),minimize:a().createElement("path",{d:"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"}),play:a().createElement("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:a().createElement(a().Fragment,null,a().createElement("rect",{x:"6",y:"4",width:"4",height:"16"}),a().createElement("rect",{x:"14",y:"4",width:"4",height:"16"}))},ae=function(e){var t=e.strokeWidth,n=e.viewBox,i=e.icon;return a().createElement("svg",{className:"image-gallery-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:n,fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round"},re[i])};ae.propTypes={strokeWidth:te.number,viewBox:te.string,icon:(0,te.oneOf)(["left","right","maximize","minimize","play","pause"]).isRequired},ae.defaultProps={strokeWidth:1,viewBox:"0 0 24 24"};const se=ae;var oe=a().memo((function(e){var t=e.isFullscreen,n=e.onClick;return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-fullscreen-button",onClick:n,"aria-label":"Open Fullscreen"},a().createElement(se,{strokeWidth:2,icon:t?"minimize":"maximize"}))}));oe.displayName="Fullscreen",oe.propTypes={isFullscreen:te.bool.isRequired,onClick:te.func.isRequired};const le=oe;var ue=a().memo((function(e){var t=e.disabled,n=e.onClick;return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-left-nav",disabled:t,onClick:n,"aria-label":"Previous Slide"},a().createElement(se,{icon:"left",viewBox:"6 0 12 24"}))}));ue.displayName="LeftNav",ue.propTypes={disabled:te.bool.isRequired,onClick:te.func.isRequired};const ce=ue;var he=a().memo((function(e){var t=e.disabled,n=e.onClick;return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-right-nav",disabled:t,onClick:n,"aria-label":"Next Slide"},a().createElement(se,{icon:"right",viewBox:"6 0 12 24"}))}));he.displayName="RightNav",he.propTypes={disabled:te.bool.isRequired,onClick:te.func.isRequired};const de=he;var fe=a().memo((function(e){var t=e.isPlaying,n=e.onClick;return a().createElement("button",{type:"button",className:"image-gallery-icon image-gallery-play-button",onClick:n,"aria-label":"Play or Pause Slideshow"},a().createElement(se,{strokeWidth:2,icon:t?"pause":"play"}))}));fe.displayName="PlayPause",fe.propTypes={isPlaying:te.bool.isRequired,onClick:te.func.isRequired};const pe=fe;function me(){return(me=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var ge=function(e){var t=e.children,n=e.className,i=e.delta,r=e.onSwiping,s=e.onSwiped,o=(0,ee.useSwipeable)({delta:i,onSwiping:r,onSwiped:s});return a().createElement("div",me({},o,{className:n}),t)};ge.propTypes={children:te.node.isRequired,className:te.string,delta:te.number,onSwiped:te.func,onSwiping:te.func},ge.defaultProps={className:"",delta:0,onSwiping:function(){},onSwiped:function(){}};const ve=ge;function be(e){return(be="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function ye(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function we(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ye(Object(n),!0).forEach((function(t){Te(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ye(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function Te(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Se(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function Oe(e,t){return(Oe=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Ee(e,t){return!t||"object"!==be(t)&&"function"!=typeof t?Ie(e):t}function Ie(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function ke(e){return(ke=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var xe=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"],_e=(0,te.arrayOf)((0,te.shape)({srcSet:te.string,media:te.string}));function Le(e){var t=parseInt(e.keyCode||e.which||0,10);return 66===t||62===t}var Pe=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&Oe(e,t)}(l,e);var n,i,r,s,o=(r=l,s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=ke(r);if(s){var n=ke(this).constructor;e=Reflect.construct(t,arguments,n)}else e=t.apply(this,arguments);return Ee(this,e)});function l(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(t=o.call(this,e)).state={currentIndex:e.startIndex,thumbsTranslate:0,thumbsSwipedTranslate:0,currentSlideOffset:0,galleryWidth:0,thumbnailsWrapperWidth:0,thumbnailsWrapperHeight:0,thumbsStyle:{transition:"all ".concat(e.slideDuration,"ms ease-out")},isFullscreen:!1,isSwipingThumbnail:!1,isPlaying:!1},t.loadedImages={},t.imageGallery=a().createRef(),t.thumbnailsWrapper=a().createRef(),t.thumbnails=a().createRef(),t.imageGallerySlideWrapper=a().createRef(),t.handleImageLoaded=t.handleImageLoaded.bind(Ie(t)),t.handleKeyDown=t.handleKeyDown.bind(Ie(t)),t.handleMouseDown=t.handleMouseDown.bind(Ie(t)),t.handleTouchMove=t.handleTouchMove.bind(Ie(t)),t.handleOnSwiped=t.handleOnSwiped.bind(Ie(t)),t.handleScreenChange=t.handleScreenChange.bind(Ie(t)),t.handleSwiping=t.handleSwiping.bind(Ie(t)),t.handleThumbnailSwiping=t.handleThumbnailSwiping.bind(Ie(t)),t.handleOnThumbnailSwiped=t.handleOnThumbnailSwiped.bind(Ie(t)),t.onThumbnailMouseLeave=t.onThumbnailMouseLeave.bind(Ie(t)),t.handleImageError=t.handleImageError.bind(Ie(t)),t.pauseOrPlay=t.pauseOrPlay.bind(Ie(t)),t.renderThumbInner=t.renderThumbInner.bind(Ie(t)),t.renderItem=t.renderItem.bind(Ie(t)),t.slideLeft=t.slideLeft.bind(Ie(t)),t.slideRight=t.slideRight.bind(Ie(t)),t.toggleFullScreen=t.toggleFullScreen.bind(Ie(t)),t.togglePlay=t.togglePlay.bind(Ie(t)),t.unthrottledSlideToIndex=t.slideToIndex,t.slideToIndex=P(t.unthrottledSlideToIndex,e.slideDuration,{trailing:!1}),e.lazyLoad&&(t.lazyLoaded=[]),t}return n=l,(i=[{key:"componentDidMount",value:function(){var e=this.props,t=e.autoPlay,n=e.useWindowKeyDown;t&&this.play(),n?window.addEventListener("keydown",this.handleKeyDown):this.imageGallery.current.addEventListener("keydown",this.handleKeyDown),window.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("touchmove",this.handleTouchMove,{passive:!1}),this.initResizeObserver(this.imageGallerySlideWrapper),this.addScreenChangeEvent()}},{key:"componentDidUpdate",value:function(e,t){var n=this.props,i=n.items,r=n.lazyLoad,a=n.slideDuration,s=n.slideInterval,o=n.startIndex,l=n.thumbnailPosition,u=n.showThumbnails,c=n.useWindowKeyDown,h=this.state,d=h.currentIndex,f=h.isPlaying,p=e.items.length!==i.length,m=!R()(e.items,i),g=e.startIndex!==o,v=e.thumbnailPosition!==l,b=e.showThumbnails!==u;s===e.slideInterval&&a===e.slideDuration||f&&(this.pause(),this.play()),v&&(this.removeResizeObserver(),this.initResizeObserver(this.imageGallerySlideWrapper)),(p||b)&&this.handleResize(),t.currentIndex!==d&&this.slideThumbnailBar(),e.slideDuration!==a&&(this.slideToIndex=P(this.unthrottledSlideToIndex,a,{trailing:!1})),!r||e.lazyLoad&&!m||(this.lazyLoaded=[]),c!==e.useWindowKeyDown&&(c?(this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown),window.addEventListener("keydown",this.handleKeyDown)):(window.removeEventListener("keydown",this.handleKeyDown),this.imageGallery.current.addEventListener("keydown",this.handleKeyDown))),(g||m)&&this.setState({currentIndex:o,slideStyle:{transition:"none"}})}},{key:"componentWillUnmount",value:function(){var e=this.props.useWindowKeyDown;window.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("touchmove",this.handleTouchMove),this.removeScreenChangeEvent(),this.removeResizeObserver(),this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null),this.transitionTimer&&window.clearTimeout(this.transitionTimer),e?window.removeEventListener("keydown",this.handleKeyDown):this.imageGallery.current.removeEventListener("keydown",this.handleKeyDown)}},{key:"onSliding",value:function(){var e=this,t=this.state,n=t.currentIndex,i=t.isTransitioning,r=this.props,a=r.onSlide,s=r.slideDuration;this.transitionTimer=window.setTimeout((function(){i&&(e.setState({isTransitioning:!i,isSwipingThumbnail:!1}),a&&a(n))}),s+50)}},{key:"onThumbnailClick",value:function(e,t){var n=this.props.onThumbnailClick;e.target.parentNode.parentNode.blur(),this.slideToIndex(t,e),n&&n(e,t)}},{key:"onThumbnailMouseOver",value:function(e,t){var n=this;this.thumbnailMouseOverTimer&&(window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null),this.thumbnailMouseOverTimer=window.setTimeout((function(){n.slideToIndex(t),n.pause()}),300)}},{key:"onThumbnailMouseLeave",value:function(){if(this.thumbnailMouseOverTimer){var e=this.props.autoPlay;window.clearTimeout(this.thumbnailMouseOverTimer),this.thumbnailMouseOverTimer=null,e&&this.play()}}},{key:"setThumbsTranslate",value:function(e){this.setState({thumbsTranslate:e})}},{key:"setModalFullscreen",value:function(e){var t=this.props.onScreenChange;this.setState({modalFullscreen:e}),t&&t(e)}},{key:"getThumbsTranslate",value:function(e){var t,n=this.props,i=n.disableThumbnailScroll,r=n.items,a=this.state,s=a.thumbnailsWrapperWidth,o=a.thumbnailsWrapperHeight,l=this.thumbnails&&this.thumbnails.current;if(i)return 0;if(l){if(this.isThumbnailVertical()){if(l.scrollHeight<=o)return 0;t=l.scrollHeight-o}else{if(l.scrollWidth<=s||s<=0)return 0;t=l.scrollWidth-s}return e*(t/(r.length-1))}return 0}},{key:"getAlignmentClassName",value:function(e){var t=this.state.currentIndex,n=this.props,i=n.infinite,r=n.items,a="",s="left",o="right";switch(e){case t-1:a=" ".concat(s);break;case t:a=" ".concat("center");break;case t+1:a=" ".concat(o)}return r.length>=3&&i&&(0===e&&t===r.length-1?a=" ".concat(o):e===r.length-1&&0===t&&(a=" ".concat(s))),a}},{key:"getTranslateXForTwoSlide",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.previousIndex,a=n!==r,s=0===e&&0===r,o=1===e&&1===r,l=0===e&&1===n,u=1===e&&0===n,c=0===i,h=-100*n+100*e+i;return i>0?this.direction="left":i<0&&(this.direction="right"),u&&i>0&&(h=-100+i),l&&i<0&&(h=100+i),a?s&&c&&"left"===this.direction?h=100:o&&c&&"right"===this.direction&&(h=-100):(u&&c&&"left"===this.direction&&(h=-100),l&&c&&"right"===this.direction&&(h=100)),h}},{key:"getThumbnailBarHeight",value:function(){return this.isThumbnailVertical()?{height:this.state.gallerySlideWrapperHeight}:{}}},{key:"getSlideStyle",value:function(e){var t=this.state,n=t.currentIndex,i=t.currentSlideOffset,r=t.slideStyle,a=this.props,s=a.infinite,o=a.items,l=a.useTranslate3D,u=a.isRTL,c=-100*n,h=o.length-1,d=(c+100*e)*(u?-1:1)+i;s&&o.length>2&&(0===n&&e===h?d=-100*(u?-1:1)+i:n===h&&0===e&&(d=100*(u?-1:1)+i)),s&&2===o.length&&(d=this.getTranslateXForTwoSlide(e));var f="translate(".concat(d,"%, 0)");return l&&(f="translate3d(".concat(d,"%, 0, 0)")),we({display:this.isSlideVisible(e)?"inherit":"none",WebkitTransform:f,MozTransform:f,msTransform:f,OTransform:f,transform:f},r)}},{key:"getCurrentIndex",value:function(){return this.state.currentIndex}},{key:"getThumbnailStyle",value:function(){var e,t=this.props,n=t.useTranslate3D,i=t.isRTL,r=this.state,a=r.thumbsTranslate,s=r.thumbsStyle,o=i?-1*a:a;return this.isThumbnailVertical()?(e="translate(0, ".concat(a,"px)"),n&&(e="translate3d(0, ".concat(a,"px, 0)"))):(e="translate(".concat(o,"px, 0)"),n&&(e="translate3d(".concat(o,"px, 0, 0)"))),we({WebkitTransform:e,MozTransform:e,msTransform:e,OTransform:e,transform:e},s)}},{key:"getSlideItems",value:function(){var e=this,n=this.state.currentIndex,i=this.props,r=i.items,s=i.slideOnThumbnailOver,o=i.onClick,l=i.lazyLoad,u=i.onTouchMove,c=i.onTouchEnd,h=i.onTouchStart,d=i.onMouseOver,f=i.onMouseLeave,p=i.renderItem,m=i.renderThumbInner,g=i.showThumbnails,v=i.showBullets,b=[],y=[],w=[];return r.forEach((function(i,r){var T=e.getAlignmentClassName(r),S=i.originalClass?" ".concat(i.originalClass):"",O=i.thumbnailClass?" ".concat(i.thumbnailClass):"",E=i.renderItem||p||e.renderItem,I=i.renderThumbInner||m||e.renderThumbInner,k=!l||T||e.lazyLoaded[r];k&&l&&!e.lazyLoaded[r]&&(e.lazyLoaded[r]=!0);var x=e.getSlideStyle(r),_=a().createElement("div",{"aria-label":"Go to Slide ".concat(r+1),key:"slide-".concat(r),tabIndex:"-1",className:"image-gallery-slide ".concat(T," ").concat(S),style:x,onClick:o,onKeyUp:e.handleSlideKeyUp,onTouchMove:u,onTouchEnd:c,onTouchStart:h,onMouseOver:d,onFocus:d,onMouseLeave:f,role:"button"},k?E(i):a().createElement("div",{style:{height:"100%"}}));if(b.push(_),g&&i.thumbnail){var L=t("image-gallery-thumbnail",O,{active:n===r});y.push(a().createElement("button",{key:"thumbnail-".concat(r),type:"button",tabIndex:"0","aria-pressed":n===r?"true":"false","aria-label":"Go to Slide ".concat(r+1),className:L,onMouseLeave:s?e.onThumbnailMouseLeave:null,onMouseOver:function(t){return e.handleThumbnailMouseOver(t,r)},onFocus:function(t){return e.handleThumbnailMouseOver(t,r)},onKeyUp:function(t){return e.handleThumbnailKeyUp(t,r)},onClick:function(t){return e.onThumbnailClick(t,r)}},I(i)))}if(v){var P=t("image-gallery-bullet",i.bulletClass,{active:n===r});w.push(a().createElement("button",{type:"button",key:"bullet-".concat(r),className:P,onClick:function(t){return i.bulletOnClick&&i.bulletOnClick({item:i,itemIndex:r,currentIndex:n}),t.target.blur(),e.slideToIndex.call(e,r,t)},"aria-pressed":n===r?"true":"false","aria-label":"Go to Slide ".concat(r+1)}))}})),{slides:b,thumbnails:y,bullets:w}}},{key:"ignoreIsTransitioning",value:function(){var e=this.props.items,t=this.state,n=t.previousIndex,i=t.currentIndex,r=e.length-1;return Math.abs(n-i)>1&&!(0===n&&i===r)&&!(n===r&&0===i)}},{key:"isFirstOrLastSlide",value:function(e){return e===this.props.items.length-1||0===e}},{key:"slideIsTransitioning",value:function(e){var t=this.state,n=t.isTransitioning,i=t.previousIndex,r=t.currentIndex;return n&&!(e===i||e===r)}},{key:"isSlideVisible",value:function(e){return!this.slideIsTransitioning(e)||this.ignoreIsTransitioning()&&!this.isFirstOrLastSlide(e)}},{key:"slideThumbnailBar",value:function(){var e=this.state,t=e.currentIndex,n=e.isSwipingThumbnail,i=-this.getThumbsTranslate(t);n||(0===t?this.setState({thumbsTranslate:0,thumbsSwipedTranslate:0}):this.setState({thumbsTranslate:i,thumbsSwipedTranslate:i}))}},{key:"canSlide",value:function(){return this.props.items.length>=2}},{key:"canSlideLeft",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t||(n?this.canSlideNext():this.canSlidePrevious())}},{key:"canSlideRight",value:function(){var e=this.props,t=e.infinite,n=e.isRTL;return t||(n?this.canSlidePrevious():this.canSlideNext())}},{key:"canSlidePrevious",value:function(){return this.state.currentIndex>0}},{key:"canSlideNext",value:function(){return this.state.currentIndex<this.props.items.length-1}},{key:"handleSwiping",value:function(e){var t=e.event,n=e.absX,i=e.dir,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=this.state,l=o.galleryWidth,u=o.isTransitioning,c=o.swipingUpDown,h=o.swipingLeftRight;if(i!==ee.UP&&i!==ee.DOWN&&!c||h){if(i!==ee.LEFT&&i!==ee.RIGHT||h||this.setState({swipingLeftRight:!0}),!a){var d=this.props.swipingTransitionDuration;if(s&&t.preventDefault(),u)this.setState({currentSlideOffset:0});else{var f=i===ee.RIGHT?1:-1,p=n/l*100;Math.abs(p)>=100&&(p=100);var m={transition:"transform ".concat(d,"ms ease-out")};this.setState({currentSlideOffset:f*p,slideStyle:m})}}}else c||this.setState({swipingUpDown:!0})}},{key:"handleThumbnailSwiping",value:function(e){var t=e.event,n=e.absX,i=e.absY,r=e.dir,a=this.props,s=a.stopPropagation,o=a.swipingThumbnailTransitionDuration,l=this.state,u=l.thumbsSwipedTranslate,c=l.thumbnailsWrapperHeight,h=l.thumbnailsWrapperWidth,d=l.swipingUpDown,f=l.swipingLeftRight;if(this.isThumbnailVertical()){if((r===ee.LEFT||r===ee.RIGHT||f)&&!d)return void(f||this.setState({swipingLeftRight:!0}));r!==ee.UP&&r!==ee.DOWN||d||this.setState({swipingUpDown:!0})}else{if((r===ee.UP||r===ee.DOWN||d)&&!f)return void(d||this.setState({swipingUpDown:!0}));r!==ee.LEFT&&r!==ee.RIGHT||f||this.setState({swipingLeftRight:!0})}var p,m,g,v,b,y=this.thumbnails&&this.thumbnails.current;if(this.isThumbnailVertical()?(p=u+(r===ee.DOWN?i:-i),m=y.scrollHeight-c+20,g=Math.abs(p)>m,v=p>20,b=y.scrollHeight<=c):(p=u+(r===ee.RIGHT?n:-n),m=y.scrollWidth-h+20,g=Math.abs(p)>m,v=p>20,b=y.scrollWidth<=h),!b&&(r!==ee.LEFT&&r!==ee.UP||!g)&&(r!==ee.RIGHT&&r!==ee.DOWN||!v)){s&&t.stopPropagation();var w={transition:"transform ".concat(o,"ms ease-out")};this.setState({thumbsTranslate:p,thumbsStyle:w})}}},{key:"handleOnThumbnailSwiped",value:function(){var e=this.state.thumbsTranslate,t=this.props.slideDuration;this.resetSwipingDirection(),this.setState({isSwipingThumbnail:!0,thumbsSwipedTranslate:e,thumbsStyle:{transition:"all ".concat(t,"ms ease-out")}})}},{key:"sufficientSwipe",value:function(){var e=this.state.currentSlideOffset,t=this.props.swipeThreshold;return Math.abs(e)>t}},{key:"resetSwipingDirection",value:function(){var e=this.state,t=e.swipingUpDown,n=e.swipingLeftRight;t&&this.setState({swipingUpDown:!1}),n&&this.setState({swipingLeftRight:!1})}},{key:"handleOnSwiped",value:function(e){var t=e.event,n=e.dir,i=e.velocity,r=this.props,a=r.disableSwipe,s=r.stopPropagation,o=r.flickThreshold;if(!a){var l=this.props.isRTL;s&&t.stopPropagation(),this.resetSwipingDirection();var u=(n===ee.LEFT?1:-1)*(l?-1:1),c=n===ee.UP||n===ee.DOWN,h=i>o&&!c;this.handleOnSwipedTo(u,h)}}},{key:"handleOnSwipedTo",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=i;!this.sufficientSwipe()&&!t||r||(a+=e),(-1===e&&!this.canSlideLeft()||1===e&&!this.canSlideRight())&&(a=i),this.unthrottledSlideToIndex(a)}},{key:"handleTouchMove",value:function(e){this.state.swipingLeftRight&&e.preventDefault()}},{key:"handleMouseDown",value:function(){this.imageGallery.current.classList.add("image-gallery-using-mouse")}},{key:"handleKeyDown",value:function(e){var t=this.props,n=t.disableKeyDown,i=t.useBrowserFullscreen,r=this.state.isFullscreen;if(this.imageGallery.current.classList.remove("image-gallery-using-mouse"),!n)switch(parseInt(e.keyCode||e.which||0,10)){case 37:this.canSlideLeft()&&!this.playPauseIntervalId&&this.slideLeft(e);break;case 39:this.canSlideRight()&&!this.playPauseIntervalId&&this.slideRight(e);break;case 27:r&&!i&&this.exitFullScreen()}}},{key:"handleImageError",value:function(e){var t=this.props.onErrorImageURL;t&&-1===e.target.src.indexOf(t)&&(e.target.src=t)}},{key:"removeResizeObserver",value:function(){this.resizeObserver&&this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&(this.resizeObserver.unobserve(this.imageGallerySlideWrapper.current),this.resizeObserver=null)}},{key:"handleResize",value:function(){var e=this.state.currentIndex;this.resizeObserver&&(this.imageGallery&&this.imageGallery.current&&this.setState({galleryWidth:this.imageGallery.current.offsetWidth}),this.imageGallerySlideWrapper&&this.imageGallerySlideWrapper.current&&this.setState({gallerySlideWrapperHeight:this.imageGallerySlideWrapper.current.offsetHeight}),this.thumbnailsWrapper&&this.thumbnailsWrapper.current&&(this.isThumbnailVertical()?this.setState({thumbnailsWrapperHeight:this.thumbnailsWrapper.current.offsetHeight}):this.setState({thumbnailsWrapperWidth:this.thumbnailsWrapper.current.offsetWidth})),this.setThumbsTranslate(-this.getThumbsTranslate(e)))}},{key:"initResizeObserver",value:function(e){var t=this;this.resizeObserver=new Z(L((function(e){e&&e.forEach((function(){t.handleResize()}))}),300)),this.resizeObserver.observe(e.current)}},{key:"toggleFullScreen",value:function(){this.state.isFullscreen?this.exitFullScreen():this.fullScreen()}},{key:"togglePlay",value:function(){this.playPauseIntervalId?this.pause():this.play()}},{key:"handleScreenChange",value:function(){var e=this.props,t=e.onScreenChange,n=e.useBrowserFullscreen,i=document.fullscreenElement||document.msFullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement,r=this.imageGallery.current===i;t&&t(r),n&&this.setState({isFullscreen:r})}},{key:"slideToIndex",value:function(e,t){var n=this.state,i=n.currentIndex,r=n.isTransitioning,a=this.props,s=a.items,o=a.slideDuration,l=a.onBeforeSlide;if(!r){t&&this.playPauseIntervalId&&(this.pause(!1),this.play(!1));var u=s.length-1,c=e;e<0?c=u:e>u&&(c=0),l&&c!==i&&l(c),this.setState({previousIndex:i,currentIndex:c,isTransitioning:c!==i,currentSlideOffset:0,slideStyle:{transition:"all ".concat(o,"ms ease-out")}},this.onSliding)}}},{key:"slideLeft",value:function(e){var t=this.props.isRTL;this.slideTo(e,t?"right":"left")}},{key:"slideRight",value:function(e){var t=this.props.isRTL;this.slideTo(e,t?"left":"right")}},{key:"slideTo",value:function(e,t){var n=this,i=this.state,r=i.currentIndex,a=i.currentSlideOffset,s=i.isTransitioning,o=this.props.items,l=r+("left"===t?-1:1);s||(2===o.length?this.setState({currentSlideOffset:a+("left"===t?.001:-.001),slideStyle:{transition:"none"}},(function(){window.setTimeout((function(){return n.slideToIndex(l,e)}),25)})):this.slideToIndex(l,e))}},{key:"handleThumbnailMouseOver",value:function(e,t){this.props.slideOnThumbnailOver&&this.onThumbnailMouseOver(e,t)}},{key:"handleThumbnailKeyUp",value:function(e,t){Le(e)&&this.onThumbnailClick(e,t)}},{key:"handleSlideKeyUp",value:function(e){Le(e)&&(0,this.props.onClick)(e)}},{key:"isThumbnailVertical",value:function(){var e=this.props.thumbnailPosition;return"left"===e||"right"===e}},{key:"addScreenChangeEvent",value:function(){var e=this;xe.forEach((function(t){document.addEventListener(t,e.handleScreenChange)}))}},{key:"removeScreenChangeEvent",value:function(){var e=this;xe.forEach((function(t){document.removeEventListener(t,e.handleScreenChange)}))}},{key:"fullScreen",value:function(){var e=this.props.useBrowserFullscreen,t=this.imageGallery.current;e?t.requestFullscreen?t.requestFullscreen():t.msRequestFullscreen?t.msRequestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():this.setModalFullscreen(!0):this.setModalFullscreen(!0),this.setState({isFullscreen:!0})}},{key:"exitFullScreen",value:function(){var e=this.state.isFullscreen,t=this.props.useBrowserFullscreen;e&&(t?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.msExitFullscreen?document.msExitFullscreen():this.setModalFullscreen(!1):this.setModalFullscreen(!1),this.setState({isFullscreen:!1}))}},{key:"pauseOrPlay",value:function(){var e=this.props.infinite,t=this.state.currentIndex;e||this.canSlideRight()?this.slideToIndex(t+1):this.pause()}},{key:"play",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this.props,n=t.onPlay,i=t.slideInterval,r=t.slideDuration,a=this.state.currentIndex;this.playPauseIntervalId||(this.setState({isPlaying:!0}),this.playPauseIntervalId=window.setInterval(this.pauseOrPlay,Math.max(i,r)),n&&e&&n(a))}},{key:"pause",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this.props.onPause,n=this.state.currentIndex;this.playPauseIntervalId&&(window.clearInterval(this.playPauseIntervalId),this.playPauseIntervalId=null,this.setState({isPlaying:!1}),t&&e&&t(n))}},{key:"isImageLoaded",value:function(e){return!!this.loadedImages[e.original]||(this.loadedImages[e.original]=!0,!1)}},{key:"handleImageLoaded",value:function(e,t){var n=this.props.onImageLoad;!this.loadedImages[t]&&n&&(this.loadedImages[t]=!0,n(e))}},{key:"renderItem",value:function(e){var t=this.state.isFullscreen,n=this.props.onImageError||this.handleImageError;return a().createElement(ie,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:this.handleImageLoaded,isFullscreen:t,onImageError:n,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalWidth:e.originalWidth,originalTitle:e.originalTitle,sizes:e.sizes,loading:e.loading,srcSet:e.srcSet})}},{key:"renderThumbInner",value:function(e){var t=this.props.onThumbnailError||this.handleImageError;return a().createElement("span",{className:"image-gallery-thumbnail-inner"},a().createElement("img",{className:"image-gallery-thumbnail-image",src:e.thumbnail,height:e.thumbnailHeight,width:e.thumbnailWidth,alt:e.thumbnailAlt,title:e.thumbnailTitle,loading:e.thumbnailLoading,onError:t}),e.thumbnailLabel&&a().createElement("div",{className:"image-gallery-thumbnail-label"},e.thumbnailLabel))}},{key:"render",value:function(){var e=this.state,n=e.currentIndex,i=e.isFullscreen,r=e.modalFullscreen,s=e.isPlaying,o=this.props,l=o.additionalClass,u=o.disableThumbnailSwipe,c=o.indexSeparator,h=o.isRTL,d=o.items,f=o.thumbnailPosition,p=o.renderFullscreenButton,m=o.renderCustomControls,g=o.renderLeftNav,v=o.renderRightNav,b=o.showBullets,y=o.showFullscreenButton,w=o.showIndex,T=o.showThumbnails,S=o.showNav,O=o.showPlayButton,E=o.renderPlayPauseButton,I=this.getThumbnailStyle(),k=this.getSlideItems(),x=k.slides,_=k.thumbnails,L=k.bullets,P=t("image-gallery-slide-wrapper",f,{"image-gallery-rtl":h}),M=a().createElement("div",{ref:this.imageGallerySlideWrapper,className:P},m&&m(),this.canSlide()?a().createElement(a().Fragment,null,S&&a().createElement(a().Fragment,null,g(this.slideLeft,!this.canSlideLeft()),v(this.slideRight,!this.canSlideRight())),a().createElement(ve,{className:"image-gallery-swipe",delta:0,onSwiping:this.handleSwiping,onSwiped:this.handleOnSwiped},a().createElement("div",{className:"image-gallery-slides"},x))):a().createElement("div",{className:"image-gallery-slides"},x),O&&E(this.togglePlay,s),b&&a().createElement("div",{className:"image-gallery-bullets"},a().createElement("div",{className:"image-gallery-bullets-container",role:"navigation","aria-label":"Bullet Navigation"},L)),y&&p(this.toggleFullScreen,i),w&&a().createElement("div",{className:"image-gallery-index"},a().createElement("span",{className:"image-gallery-index-current"},n+1),a().createElement("span",{className:"image-gallery-index-separator"},c),a().createElement("span",{className:"image-gallery-index-total"},d.length))),R=t("image-gallery",l,{"fullscreen-modal":r}),D=t("image-gallery-content",f,{fullscreen:i}),F=t("image-gallery-thumbnails-wrapper",f,{"thumbnails-wrapper-rtl":!this.isThumbnailVertical()&&h},{"thumbnails-swipe-horizontal":!this.isThumbnailVertical()&&!u},{"thumbnails-swipe-vertical":this.isThumbnailVertical()&&!u});return a().createElement("div",{ref:this.imageGallery,className:R,"aria-live":"polite"},a().createElement("div",{className:D},("bottom"===f||"right"===f)&&M,T&&_.length>0?a().createElement(ve,{className:F,delta:0,onSwiping:!u&&this.handleThumbnailSwiping,onSwiped:!u&&this.handleOnThumbnailSwiped},a().createElement("div",{className:"image-gallery-thumbnails",ref:this.thumbnailsWrapper,style:this.getThumbnailBarHeight()},a().createElement("nav",{ref:this.thumbnails,className:"image-gallery-thumbnails-container",style:I,"aria-label":"Thumbnail Navigation"},_))):null,("top"===f||"left"===f)&&M))}}])&&Se(n.prototype,i),l}(a().Component);Pe.propTypes={flickThreshold:te.number,items:(0,te.arrayOf)((0,te.shape)({bulletClass:te.string,bulletOnClick:te.func,description:te.string,original:te.string,originalHeight:te.number,originalWidth:te.number,loading:te.string,thumbnailHeight:te.number,thumbnailWidth:te.number,thumbnailLoading:te.string,fullscreen:te.string,originalAlt:te.string,originalTitle:te.string,thumbnail:te.string,thumbnailAlt:te.string,thumbnailLabel:te.string,thumbnailTitle:te.string,originalClass:te.string,thumbnailClass:te.string,renderItem:te.func,renderThumbInner:te.func,imageSet:_e,srcSet:te.string,sizes:te.string})).isRequired,showNav:te.bool,autoPlay:te.bool,lazyLoad:te.bool,infinite:te.bool,showIndex:te.bool,showBullets:te.bool,showThumbnails:te.bool,showPlayButton:te.bool,showFullscreenButton:te.bool,disableThumbnailScroll:te.bool,disableKeyDown:te.bool,disableSwipe:te.bool,disableThumbnailSwipe:te.bool,useBrowserFullscreen:te.bool,onErrorImageURL:te.string,indexSeparator:te.string,thumbnailPosition:(0,te.oneOf)(["top","bottom","left","right"]),startIndex:te.number,slideDuration:te.number,slideInterval:te.number,slideOnThumbnailOver:te.bool,swipeThreshold:te.number,swipingTransitionDuration:te.number,swipingThumbnailTransitionDuration:te.number,onSlide:te.func,onBeforeSlide:te.func,onScreenChange:te.func,onPause:te.func,onPlay:te.func,onClick:te.func,onImageLoad:te.func,onImageError:te.func,onTouchMove:te.func,onTouchEnd:te.func,onTouchStart:te.func,onMouseOver:te.func,onMouseLeave:te.func,onThumbnailError:te.func,onThumbnailClick:te.func,renderCustomControls:te.func,renderLeftNav:te.func,renderRightNav:te.func,renderPlayPauseButton:te.func,renderFullscreenButton:te.func,renderItem:te.func,renderThumbInner:te.func,stopPropagation:te.bool,additionalClass:te.string,useTranslate3D:te.bool,isRTL:te.bool,useWindowKeyDown:te.bool},Pe.defaultProps={onErrorImageURL:"",additionalClass:"",showNav:!0,autoPlay:!1,lazyLoad:!1,infinite:!0,showIndex:!1,showBullets:!1,showThumbnails:!0,showPlayButton:!0,showFullscreenButton:!0,disableThumbnailScroll:!1,disableKeyDown:!1,disableSwipe:!1,disableThumbnailSwipe:!1,useTranslate3D:!0,isRTL:!1,useBrowserFullscreen:!0,flickThreshold:.4,stopPropagation:!1,indexSeparator:" / ",thumbnailPosition:"bottom",startIndex:0,slideDuration:450,swipingTransitionDuration:0,swipingThumbnailTransitionDuration:0,onSlide:null,onBeforeSlide:null,onScreenChange:null,onPause:null,onPlay:null,onClick:null,onImageLoad:null,onImageError:null,onTouchMove:null,onTouchEnd:null,onTouchStart:null,onMouseOver:null,onMouseLeave:null,onThumbnailError:null,onThumbnailClick:null,renderCustomControls:null,renderThumbInner:null,renderItem:null,slideInterval:3e3,slideOnThumbnailOver:!1,swipeThreshold:30,renderLeftNav:function(e,t){return a().createElement(ce,{onClick:e,disabled:t})},renderRightNav:function(e,t){return a().createElement(de,{onClick:e,disabled:t})},renderPlayPauseButton:function(e,t){return a().createElement(pe,{onClick:e,isPlaying:t})},renderFullscreenButton:function(e,t){return a().createElement(le,{onClick:e,isFullscreen:t})},useWindowKeyDown:!0};const Me=Pe})(),r})()}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-image-gallery",
3
- "version": "1.2.6",
3
+ "version": "1.2.9",
4
4
  "description": "React carousel image gallery component with thumbnail and mobile support",
5
5
  "main": "./build/image-gallery.js",
6
6
  "scripts": {
@@ -60,8 +60,8 @@
60
60
  "postcss": "^8.2.10",
61
61
  "postcss-loader": "^5.2.0",
62
62
  "prop-types": "^15.5.8",
63
- "react": "^17.0.2",
64
- "react-dom": "^17.0.2",
63
+ "react": "^18.0.0",
64
+ "react-dom": "^18.0.0",
65
65
  "react-fast-compare": "^3.2.0",
66
66
  "react-swipeable": "6.0.1",
67
67
  "remove-files-webpack-plugin": "^1.4.5",
@@ -76,7 +76,7 @@
76
76
  "webpack-dev-server": "^3.11.2"
77
77
  },
78
78
  "peerDependencies": {
79
- "react": "^16.0.0 || ^17.0.0"
79
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
80
80
  },
81
81
  "dependencies": {
82
82
  }
@@ -19,8 +19,11 @@ import {
19
19
  shape,
20
20
  string,
21
21
  } from 'prop-types';
22
- import SVG from 'src/SVG';
23
22
  import Item from 'src/Item';
23
+ import Fullscreen from 'src/controls/Fullscreen';
24
+ import LeftNav from 'src/controls/LeftNav';
25
+ import RightNav from 'src/controls/RightNav';
26
+ import PlayPause from 'src/controls/PlayPause';
24
27
  import SwipeWrapper from 'src/SwipeWrapper';
25
28
 
26
29
  const screenChangeEvents = [
@@ -122,7 +125,7 @@ class ImageGallery extends React.Component {
122
125
  showThumbnails,
123
126
  useWindowKeyDown,
124
127
  } = this.props;
125
- const { currentIndex } = this.state;
128
+ const { currentIndex, isPlaying } = this.state;
126
129
  const itemsSizeChanged = prevProps.items.length !== items.length;
127
130
  const itemsChanged = !isEqual(prevProps.items, items);
128
131
  const startIndexUpdated = prevProps.startIndex !== startIndex;
@@ -131,8 +134,10 @@ class ImageGallery extends React.Component {
131
134
 
132
135
  if (slideInterval !== prevProps.slideInterval || slideDuration !== prevProps.slideDuration) {
133
136
  // refresh setInterval
134
- this.pause();
135
- this.play();
137
+ if (isPlaying) {
138
+ this.pause();
139
+ this.play();
140
+ }
136
141
  }
137
142
 
138
143
  if (thumbnailsPositionChanged) {
@@ -168,8 +173,12 @@ class ImageGallery extends React.Component {
168
173
  }
169
174
 
170
175
  if (startIndexUpdated || itemsChanged) {
171
- // TODO: this should be fix/removed
172
- this.setState({ currentIndex: startIndex });
176
+ // reset to start index if new items are added
177
+ // do not transition when new items are added
178
+ this.setState({
179
+ currentIndex: startIndex,
180
+ slideStyle: { transition: 'none' },
181
+ });
173
182
  }
174
183
  }
175
184
 
@@ -554,7 +563,7 @@ class ImageGallery extends React.Component {
554
563
  if (item.bulletOnClick) {
555
564
  item.bulletOnClick({ item, itemIndex: index, currentIndex });
556
565
  }
557
- // blur element to remove outline cause by focus
566
+ // blur element to remove outline caused by focus
558
567
  event.target.blur();
559
568
  return this.slideToIndex.call(this, index, event);
560
569
  };
@@ -686,20 +695,20 @@ class ImageGallery extends React.Component {
686
695
  const {
687
696
  galleryWidth,
688
697
  isTransitioning,
689
- scrollingUpDown,
690
- scrollingLeftRight,
698
+ swipingUpDown,
699
+ swipingLeftRight,
691
700
  } = this.state;
692
701
 
693
702
  // if the initial swiping is up/down prevent moving the slides until swipe ends
694
- if ((dir === UP || dir === DOWN || scrollingUpDown) && !scrollingLeftRight) {
695
- if (!scrollingUpDown) {
696
- this.setState({ scrollingUpDown: true });
703
+ if ((dir === UP || dir === DOWN || swipingUpDown) && !swipingLeftRight) {
704
+ if (!swipingUpDown) {
705
+ this.setState({ swipingUpDown: true });
697
706
  }
698
707
  return;
699
708
  }
700
709
 
701
- if ((dir === LEFT || dir === RIGHT) && !scrollingLeftRight) {
702
- this.setState({ scrollingLeftRight: true });
710
+ if ((dir === LEFT || dir === RIGHT) && !swipingLeftRight) {
711
+ this.setState({ swipingLeftRight: true });
703
712
  }
704
713
 
705
714
  if (disableSwipe) return;
@@ -745,7 +754,36 @@ class ImageGallery extends React.Component {
745
754
  thumbsSwipedTranslate,
746
755
  thumbnailsWrapperHeight,
747
756
  thumbnailsWrapperWidth,
757
+ swipingUpDown,
758
+ swipingLeftRight,
748
759
  } = this.state;
760
+
761
+ if (this.isThumbnailVertical()) {
762
+ // if the initial swiping is left/right, prevent moving the thumbnail bar until swipe ends
763
+ if ((dir === LEFT || dir === RIGHT || swipingLeftRight) && !swipingUpDown) {
764
+ if (!swipingLeftRight) {
765
+ this.setState({ swipingLeftRight: true });
766
+ }
767
+ return;
768
+ }
769
+
770
+ if ((dir === UP || dir === DOWN) && !swipingUpDown) {
771
+ this.setState({ swipingUpDown: true });
772
+ }
773
+ } else {
774
+ // if the initial swiping is up/down, prevent moving the thumbnail bar until swipe ends
775
+ if ((dir === UP || dir === DOWN || swipingUpDown) && !swipingLeftRight) {
776
+ if (!swipingUpDown) {
777
+ this.setState({ swipingUpDown: true });
778
+ }
779
+ return;
780
+ }
781
+
782
+ if ((dir === LEFT || dir === RIGHT) && !swipingLeftRight) {
783
+ this.setState({ swipingLeftRight: true });
784
+ }
785
+ }
786
+
749
787
  const thumbsElement = this.thumbnails && this.thumbnails.current;
750
788
  const emptySpaceMargin = 20; // 20px to add some margin to show empty space
751
789
 
@@ -803,6 +841,7 @@ class ImageGallery extends React.Component {
803
841
  handleOnThumbnailSwiped() {
804
842
  const { thumbsTranslate } = this.state;
805
843
  const { slideDuration } = this.props;
844
+ this.resetSwipingDirection();
806
845
  this.setState({
807
846
  isSwipingThumbnail: true,
808
847
  thumbsSwipedTranslate: thumbsTranslate,
@@ -816,23 +855,27 @@ class ImageGallery extends React.Component {
816
855
  return Math.abs(currentSlideOffset) > swipeThreshold;
817
856
  }
818
857
 
858
+ resetSwipingDirection() {
859
+ const { swipingUpDown, swipingLeftRight } = this.state;
860
+ if (swipingUpDown) {
861
+ // user stopped swipingUpDown, reset
862
+ this.setState({ swipingUpDown: false });
863
+ }
864
+
865
+ if (swipingLeftRight) {
866
+ // user stopped swipingLeftRight, reset
867
+ this.setState({ swipingLeftRight: false });
868
+ }
869
+ }
870
+
819
871
  handleOnSwiped({ event, dir, velocity }) {
820
872
  const { disableSwipe, stopPropagation, flickThreshold } = this.props;
821
- const { scrollingUpDown, scrollingLeftRight } = this.state;
822
873
 
823
874
  if (disableSwipe) return;
824
875
 
825
876
  const { isRTL } = this.props;
826
877
  if (stopPropagation) event.stopPropagation();
827
- if (scrollingUpDown) {
828
- // user stopped scrollingUpDown, reset
829
- this.setState({ scrollingUpDown: false });
830
- }
831
-
832
- if (scrollingLeftRight) {
833
- // user stopped scrollingLeftRight, reset
834
- this.setState({ scrollingLeftRight: false });
835
- }
878
+ this.resetSwipingDirection();
836
879
 
837
880
  // if it is RTL the direction is reversed
838
881
  const swipeDirection = (dir === LEFT ? 1 : -1) * (isRTL ? -1 : 1);
@@ -860,8 +903,8 @@ class ImageGallery extends React.Component {
860
903
  }
861
904
 
862
905
  handleTouchMove(event) {
863
- const { scrollingLeftRight } = this.state;
864
- if (scrollingLeftRight) {
906
+ const { swipingLeftRight } = this.state;
907
+ if (swipingLeftRight) {
865
908
  // prevent background scrolling up and down while swiping left and right
866
909
  event.preventDefault();
867
910
  }
@@ -1033,26 +1076,18 @@ class ImageGallery extends React.Component {
1033
1076
 
1034
1077
  slideLeft(event) {
1035
1078
  const { isRTL } = this.props;
1036
- if (isRTL) {
1037
- this.slideNext(event);
1038
- } else {
1039
- this.slidePrevious(event);
1040
- }
1079
+ this.slideTo(event, isRTL ? 'right' : 'left')
1041
1080
  }
1042
1081
 
1043
1082
  slideRight(event) {
1044
1083
  const { isRTL } = this.props;
1045
- if (isRTL) {
1046
- this.slidePrevious(event);
1047
- } else {
1048
- this.slideNext(event);
1049
- }
1084
+ this.slideTo(event, isRTL ? 'left' : 'right')
1050
1085
  }
1051
1086
 
1052
- slidePrevious(event) {
1087
+ slideTo(event, direction) {
1053
1088
  const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
1054
1089
  const { items } = this.props;
1055
- const nextIndex = currentIndex - 1;
1090
+ const nextIndex = currentIndex + (direction === 'left' ? -1 : 1)
1056
1091
 
1057
1092
  if (isTransitioning) return;
1058
1093
 
@@ -1062,7 +1097,8 @@ class ImageGallery extends React.Component {
1062
1097
  on the correct side for transitioning
1063
1098
  */
1064
1099
  this.setState({
1065
- currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
1100
+ // this will reset once index changes
1101
+ currentSlideOffset: currentSlideOffset + (direction === 'left' ? 0.001 : -0.001),
1066
1102
  slideStyle: { transition: 'none' }, // move the slide over instantly
1067
1103
  }, () => {
1068
1104
  // add 25ms timeout to avoid delay in moving slides over
@@ -1073,26 +1109,6 @@ class ImageGallery extends React.Component {
1073
1109
  }
1074
1110
  }
1075
1111
 
1076
- slideNext(event) {
1077
- const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
1078
- const { items } = this.props;
1079
- const nextIndex = currentIndex + 1;
1080
-
1081
- if (isTransitioning) return;
1082
-
1083
- if (items.length === 2) {
1084
- // same as above for 2 slides
1085
- this.setState({
1086
- currentSlideOffset: currentSlideOffset - 0.001,
1087
- slideStyle: { transition: 'none' },
1088
- }, () => {
1089
- window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
1090
- });
1091
- } else {
1092
- this.slideToIndex(nextIndex, event);
1093
- }
1094
- }
1095
-
1096
1112
  handleThumbnailMouseOver(event, index) {
1097
1113
  const { slideOnThumbnailOver } = this.props;
1098
1114
  if (slideOnThumbnailOver) this.onThumbnailMouseOver(event, index);
@@ -1258,6 +1274,7 @@ class ImageGallery extends React.Component {
1258
1274
  originalWidth={item.originalWidth}
1259
1275
  originalTitle={item.originalTitle}
1260
1276
  sizes={item.sizes}
1277
+ loading={item.loading}
1261
1278
  srcSet={item.srcSet}
1262
1279
  />
1263
1280
  );
@@ -1276,6 +1293,7 @@ class ImageGallery extends React.Component {
1276
1293
  width={item.thumbnailWidth}
1277
1294
  alt={item.thumbnailAlt}
1278
1295
  title={item.thumbnailTitle}
1296
+ loading={item.thumbnailLoading}
1279
1297
  onError={handleThumbnailError}
1280
1298
  />
1281
1299
  {
@@ -1415,14 +1433,14 @@ class ImageGallery extends React.Component {
1415
1433
  onSwiped={!disableThumbnailSwipe && this.handleOnThumbnailSwiped}
1416
1434
  >
1417
1435
  <div className="image-gallery-thumbnails" ref={this.thumbnailsWrapper} style={this.getThumbnailBarHeight()}>
1418
- <div
1436
+ <nav
1419
1437
  ref={this.thumbnails}
1420
1438
  className="image-gallery-thumbnails-container"
1421
1439
  style={thumbnailStyle}
1422
1440
  aria-label="Thumbnail Navigation"
1423
1441
  >
1424
1442
  {thumbnails}
1425
- </div>
1443
+ </nav>
1426
1444
  </div>
1427
1445
  </SwipeWrapper>
1428
1446
  ) : null
@@ -1444,8 +1462,10 @@ ImageGallery.propTypes = {
1444
1462
  original: string,
1445
1463
  originalHeight: number,
1446
1464
  originalWidth: number,
1465
+ loading: string,
1447
1466
  thumbnailHeight: number,
1448
1467
  thumbnailWidth: number,
1468
+ thumbnailLoading: string,
1449
1469
  fullscreen: string,
1450
1470
  originalAlt: string,
1451
1471
  originalTitle: string,
@@ -1563,46 +1583,16 @@ ImageGallery.defaultProps = {
1563
1583
  slideOnThumbnailOver: false,
1564
1584
  swipeThreshold: 30,
1565
1585
  renderLeftNav: (onClick, disabled) => (
1566
- <button
1567
- type="button"
1568
- className="image-gallery-icon image-gallery-left-nav"
1569
- disabled={disabled}
1570
- onClick={onClick}
1571
- aria-label="Previous Slide"
1572
- >
1573
- <SVG icon="left" viewBox="6 0 12 24" />
1574
- </button>
1586
+ <LeftNav onClick={onClick} disabled={disabled} />
1575
1587
  ),
1576
1588
  renderRightNav: (onClick, disabled) => (
1577
- <button
1578
- type="button"
1579
- className="image-gallery-icon image-gallery-right-nav"
1580
- disabled={disabled}
1581
- onClick={onClick}
1582
- aria-label="Next Slide"
1583
- >
1584
- <SVG icon="right" viewBox="6 0 12 24" />
1585
- </button>
1589
+ <RightNav onClick={onClick} disabled={disabled} />
1586
1590
  ),
1587
1591
  renderPlayPauseButton: (onClick, isPlaying) => (
1588
- <button
1589
- type="button"
1590
- className="image-gallery-icon image-gallery-play-button"
1591
- onClick={onClick}
1592
- aria-label="Play or Pause Slideshow"
1593
- >
1594
- <SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
1595
- </button>
1592
+ <PlayPause onClick={onClick} isPlaying={isPlaying} />
1596
1593
  ),
1597
1594
  renderFullscreenButton: (onClick, isFullscreen) => (
1598
- <button
1599
- type="button"
1600
- className="image-gallery-icon image-gallery-fullscreen-button"
1601
- onClick={onClick}
1602
- aria-label="Open Fullscreen"
1603
- >
1604
- <SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
1605
- </button>
1595
+ <Fullscreen onClick={onClick} isFullscreen={isFullscreen} />
1606
1596
  ),
1607
1597
  useWindowKeyDown: true,
1608
1598
  };
package/src/Item.js CHANGED
@@ -14,6 +14,7 @@ const Item = React.memo(({
14
14
  originalTitle,
15
15
  sizes,
16
16
  srcSet,
17
+ loading,
17
18
  }) => {
18
19
  const itemSrc = isFullscreen ? (fullscreen || original) : original;
19
20
 
@@ -30,6 +31,7 @@ const Item = React.memo(({
30
31
  title={originalTitle}
31
32
  onLoad={event => handleImageLoaded(event, original)}
32
33
  onError={onImageError}
34
+ loading={loading}
33
35
  />
34
36
  {
35
37
  description && (
@@ -57,6 +59,7 @@ Item.propTypes = {
57
59
  originalTitle: string,
58
60
  sizes: string,
59
61
  srcSet: string,
62
+ loading: string,
60
63
  };
61
64
 
62
65
  Item.defaultProps = {
@@ -69,6 +72,7 @@ Item.defaultProps = {
69
72
  originalTitle: '',
70
73
  sizes: '',
71
74
  srcSet: '',
75
+ loading: 'eager',
72
76
  };
73
77
 
74
78
  export default Item;
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { bool, func } from 'prop-types';
3
+ import SVG from 'src/SVG';
4
+
5
+ const Fullscreen = React.memo(({
6
+ isFullscreen,
7
+ onClick,
8
+ }) => {
9
+ return (
10
+ <button
11
+ type="button"
12
+ className="image-gallery-icon image-gallery-fullscreen-button"
13
+ onClick={onClick}
14
+ aria-label="Open Fullscreen"
15
+ >
16
+ <SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
17
+ </button>
18
+ );
19
+ });
20
+
21
+ Fullscreen.displayName = 'Fullscreen';
22
+
23
+ Fullscreen.propTypes = {
24
+ isFullscreen: bool.isRequired,
25
+ onClick: func.isRequired,
26
+ };
27
+
28
+
29
+ export default Fullscreen;
@@ -0,0 +1,30 @@
1
+ import React from 'react';
2
+ import { bool, func } from 'prop-types';
3
+ import SVG from 'src/SVG';
4
+
5
+ const LeftNav = React.memo(({
6
+ disabled,
7
+ onClick,
8
+ }) => {
9
+ return (
10
+ <button
11
+ type="button"
12
+ className="image-gallery-icon image-gallery-left-nav"
13
+ disabled={disabled}
14
+ onClick={onClick}
15
+ aria-label="Previous Slide"
16
+ >
17
+ <SVG icon="left" viewBox="6 0 12 24" />
18
+ </button>
19
+ );
20
+ });
21
+
22
+ LeftNav.displayName = 'LeftNav';
23
+
24
+ LeftNav.propTypes = {
25
+ disabled: bool.isRequired,
26
+ onClick: func.isRequired,
27
+ };
28
+
29
+
30
+ export default LeftNav;
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import { bool, func } from 'prop-types';
3
+ import SVG from 'src/SVG';
4
+
5
+ const PlayPause = React.memo(({
6
+ isPlaying,
7
+ onClick,
8
+ }) => {
9
+ return (
10
+ <button
11
+ type="button"
12
+ className="image-gallery-icon image-gallery-play-button"
13
+ onClick={onClick}
14
+ aria-label="Play or Pause Slideshow"
15
+ >
16
+ <SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
17
+ </button>
18
+ );
19
+ });
20
+
21
+ PlayPause.displayName = 'PlayPause';
22
+
23
+ PlayPause.propTypes = {
24
+ isPlaying: bool.isRequired,
25
+ onClick: func.isRequired,
26
+ };
27
+
28
+
29
+ export default PlayPause;
@@ -0,0 +1,30 @@
1
+ import React from 'react';
2
+ import { bool, func } from 'prop-types';
3
+ import SVG from 'src/SVG';
4
+
5
+ const RightNav = React.memo(({
6
+ disabled,
7
+ onClick,
8
+ }) => {
9
+ return (
10
+ <button
11
+ type="button"
12
+ className="image-gallery-icon image-gallery-right-nav"
13
+ disabled={disabled}
14
+ onClick={onClick}
15
+ aria-label="Next Slide"
16
+ >
17
+ <SVG icon="right" viewBox="6 0 12 24" />
18
+ </button>
19
+ );
20
+ });
21
+
22
+ RightNav.displayName = 'RightNav';
23
+
24
+ RightNav.propTypes = {
25
+ disabled: bool.isRequired,
26
+ onClick: func.isRequired,
27
+ };
28
+
29
+
30
+ export default RightNav;
package/webpack.build.js CHANGED
@@ -36,13 +36,13 @@ const jsOutput = Object.assign({}, config, {
36
36
  react: {
37
37
  commonjs: 'react',
38
38
  commonjs2: 'react',
39
- amd: 'React',
39
+ amd: 'react',
40
40
  root: 'React',
41
41
  },
42
42
  'react-dom': {
43
43
  commonjs: 'react-dom',
44
44
  commonjs2: 'react-dom',
45
- amd: 'ReactDOM',
45
+ amd: 'react-dom',
46
46
  root: 'ReactDOM',
47
47
  },
48
48
  },