react-image-gallery - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

.eslintrc.json

 {
-    "extends": [
-        "airbnb"
-    ],
-    "parser": "babel-eslint",
-    "plugins": ["react", "jsx-a11y", "import"],
-    "env": {
-        "browser": true,
-        "node": true
-    }
+  "extends": [
+    "airbnb"
+  ],
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/no-array-index-key": "off"
+  },
+  "parser": "babel-eslint",
+  "plugins": ["react", "jsx-a11y", "import"],
+  "env": {
+    "browser": true,
+    "jest": true,
+    "node": true
+  }
 }

build/image-gallery.js

@@ -141,2 +141,3 @@ 'use strict';
           slideDuration = _props2.slideDuration,
+          slideInterval = _props2.slideInterval,
           startIndex = _props2.startIndex,
@@ -154,2 +155,8 @@ thumbnailPosition = _props2.thumbnailPosition,
 
+      if (slideInterval !== prevProps.slideInterval || slideDuration !== prevProps.slideDuration) {
+        // refresh setInterval
+        this.pause();
+        this.play();
+      }
+
       if (thumbnailsPositionChanged) {
@@ -186,4 +193,3 @@ // re-initialize resizeObserver because slides was unmounted and mounted again
       if (startIndexUpdated || itemsChanged) {
-        // TODO: this should be fix/removed if all it is doing
-        // is resetting the gallery currentIndext state
+        // TODO: this should be fix/removed
         this.setState({ currentIndex: startIndex });
@@ -238,3 +244,5 @@ }
       var onThumbnailClick = this.props.onThumbnailClick;
+      // blur element to remove outline cause by focus
 
+      event.target.parentNode.parentNode.blur();
       this.slideToIndex(index, event);
@@ -577,3 +585,3 @@ if (onThumbnailClick) {
             'aria-label': 'Go to Slide ' + (index + 1),
-            key: 'slide-' + item.original + '-' + index,
+            key: 'slide-' + index,
             tabIndex: '-1',
@@ -609,3 +617,3 @@ className: 'image-gallery-slide ' + alignment + ' ' + originalClass,
             {
-              key: 'thumbnail-' + item.original + '-' + index,
+              key: 'thumbnail-' + index,
               type: 'button',
@@ -640,2 +648,4 @@ tabIndex: '0',
             }
+            // blur element to remove outline cause by focus
+            event.target.blur();
             return _this4.slideToIndex.call(_this4, index, event);
@@ -646,3 +656,3 @@ };
             type: 'button',
-            key: 'bullet-' + item.original + '-' + index,
+            key: 'bullet-' + index,
             className: igBulletClass,
@@ -956,2 +966,3 @@ onClick: bulletOnClick,
         this.resizeObserver.unobserve(this.imageGallerySlideWrapper.current);
+        this.resizeObserver = null;
       }
@@ -964,2 +975,8 @@ }
 
+      // if there is no resizeObserver, component has been unmounted
+
+      if (!this.resizeObserver) {
+        return;
+      }
+
       if (this.imageGallery && this.imageGallery.current) {
@@ -1357,3 +1374,3 @@ this.setState({ galleryWidth: this.imageGallery.current.offsetWidth });
             return _react2.default.createElement('source', {
-              key: 'media-' + source.srcSet + '-' + index,
+              key: 'media-' + index,
               media: source.media,
@@ -1367,3 +1384,5 @@ srcSet: source.srcSet,
             alt: item.originalAlt,
-            src: itemSrc
+            src: itemSrc,
+            height: item.height,
+            width: item.width
           })
@@ -1375,2 +1394,4 @@ ) : _react2.default.createElement('img', {
           srcSet: item.srcSet,
+          height: item.height,
+          width: item.width,
           sizes: item.sizes,
@@ -1398,3 +1419,3 @@ title: item.originalTitle,
       return _react2.default.createElement(
-        'div',
+        'span',
         { className: 'image-gallery-thumbnail-inner' },
@@ -1572,3 +1593,5 @@ _react2.default.createElement('img', {
     description: _propTypes.string,
-    original: _propTypes.string.isRequired,
+    original: _propTypes.string,
+    height: _propTypes.number,
+    width: _propTypes.number,
     fullscreen: _propTypes.string,
@@ -1575,0 +1598,0 @@ originalAlt: _propTypes.string,

gulpfile.js

@@ -40,3 +40,3 @@ const babel = require('gulp-babel');
     entries: './example/app.js',
-    extensions: ['.jsx'],
+    extensions: ['.js'],
     debug: true,
@@ -56,3 +56,3 @@ }).transform('babelify', babelOptions))
     entries: './example/app.js',
-    extensions: ['.jsx'],
+    extensions: ['.js'],
     debug: true,
@@ -73,3 +73,3 @@ }).transform('babelify', babelOptions)
 gulp.task('source-js', () => (
-  gulp.src('./src/ImageGallery.jsx')
+  gulp.src('./src/ImageGallery.js')
     .pipe(concat('image-gallery.js'))
@@ -81,3 +81,3 @@ .pipe(babel(babelOptions))
 gulp.task('svg-js', () => (
-  gulp.src('./src/SVG.jsx')
+  gulp.src('./src/SVG.js')
     .pipe(concat('SVG.js'))
@@ -91,3 +91,3 @@ .pipe(babel(babelOptions))
   gulp.watch(['styles/**/*.scss'], ['sass']);
-  gulp.watch(['src/*.jsx', 'src/icons/*.jsx', 'example/app.js'], ['scripts']);
+  gulp.watch(['src/*.js', 'src/icons/*.js', 'example/app.js'], ['scripts']);
 });
@@ -94,0 +94,0 @@

package.json

 {
   "name": "react-image-gallery",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -8,5 +8,9 @@ "main": "./build/image-gallery.js",
     "start": "gulp dev",
-    "build": "gulp build",
+    "test": "jest",
+    "build": "yarn test && gulp build",
     "lint": "eslint --ext .js,.jsx src"
   },
+  "engines": {
+    "node": "<12"
+  },
   "repository": {
@@ -16,2 +20,7 @@ "type": "git",
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/setupTestFramework.js"
+    ]
+  },
   "style": "styles/css/image-gallery.css",
@@ -42,3 +51,8 @@ "keywords": [
   "devDependencies": {
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-react": "^7.12.13",
     "babel-eslint": "^10.0.2",
+    "babel-jest": "^26.6.3",
     "babel-plugin-transform-object-assign": "^6.8.0",
@@ -50,2 +64,4 @@ "babel-preset-es2015": "^6.6.0",
     "browserify": "^13.1.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^5.4.0",
@@ -60,9 +76,10 @@ "eslint-config-airbnb": "^17.1.1",
     "gulp-concat": "^2.6.0",
-    "gulp-connect": "^3.2.2",
+    "gulp-connect": "^5.7.0",
     "gulp-livereload": "^3.8.0",
     "gulp-rename": "^1.2.0",
-    "gulp-sass": "^2.3.2",
+    "gulp-sass": "^4.1.0",
     "gulp-uglify": "^1.5.3",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "jest": "^26.6.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "vinyl-buffer": "^1.0.0",
@@ -69,0 +86,0 @@ "vinyl-source-stream": "^1.1.0",

README.md

@@ -1,2 +0,2 @@
-React Carousel Image Gallery
+React Image Gallery
 ===
@@ -76,2 +76,4 @@
     * `fullscreen` - image for fullscreen (defaults to original)
+    * `height` - image height (html5 attribute)
+    * `width` - image width (html5 attribute)
     * `originalClass` - custom image class
@@ -229,3 +231,4 @@ * `thumbnailClass` - custom thumbnail class
 * `useWindowKeyDown`: Boolean, default `true`
-  * If `false`, keydown events will be listened for on the image gallery
+  * If `true`, listens to keydown events on window (window.addEventListener)
+  * If `false`, listens to keydown events on image gallery element (imageGalleryElement.addEventListener)
 
@@ -251,3 +254,3 @@ # Functions
 
-# Build the example locally
+# Build the example locally (requires node <= 11)
 
@@ -257,4 +260,4 @@ ```
 cd react-image-gallery
-npm install
-npm start
+yarn install
+yarn start
 ```
@@ -261,0 +264,0 @@

No alert changes

Improved metrics

Total package byte prevSize

144880

increased by2.65%

Number of package files

15

increased by36.36%

Lines of code

3502

increased by2.46%

Number of lines in readme file

266

increased by1.14%

Worsened metrics

Dev dependency count

34

increased by30.77%

No dependency changes