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 +1 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +3 -0
- package/README.md +32 -42
- package/build/image-gallery.js +1 -1
- package/package.json +4 -4
- package/src/ImageGallery.js +85 -95
- package/src/Item.js +4 -0
- package/src/controls/Fullscreen.js +29 -0
- package/src/controls/LeftNav.js +30 -0
- package/src/controls/PlayPause.js +29 -0
- package/src/controls/RightNav.js +30 -0
- package/webpack.build.js +2 -2
package/.eslintrc.json
CHANGED
package/README.md
CHANGED
|
@@ -2,7 +2,8 @@ React Image Gallery
|
|
|
2
2
|
===
|
|
3
3
|
|
|
4
4
|
[](https://badge.fury.io/js/react-image-gallery)
|
|
5
|
-
[](
|
|
5
|
+
[](https://www.npmjs.com/package/react-image-gallery)
|
|
6
|
+
[](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
|
-
*
|
|
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
|
-
|
|
178
|
-
|
|
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
|
-
*
|
|
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
|
-
|
|
191
|
-
|
|
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
|
-
*
|
|
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
|
-
|
|
204
|
-
|
|
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
|
-
*
|
|
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
|
-
|
|
219
|
-
|
|
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)
|
package/build/image-gallery.js
CHANGED
|
@@ -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.
|
|
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": "^
|
|
64
|
-
"react-dom": "^
|
|
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
|
}
|
package/src/ImageGallery.js
CHANGED
|
@@ -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
|
-
|
|
135
|
-
|
|
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
|
-
//
|
|
172
|
-
|
|
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
|
|
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
|
-
|
|
690
|
-
|
|
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 ||
|
|
695
|
-
if (!
|
|
696
|
-
this.setState({
|
|
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) && !
|
|
702
|
-
this.setState({
|
|
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
|
-
|
|
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 {
|
|
864
|
-
if (
|
|
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
|
-
|
|
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
|
-
|
|
1046
|
-
this.slidePrevious(event);
|
|
1047
|
-
} else {
|
|
1048
|
-
this.slideNext(event);
|
|
1049
|
-
}
|
|
1084
|
+
this.slideTo(event, isRTL ? 'left' : 'right')
|
|
1050
1085
|
}
|
|
1051
1086
|
|
|
1052
|
-
|
|
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
|
-
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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
|
-
<
|
|
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: '
|
|
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: '
|
|
45
|
+
amd: 'react-dom',
|
|
46
46
|
root: 'ReactDOM',
|
|
47
47
|
},
|
|
48
48
|
},
|