react-image-gallery - npm Package Compare versions

Comparing version 0.6.3 to 0.6.4

build/image-gallery.js

@@ -7,26 +7,6 @@ 'use strict';
 
-var _assign = require('babel-runtime/core-js/object/assign');
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _assign2 = _interopRequireDefault(_assign);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
 var _react = require('react');
@@ -42,2 +22,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var MIN_INTERVAL = 500;
@@ -93,8 +79,8 @@
 var ImageGallery = function (_React$Component) {
-  (0, _inherits3.default)(ImageGallery, _React$Component);
+  _inherits(ImageGallery, _React$Component);
 
   function ImageGallery(props) {
-    (0, _classCallCheck3.default)(this, ImageGallery);
+    _classCallCheck(this, ImageGallery);
 
-    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ImageGallery).call(this, props));
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ImageGallery).call(this, props));
 
@@ -115,3 +101,3 @@ _this.state = {
 
-  (0, _createClass3.default)(ImageGallery, [{
+  _createClass(ImageGallery, [{
     key: 'componentDidUpdate',
@@ -473,3 +459,3 @@ value: function componentDidUpdate(prevProps, prevState) {
 
-      if (this.props.infinite && this.props.items.length > 1) {
+      if (this.props.infinite && this.props.items.length > 2) {
         if (currentIndex === 0 && index === totalSlides) {
@@ -525,2 +511,25 @@ // make the last slide the slide before the first
   }, {
+    key: '_renderItem',
+    value: function _renderItem(item) {
+      var onImageError = this.props.onImageError || this._handleImageError;
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'image-gallery-image' },
+        _react2.default.createElement('img', {
+          src: item.original,
+          alt: item.originalAlt,
+          srcSet: item.srcSet,
+          sizes: item.sizes,
+          onLoad: this.props.onImageLoad,
+          onError: onImageError.bind(this)
+        }),
+        item.description && _react2.default.createElement(
+          'span',
+          { className: 'image-gallery-description' },
+          item.description
+        )
+      );
+    }
+  }, {
     key: 'render',
@@ -546,6 +555,4 @@ value: function render() {
 
-        var onImageError = _this5._handleImageError;
-        if (_this5.props.onImageError) {
-          onImageError = _this5.props.onImageError;
-        }
+        var renderItem = item.renderItem || _this5.props.renderItem || _this5._renderItem.bind(_this5);
+
         var slide = _react2.default.createElement(
@@ -556,22 +563,6 @@ 'div',
             className: 'image-gallery-slide' + alignment + originalClass,
-            style: (0, _assign2.default)(_this5._getSlideStyle(index), _this5.state.style),
+            style: _extends(_this5._getSlideStyle(index), _this5.state.style),
             onClick: _this5.props.onClick
           },
-          _react2.default.createElement(
-            'div',
-            { className: 'image-gallery-image' },
-            _react2.default.createElement('img', {
-              src: item.original,
-              alt: item.originalAlt,
-              srcSet: item.srcSet,
-              sizes: item.sizes,
-              onLoad: _this5.props.onImageLoad,
-              onError: onImageError.bind(_this5)
-            }),
-            item.description && _react2.default.createElement(
-              'span',
-              { className: 'image-gallery-description' },
-              item.description
-            )
-          )
+          renderItem(item)
         );
@@ -718,2 +709,3 @@
   }]);
+
   return ImageGallery;
@@ -747,3 +739,4 @@ }(_react2.default.Component);
   onImageError: _react2.default.PropTypes.func,
-  onThumbnailError: _react2.default.PropTypes.func
+  onThumbnailError: _react2.default.PropTypes.func,
+  renderItem: _react2.default.PropTypes.func
 };
@@ -750,0 +743,0 @@

gulpfile.js

@@ -37,3 +37,3 @@ var babel = require('gulp-babel')
   }).transform('babelify', {
-      plugins: ['transform-runtime'],
+      plugins: ['transform-object-assign'],
       presets: ['es2015', 'react']
@@ -55,3 +55,3 @@ }))
   }).transform('babelify', {
-      plugins: ['transform-runtime'],
+      plugins: ['transform-object-assign'],
       presets: ['es2015', 'react']
@@ -70,3 +70,3 @@ })
     .pipe(babel({
-      plugins: ['transform-runtime'],
+      plugins: ['transform-object-assign'],
       presets: ['es2015', 'react']
@@ -73,0 +73,0 @@ }))

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "React Carousel, React Image gallery, React Slide Show component",
   "main": "./build/image-gallery",
   "scripts": {
-    "start": "gulp dev"
+    "start": "gulp dev",
+    "build": "gulp build"
   },
@@ -38,6 +39,5 @@ "repository": {
     "babel-eslint": "^6.0.4",
-    "babel-plugin-transform-runtime": "^6.7.5",
+    "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
-    "babel-runtime": "^6.6.1",
     "babelify": "^7.2.0",
@@ -44,0 +44,0 @@ "browserify": "^13.0.0",

README.md

@@ -7,3 +7,3 @@ React Image Gallery
 
-![http://i.imgur.com/bxa4s9f.gif](http://i.imgur.com/bxa4s9f.gif)
+![demo gif](https://github.com/xiaolin/react-image-gallery/raw/master/example/image_gallery.gif)
 
@@ -128,4 +128,31 @@ React image gallery is a React component for building image gallery and carousels
 * `onClick`: Function, `callback(event)`
+* `renderItem`: Function, custom item rendering
+  * As a prop on a specific item `[{thumbnail: '...', renderItem: '...'}]`
+  * As a prop passed into `ImageGallery` to completely override `_renderItem`, see original below
+    ```javascript
+      _renderItem(item) {
+        const onImageError = this.props.onImageError || this._handleImageError
 
+        return (
+          <div className='image-gallery-image'>
+            <img
+                src={item.original}
+                alt={item.originalAlt}
+                srcSet={item.srcSet}
+                sizes={item.sizes}
+                onLoad={this.props.onImageLoad}
+                onError={onImageError.bind(this)}
+            />
+            {
+              item.description &&
+                <span className='image-gallery-description'>
+                  {item.description}
+                </span>
+            }
+          </div>
+        )
+      }
+    ```
 
+
 # functions
@@ -132,0 +159,0 @@

src/ImageGallery.jsx

@@ -390,3 +390,3 @@ import React from 'react'
 
-    if (this.props.infinite && this.props.items.length > 1) {
+    if (this.props.infinite && this.props.items.length > 2) {
       if (currentIndex === 0 && index === totalSlides) {
@@ -439,2 +439,25 @@ // make the last slide the slide before the first
 
+  _renderItem(item) {
+    const onImageError = this.props.onImageError || this._handleImageError
+
+    return (
+      <div className='image-gallery-image'>
+        <img
+            src={item.original}
+            alt={item.originalAlt}
+            srcSet={item.srcSet}
+            sizes={item.sizes}
+            onLoad={this.props.onImageLoad}
+            onError={onImageError.bind(this)}
+        />
+        {
+          item.description &&
+            <span className='image-gallery-description'>
+              {item.description}
+            </span>
+        }
+      </div>
+    )
+  }
+
   render() {
@@ -458,6 +481,5 @@ const {currentIndex} = this.state
 
-      let onImageError = this._handleImageError
-      if (this.props.onImageError) {
-        onImageError = this.props.onImageError
-      }
+      const renderItem = item.renderItem ||
+        this.props.renderItem || this._renderItem.bind(this)
+
       const slide = (
@@ -470,18 +492,3 @@ <div
         >
-          <div className='image-gallery-image'>
-            <img
-              src={item.original}
-              alt={item.originalAlt}
-              srcSet={item.srcSet}
-              sizes={item.sizes}
-              onLoad={this.props.onImageLoad}
-              onError={onImageError.bind(this)}
-            />
-            {
-              item.description &&
-                <span className='image-gallery-description'>
-                  {item.description}
-                </span>
-            }
-          </div>
+          {renderItem(item)}
         </div>
@@ -652,3 +659,4 @@ )
   onImageError: React.PropTypes.func,
-  onThumbnailError: React.PropTypes.func
+  onThumbnailError: React.PropTypes.func,
+  renderItem: React.PropTypes.func,
 }
@@ -655,0 +663,0 @@

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

21

decreased by-4.55%

Number of lines in readme file

182

increased by17.42%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

251581

decreased by-9.13%

Lines of code

2088

decreased by-5.39%

No dependency changes