react-image-gallery - npm Package Compare versions

Comparing version 0.7.4 to 0.7.5

build/image-gallery.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _lodash = require('lodash.throttle');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,37 +33,2 @@
 var MIN_INTERVAL = 500;
-
-function throttle(func, wait) {
-  var context = void 0,
-      args = void 0,
-      result = void 0;
-  var timeout = null;
-  var previous = 0;
-
-  var later = function later() {
-    previous = new Date().getTime();
-    timeout = null;
-    result = func.apply(context, args);
-    if (!timeout) context = args = null;
-  };
-
-  return function () {
-    var now = new Date().getTime();
-    var remaining = wait - (now - previous);
-    context = this;
-    args = arguments;
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-      previous = now;
-      result = func.apply(context, args);
-      if (!timeout) context = args = null;
-    } else if (!timeout) {
-      timeout = setTimeout(later, remaining);
-    }
-    return result;
-  };
-}
-
 var screenChangeEvents = ['fullscreenchange', 'msfullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange'];
@@ -118,4 +87,4 @@
     value: function componentWillMount() {
-      this._slideLeft = throttle(this._slideLeft.bind(this), MIN_INTERVAL, true);
-      this._slideRight = throttle(this._slideRight.bind(this), MIN_INTERVAL, true);
+      this._slideLeft = (0, _lodash2.default)(this._slideLeft.bind(this), MIN_INTERVAL, true);
+      this._slideRight = (0, _lodash2.default)(this._slideRight.bind(this), MIN_INTERVAL, true);
       this._handleResize = this._handleResize.bind(this);
@@ -778,2 +747,3 @@ this._handleScreenChange = this._handleScreenChange.bind(this);
             { className: 'image-gallery-slide-wrapper' },
+            this.props.renderCustomControls && this.props.renderCustomControls(),
             this.props.showFullscreenButton && _react2.default.createElement('a', {
@@ -883,5 +853,2 @@ className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
 
-exports.default = ImageGallery;
-
-
 ImageGallery.propTypes = {
@@ -914,5 +881,5 @@ items: _react2.default.PropTypes.array.isRequired,
   onThumbnailError: _react2.default.PropTypes.func,
+  renderCustomControls: _react2.default.PropTypes.func,
   renderItem: _react2.default.PropTypes.func
 };
-
 ImageGallery.defaultProps = {
@@ -936,2 +903,3 @@ items: [],
   slideInterval: 3000
-};
+};
+exports.default = ImageGallery;

gulpfile.js

@@ -15,2 +15,7 @@ var babel = require('gulp-babel');
 
+var babelOptions = {
+  plugins: ['transform-object-assign'],
+  presets: ['es2015', 'react', 'stage-0']
+};
+
 gulp.task('server', function () {
@@ -38,6 +43,3 @@ connect.server({
     debug: true
-  }).transform('babelify', {
-      plugins: ['transform-object-assign'],
-      presets: ['es2015', 'react']
-    }))
+  }).transform('babelify', babelOptions))
     .bundle()
@@ -56,6 +58,3 @@ .pipe(source('example.js'))
     debug: true
-  }).transform('babelify', {
-      plugins: ['transform-object-assign'],
-      presets: ['es2015', 'react']
-    })
+  }).transform('babelify', babelOptions)
     .bundle()
@@ -76,6 +75,3 @@ .pipe(source('demo.js'))
     .pipe(concat('image-gallery.js'))
-    .pipe(babel({
-      plugins: ['transform-object-assign'],
-      presets: ['es2015', 'react']
-    }))
+    .pipe(babel(babelOptions))
     .pipe(gulp.dest('./build'));
@@ -82,0 +78,0 @@ });

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "React Carousel, React Image gallery, React Slide Show component",
@@ -42,4 +42,5 @@ "main": "./build/image-gallery",
     "babel-preset-react": "^6.5.0",
-    "babelify": "^7.2.0",
-    "browserify": "^13.0.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.1.1",
     "eslint": "^2.10.2",
@@ -49,8 +50,8 @@ "eslint-plugin-react": "^5.1.1",
     "gulp-babel": "^6.1.2",
-    "gulp-clean-css": "^2.0.12",
+    "gulp-clean-css": "^2.3.1",
     "gulp-concat": "^2.6.0",
-    "gulp-connect": "^2.2.0",
+    "gulp-connect": "^3.2.2",
     "gulp-livereload": "^3.8.0",
     "gulp-rename": "^1.2.0",
-    "gulp-sass": "^2.1.1",
+    "gulp-sass": "^2.3.2",
     "gulp-uglify": "^1.5.3",
@@ -60,8 +61,9 @@ "react": "^15.3.0",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.0.0",
-    "watchify": "^2.4.0"
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.8.0"
   },
   "dependencies": {
+    "lodash.throttle": "^4.1.1",
     "react-swipeable": "^3.5.1"
   }
 }

README.md

@@ -125,2 +125,9 @@ React Image Gallery
 * `onClick`: Function, `callback(event)`
+* `renderCustomControls`: Function, custom controls rendering
+  * Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)
+  ```javascript
+    _renderCustomControls() {
+      return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/>
+    }
+  ```
 * `renderItem`: Function, custom item rendering
@@ -127,0 +134,0 @@ * As a prop on a specific item `[{thumbnail: '...', renderItem: '...'}]`

src/ImageGallery.jsx

 import React from 'react';
 import Swipeable from 'react-swipeable';
+import throttle from 'lodash.throttle';
 
 const MIN_INTERVAL = 500;
-
-function throttle(func, wait) {
-  let context, args, result;
-  let timeout = null;
-  let previous = 0;
-
-  let later = function() {
-    previous = new Date().getTime();
-    timeout = null;
-    result = func.apply(context, args);
-    if (!timeout) context = args = null;
-  };
-
-  return function() {
-    let now = new Date().getTime();
-    let remaining = wait - (now - previous);
-    context = this;
-    args = arguments;
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-      previous = now;
-      result = func.apply(context, args);
-      if (!timeout) context = args = null;
-    } else if (!timeout) {
-      timeout = setTimeout(later, remaining);
-    }
-    return result;
-  };
-
-}
-
 const screenChangeEvents = [
@@ -46,2 +13,3 @@ 'fullscreenchange',
 
+
 export default class ImageGallery extends React.Component {
@@ -62,2 +30,53 @@
 
+  static propTypes = {
+    items: React.PropTypes.array.isRequired,
+    showNav: React.PropTypes.bool,
+    autoPlay: React.PropTypes.bool,
+    lazyLoad: React.PropTypes.bool,
+    infinite: React.PropTypes.bool,
+    showIndex: React.PropTypes.bool,
+    showBullets: React.PropTypes.bool,
+    showThumbnails: React.PropTypes.bool,
+    showPlayButton: React.PropTypes.bool,
+    showFullscreenButton: React.PropTypes.bool,
+    slideOnThumbnailHover: React.PropTypes.bool,
+    disableThumbnailScroll: React.PropTypes.bool,
+    disableArrowKeys: React.PropTypes.bool,
+    disableSwipe: React.PropTypes.bool,
+    defaultImage: React.PropTypes.string,
+    indexSeparator: React.PropTypes.string,
+    startIndex: React.PropTypes.number,
+    slideInterval: React.PropTypes.number,
+    onSlide: React.PropTypes.func,
+    onScreenChange: React.PropTypes.func,
+    onPause: React.PropTypes.func,
+    onPlay: React.PropTypes.func,
+    onClick: React.PropTypes.func,
+    onImageLoad: React.PropTypes.func,
+    onImageError: React.PropTypes.func,
+    onThumbnailError: React.PropTypes.func,
+    renderCustomControls: React.PropTypes.func,
+    renderItem: React.PropTypes.func,
+  };
+
+  static defaultProps = {
+    items: [],
+    showNav: true,
+    autoPlay: false,
+    lazyLoad: false,
+    infinite: true,
+    showIndex: false,
+    showBullets: false,
+    showThumbnails: true,
+    showPlayButton: true,
+    showFullscreenButton: true,
+    slideOnThumbnailHover: false,
+    disableThumbnailScroll: false,
+    disableArrowKeys: false,
+    disableSwipe: false,
+    indexSeparator: ' / ',
+    startIndex: 0,
+    slideInterval: 3000,
+  };
+
   componentWillReceiveProps(nextProps) {
@@ -706,2 +725,4 @@ if (this.props.disableArrowKeys !== nextProps.disableArrowKeys) {
 
+            {this.props.renderCustomControls && this.props.renderCustomControls()}
+
             {
@@ -813,51 +834,1 @@ this.props.showFullscreenButton &&
 }
-
-ImageGallery.propTypes = {
-  items: React.PropTypes.array.isRequired,
-  showNav: React.PropTypes.bool,
-  autoPlay: React.PropTypes.bool,
-  lazyLoad: React.PropTypes.bool,
-  infinite: React.PropTypes.bool,
-  showIndex: React.PropTypes.bool,
-  showBullets: React.PropTypes.bool,
-  showThumbnails: React.PropTypes.bool,
-  showPlayButton: React.PropTypes.bool,
-  showFullscreenButton: React.PropTypes.bool,
-  slideOnThumbnailHover: React.PropTypes.bool,
-  disableThumbnailScroll: React.PropTypes.bool,
-  disableArrowKeys: React.PropTypes.bool,
-  disableSwipe: React.PropTypes.bool,
-  defaultImage: React.PropTypes.string,
-  indexSeparator: React.PropTypes.string,
-  startIndex: React.PropTypes.number,
-  slideInterval: React.PropTypes.number,
-  onSlide: React.PropTypes.func,
-  onScreenChange: React.PropTypes.func,
-  onPause: React.PropTypes.func,
-  onPlay: React.PropTypes.func,
-  onClick: React.PropTypes.func,
-  onImageLoad: React.PropTypes.func,
-  onImageError: React.PropTypes.func,
-  onThumbnailError: React.PropTypes.func,
-  renderItem: React.PropTypes.func,
-};
-
-ImageGallery.defaultProps = {
-  items: [],
-  showNav: true,
-  autoPlay: false,
-  lazyLoad: false,
-  infinite: true,
-  showIndex: false,
-  showBullets: false,
-  showThumbnails: true,
-  showPlayButton: true,
-  showFullscreenButton: true,
-  slideOnThumbnailHover: false,
-  disableThumbnailScroll: false,
-  disableArrowKeys: false,
-  disableSwipe: false,
-  indexSeparator: ' / ',
-  startIndex: 0,
-  slideInterval: 3000
-};

No alert changes

Improved metrics

Number of package files

14

increased by7.69%

Number of lines in readme file

188

increased by3.87%

Worsened metrics

Total package byte prevSize

85852

decreased by-0.31%

Dependency count

2

increased by100%

Dev dependency count

23

increased by4.55%

Lines of code

1994

decreased by-2.78%

Dependency changes

• + Addedlodash.throttle@^4.1.1

• + Addedlodash.throttle@4.1.1(transitive)