react-image-gallery - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

build/image-gallery.js

@@ -118,3 +118,5 @@ 'use strict';
     value: function componentDidMount() {
-      var autoPlay = this.props.autoPlay;
+      var _props = this.props,
+          autoPlay = _props.autoPlay,
+          useWindowKeyDown = _props.useWindowKeyDown;
 
@@ -124,3 +126,7 @@ if (autoPlay) {
       }
-      window.addEventListener('keydown', this.handleKeyDown);
+      if (useWindowKeyDown) {
+        window.addEventListener('keydown', this.handleKeyDown);
+      } else {
+        this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+      }
       window.addEventListener('mousedown', this.handleMouseDown);
@@ -133,9 +139,10 @@ this.initResizeObserver(this.imageGallerySlideWrapper);
     value: function componentDidUpdate(prevProps, prevState) {
-      var _props = this.props,
-          items = _props.items,
-          lazyLoad = _props.lazyLoad,
-          slideDuration = _props.slideDuration,
-          startIndex = _props.startIndex,
-          thumbnailPosition = _props.thumbnailPosition,
-          showThumbnails = _props.showThumbnails;
+      var _props2 = this.props,
+          items = _props2.items,
+          lazyLoad = _props2.lazyLoad,
+          slideDuration = _props2.slideDuration,
+          startIndex = _props2.startIndex,
+          thumbnailPosition = _props2.thumbnailPosition,
+          showThumbnails = _props2.showThumbnails,
+          useWindowKeyDown = _props2.useWindowKeyDown;
       var currentIndex = this.state.currentIndex;
@@ -169,2 +176,12 @@
 
+      if (useWindowKeyDown !== prevProps.useWindowKeyDown) {
+        if (useWindowKeyDown) {
+          this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
+          window.addEventListener('keydown', this.handleKeyDown);
+        } else {
+          window.removeEventListener('keydown', this.handleKeyDown);
+          this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+        }
+      }
+
       if (startIndexUpdated || itemsChanged) {
@@ -179,3 +196,4 @@ // TODO: this should be fix/removed if all it is doing
     value: function componentWillUnmount() {
-      window.removeEventListener('keydown', this.handleKeyDown);
+      var useWindowKeyDown = this.props.useWindowKeyDown;
+
       window.removeEventListener('mousedown', this.handleMouseDown);
@@ -191,2 +209,7 @@ this.removeScreenChangeEvent();
       }
+      if (useWindowKeyDown) {
+        window.removeEventListener('keydown', this.handleKeyDown);
+      } else {
+        this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
+      }
     }
@@ -201,5 +224,5 @@ }, {
           isTransitioning = _state.isTransitioning;
-      var _props2 = this.props,
-          onSlide = _props2.onSlide,
-          slideDuration = _props2.slideDuration;
+      var _props3 = this.props,
+          onSlide = _props3.onSlide,
+          slideDuration = _props3.slideDuration;
 
@@ -287,5 +310,5 @@ this.transitionTimer = window.setTimeout(function () {
     value: function getThumbsTranslate(indexDifference) {
-      var _props3 = this.props,
-          disableThumbnailScroll = _props3.disableThumbnailScroll,
-          items = _props3.items;
+      var _props4 = this.props,
+          disableThumbnailScroll = _props4.disableThumbnailScroll,
+          items = _props4.items;
       var _state3 = this.state,
@@ -324,5 +347,5 @@ thumbnailsWrapperWidth = _state3.thumbnailsWrapperWidth,
       var currentIndex = this.state.currentIndex;
-      var _props4 = this.props,
-          infinite = _props4.infinite,
-          items = _props4.items;
+      var _props5 = this.props,
+          infinite = _props5.infinite,
+          items = _props5.items;
 
@@ -433,7 +456,7 @@ var alignment = '';
           slideStyle = _state5.slideStyle;
-      var _props5 = this.props,
-          infinite = _props5.infinite,
-          items = _props5.items,
-          useTranslate3D = _props5.useTranslate3D,
-          isRTL = _props5.isRTL;
+      var _props6 = this.props,
+          infinite = _props6.infinite,
+          items = _props6.items,
+          useTranslate3D = _props6.useTranslate3D,
+          isRTL = _props6.isRTL;
 
@@ -489,5 +512,5 @@ var baseTranslateX = -100 * currentIndex;
       var translate = void 0;
-      var _props6 = this.props,
-          useTranslate3D = _props6.useTranslate3D,
-          isRTL = _props6.isRTL;
+      var _props7 = this.props,
+          useTranslate3D = _props7.useTranslate3D,
+          isRTL = _props7.isRTL;
       var thumbsTranslate = this.state.thumbsTranslate;
@@ -522,17 +545,17 @@
       var currentIndex = this.state.currentIndex;
-      var _props7 = this.props,
-          infinite = _props7.infinite,
-          items = _props7.items,
-          slideOnThumbnailOver = _props7.slideOnThumbnailOver,
-          onClick = _props7.onClick,
-          lazyLoad = _props7.lazyLoad,
-          onTouchMove = _props7.onTouchMove,
-          onTouchEnd = _props7.onTouchEnd,
-          onTouchStart = _props7.onTouchStart,
-          onMouseOver = _props7.onMouseOver,
-          onMouseLeave = _props7.onMouseLeave,
-          renderItem = _props7.renderItem,
-          renderThumbInner = _props7.renderThumbInner,
-          showThumbnails = _props7.showThumbnails,
-          showBullets = _props7.showBullets;
+      var _props8 = this.props,
+          infinite = _props8.infinite,
+          items = _props8.items,
+          slideOnThumbnailOver = _props8.slideOnThumbnailOver,
+          onClick = _props8.onClick,
+          lazyLoad = _props8.lazyLoad,
+          onTouchMove = _props8.onTouchMove,
+          onTouchEnd = _props8.onTouchEnd,
+          onTouchStart = _props8.onTouchStart,
+          onMouseOver = _props8.onMouseOver,
+          onMouseLeave = _props8.onMouseLeave,
+          renderItem = _props8.renderItem,
+          renderThumbInner = _props8.renderThumbInner,
+          showThumbnails = _props8.showThumbnails,
+          showBullets = _props8.showBullets;
 
@@ -735,5 +758,5 @@
     value: function canSlideLeft() {
-      var _props8 = this.props,
-          infinite = _props8.infinite,
-          isRTL = _props8.isRTL;
+      var _props9 = this.props,
+          infinite = _props9.infinite,
+          isRTL = _props9.isRTL;
 
@@ -745,5 +768,5 @@ return infinite || (isRTL ? this.canSlideNext() : this.canSlidePrevious());
     value: function canSlideRight() {
-      var _props9 = this.props,
-          infinite = _props9.infinite,
-          isRTL = _props9.isRTL;
+      var _props10 = this.props,
+          infinite = _props10.infinite,
+          isRTL = _props10.isRTL;
 
@@ -773,6 +796,6 @@ return infinite || (isRTL ? this.canSlidePrevious() : this.canSlideNext());
           dir = _ref.dir;
-      var _props10 = this.props,
-          preventDefaultTouchmoveEvent = _props10.preventDefaultTouchmoveEvent,
-          disableSwipe = _props10.disableSwipe,
-          stopPropagation = _props10.stopPropagation;
+      var _props11 = this.props,
+          preventDefaultTouchmoveEvent = _props11.preventDefaultTouchmoveEvent,
+          disableSwipe = _props11.disableSwipe,
+          stopPropagation = _props11.stopPropagation;
       var _state9 = this.state,
@@ -828,6 +851,6 @@ galleryWidth = _state9.galleryWidth,
           velocity = _ref2.velocity;
-      var _props11 = this.props,
-          disableSwipe = _props11.disableSwipe,
-          stopPropagation = _props11.stopPropagation,
-          flickThreshold = _props11.flickThreshold;
+      var _props12 = this.props,
+          disableSwipe = _props12.disableSwipe,
+          stopPropagation = _props12.stopPropagation,
+          flickThreshold = _props12.flickThreshold;
       var _state10 = this.state,
@@ -891,5 +914,5 @@ scrollingUpDown = _state10.scrollingUpDown,
     value: function handleKeyDown(event) {
-      var _props12 = this.props,
-          disableKeyDown = _props12.disableKeyDown,
-          useBrowserFullscreen = _props12.useBrowserFullscreen;
+      var _props13 = this.props,
+          disableKeyDown = _props13.disableKeyDown,
+          useBrowserFullscreen = _props13.useBrowserFullscreen;
       var isFullscreen = this.state.isFullscreen;
@@ -1009,5 +1032,5 @@ // keep track of mouse vs keyboard usage for a11y
       */
-      var _props13 = this.props,
-          onScreenChange = _props13.onScreenChange,
-          useBrowserFullscreen = _props13.useBrowserFullscreen;
+      var _props14 = this.props,
+          onScreenChange = _props14.onScreenChange,
+          useBrowserFullscreen = _props14.useBrowserFullscreen;
 
@@ -1027,6 +1050,6 @@ var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
           isTransitioning = _state12.isTransitioning;
-      var _props14 = this.props,
-          items = _props14.items,
-          slideDuration = _props14.slideDuration,
-          onBeforeSlide = _props14.onBeforeSlide;
+      var _props15 = this.props,
+          items = _props15.items,
+          slideDuration = _props15.slideDuration,
+          onBeforeSlide = _props15.onBeforeSlide;
 
@@ -1262,6 +1285,6 @@
       var shouldCallOnPlay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var _props15 = this.props,
-          onPlay = _props15.onPlay,
-          slideInterval = _props15.slideInterval,
-          slideDuration = _props15.slideDuration;
+      var _props16 = this.props,
+          onPlay = _props16.onPlay,
+          slideInterval = _props16.slideInterval,
+          slideDuration = _props16.slideDuration;
       var currentIndex = this.state.currentIndex;
@@ -1406,19 +1429,19 @@
           isPlaying = _state15.isPlaying;
-      var _props16 = this.props,
-          additionalClass = _props16.additionalClass,
-          indexSeparator = _props16.indexSeparator,
-          isRTL = _props16.isRTL,
-          items = _props16.items,
-          thumbnailPosition = _props16.thumbnailPosition,
-          renderFullscreenButton = _props16.renderFullscreenButton,
-          renderCustomControls = _props16.renderCustomControls,
-          renderLeftNav = _props16.renderLeftNav,
-          renderRightNav = _props16.renderRightNav,
-          showBullets = _props16.showBullets,
-          showFullscreenButton = _props16.showFullscreenButton,
-          showIndex = _props16.showIndex,
-          showThumbnails = _props16.showThumbnails,
-          showNav = _props16.showNav,
-          showPlayButton = _props16.showPlayButton,
-          renderPlayPauseButton = _props16.renderPlayPauseButton;
+      var _props17 = this.props,
+          additionalClass = _props17.additionalClass,
+          indexSeparator = _props17.indexSeparator,
+          isRTL = _props17.isRTL,
+          items = _props17.items,
+          thumbnailPosition = _props17.thumbnailPosition,
+          renderFullscreenButton = _props17.renderFullscreenButton,
+          renderCustomControls = _props17.renderCustomControls,
+          renderLeftNav = _props17.renderLeftNav,
+          renderRightNav = _props17.renderRightNav,
+          showBullets = _props17.showBullets,
+          showFullscreenButton = _props17.showFullscreenButton,
+          showIndex = _props17.showIndex,
+          showThumbnails = _props17.showThumbnails,
+          showNav = _props17.showNav,
+          showPlayButton = _props17.showPlayButton,
+          renderPlayPauseButton = _props17.renderPlayPauseButton;
 
@@ -1620,3 +1643,4 @@
   useTranslate3D: _propTypes.bool,
-  isRTL: _propTypes.bool
+  isRTL: _propTypes.bool,
+  useWindowKeyDown: _propTypes.bool
 };
@@ -1719,4 +1743,5 @@ ImageGallery.defaultProps = {
     );
-  }
+  },
+  useWindowKeyDown: true
 };
 exports.default = ImageGallery;

package.json

 {
   "name": "react-image-gallery",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -68,3 +68,3 @@ "main": "./build/image-gallery.js",
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0.0 || ^17.0.0"
   },
@@ -71,0 +71,0 @@ "dependencies": {

README.md

@@ -227,4 +227,5 @@ React Carousel Image Gallery
   ```
+* `useWindowKeyDown`: Boolean, default `true`
+  * If `false`, keydown events will be listened for on the image gallery
 
-
 # Functions
@@ -231,0 +232,0 @@

src/ImageGallery.jsx

@@ -111,2 +111,3 @@ import clsx from 'clsx';
     isRTL: bool,
+    useWindowKeyDown: bool,
   };
@@ -203,2 +204,3 @@
     ),
+    useWindowKeyDown: true,
   };
@@ -252,7 +254,11 @@
   componentDidMount() {
-    const { autoPlay } = this.props;
+    const { autoPlay, useWindowKeyDown } = this.props;
     if (autoPlay) {
       this.play();
     }
-    window.addEventListener('keydown', this.handleKeyDown);
+    if (useWindowKeyDown) {
+      window.addEventListener('keydown', this.handleKeyDown);
+    } else {
+      this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+    }
     window.addEventListener('mousedown', this.handleMouseDown);
@@ -271,2 +277,3 @@ this.initResizeObserver(this.imageGallerySlideWrapper);
       showThumbnails,
+      useWindowKeyDown
     } = this.props;
@@ -302,2 +309,12 @@ const { currentIndex } = this.state;
 
+    if (useWindowKeyDown !== prevProps.useWindowKeyDown) {
+      if (useWindowKeyDown) {
+        this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('keydown', this.handleKeyDown);
+      } else {
+        window.removeEventListener('keydown', this.handleKeyDown);
+        this.imageGallery.current.addEventListener('keydown', this.handleKeyDown);
+      }
+    } 
+
     if (startIndexUpdated || itemsChanged) {
@@ -311,3 +328,3 @@ // TODO: this should be fix/removed if all it is doing
   componentWillUnmount() {
-    window.removeEventListener('keydown', this.handleKeyDown);
+    const { useWindowKeyDown } = this.props
     window.removeEventListener('mousedown', this.handleMouseDown);
@@ -323,2 +340,7 @@ this.removeScreenChangeEvent();
     }
+    if (useWindowKeyDown) {
+      window.removeEventListener('keydown', this.handleKeyDown);
+    } else {
+      this.imageGallery.current.removeEventListener('keydown', this.handleKeyDown);
+    }
   }
@@ -325,0 +347,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141137

increased by1.39%

Lines of code

3418

increased by1.3%

Number of lines in readme file

263

increased by0.38%

No dependency changes