update build files

.github/HISTORY.md

@@ -1,10 +1,13 @@
 # React-Images
 
+### v0.5.15 / 2018-01-25
+- spinner functionality pull request #187 thanks to [mkalygin] (https://github.com/(https://github.com/mkalygin)
+
 ### v0.5.13 / 2017-11-29
 - change srcset to srcSet to fix intermittent warning: Invalid DOM property `srcset`. Did you mean `srcSet`?
 
 ### v0.5.12 / 2017-11-29
-- Fix React warning issue #171 thanks to [kachkaev] (https://github.com/(https://github.com/smeijer)
+- Fix React warning issue #171 thanks to [kachkaev] (https://github.com/(https://github.com/kachkaev)
 
 ### v0.5.10 / 2017-10-18
 - New build

dist/react-images.es.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Children, Component } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 import ScrollLock from 'react-scrolllock';
+import { BounceLoader } from 'react-spinners';
 import { StyleSheet as StyleSheet$1, css as css$1 } from 'aphrodite/no-important';
 import { CSSTransitionGroup } from 'react-transition-group';
 import { render } from 'react-dom';
@@ -948,7 +949,9 @@ var Lightbox = function (_Component) {
 
  _this.theme = deepMerge(theme, props.theme);
  _this.classes = StyleSheet.create(deepMerge(defaultStyles, _this.theme));
- bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput']);
+ _this.state = { imageLoaded: false };
+
+ bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput', 'handleImageLoaded']);
  return _this;
  }
 
@@ -994,6 +997,12 @@ var Lightbox = function (_Component) {
  }
  }
 
+ // preload current image
+ if (this.props.currentImage !== nextProps.currentImage || !this.props.isOpen && nextProps.isOpen) {
+ var img = this.preloadImage(nextProps.currentImage, this.handleImageLoaded);
+ this.setState({ imageLoaded: img.complete });
+ }
+
  // add/remove event listeners
  if (!this.props.isOpen && nextProps.isOpen && nextProps.enableKeyboardInput) {
  window.addEventListener('keydown', this.handleKeyboardInput);
@@ -1016,33 +1025,54 @@ var Lightbox = function (_Component) {
 
  }, {
  key: 'preloadImage',
- value: function preloadImage(idx) {
+ value: function preloadImage(idx, onload) {
  var image = this.props.images[idx];
  if (!image) return;
 
  var img = new Image();
 
+ // TODO: add error handling for missing images
+ img.onerror = onload;
+ img.onload = onload;
  img.src = image.src;
  img.srcSet = image.srcSet || image.srcset;
+
+ if (img.srcSet) img.setAttribute('srcset', img.srcSet);
+
+ return img;
  }
  }, {
  key: 'gotoNext',
  value: function gotoNext(event) {
- if (this.props.currentImage === this.props.images.length - 1) return;
+ var _props = this.props,
+ currentImage = _props.currentImage,
+ images = _props.images;
+ var imageLoaded = this.state.imageLoaded;
+
+
+ if (!imageLoaded || currentImage === images.length - 1) return;
+
  if (event) {
  event.preventDefault();
  event.stopPropagation();
  }
+
  this.props.onClickNext();
  }
  }, {
  key: 'gotoPrev',
  value: function gotoPrev(event) {
- if (this.props.currentImage === 0) return;
+ var currentImage = this.props.currentImage;
+ var imageLoaded = this.state.imageLoaded;
+
+
+ if (!imageLoaded || currentImage === 0) return;
+
  if (event) {
  event.preventDefault();
  event.stopPropagation();
  }
+
  this.props.onClickPrev();
  }
  }, {
@@ -1072,6 +1102,11 @@ var Lightbox = function (_Component) {
  }
  return false;
  }
+ }, {
+ key: 'handleImageLoaded',
+ value: function handleImageLoaded() {
+ this.setState({ imageLoaded: true });
+ }
 
  // ==============================
  // RENDERERS
@@ -1106,14 +1141,12 @@ var Lightbox = function (_Component) {
  }, {
  key: 'renderDialog',
  value: function renderDialog() {
- var _props = this.props,
- backdropClosesModal = _props.backdropClosesModal,
- customControls = _props.customControls,
- isOpen = _props.isOpen,
- onClose = _props.onClose,
- showCloseButton = _props.showCloseButton,
- showThumbnails = _props.showThumbnails,
- width = _props.width;
+ var _props2 = this.props,
+ backdropClosesModal = _props2.backdropClosesModal,
+ isOpen = _props2.isOpen,
+ showThumbnails = _props2.showThumbnails,
+ width = _props2.width;
+ var imageLoaded = this.state.imageLoaded;
 
 
  if (!isOpen) return React.createElement('span', { key: 'closed' });
@@ -1132,31 +1165,31 @@ var Lightbox = function (_Component) {
  },
  React.createElement(
  'div',
- { className: css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } },
- React.createElement(Header, {
- customControls: customControls,
- onClose: onClose,
- showCloseButton: showCloseButton,
- closeButtonTitle: this.props.closeButtonTitle
- }),
- this.renderImages()
- ),
- this.renderThumbnails(),
- this.renderArrowPrev(),
- this.renderArrowNext(),
- React.createElement(ScrollLock, null)
+ null,
+ React.createElement(
+ 'div',
+ { className: css(this.classes.content), style: { marginBottom: offsetThumbnails, maxWidth: width } },
+ imageLoaded && this.renderHeader(),
+ this.renderImages(),
+ this.renderSpinner(),
+ imageLoaded && this.renderFooter()
+ ),
+ imageLoaded && this.renderThumbnails(),
+ imageLoaded && this.renderArrowPrev(),
+ imageLoaded && this.renderArrowNext(),
+ React.createElement(ScrollLock, null)
+ )
  );
  }
  }, {
  key: 'renderImages',
  value: function renderImages() {
- var _props2 = this.props,
- currentImage = _props2.currentImage,
- images = _props2.images,
- imageCountSeparator = _props2.imageCountSeparator,
- onClickImage = _props2.onClickImage,
- showImageCount = _props2.showImageCount,
- showThumbnails = _props2.showThumbnails;
+ var _props3 = this.props,
+ currentImage = _props3.currentImage,
+ images = _props3.images,
+ onClickImage = _props3.onClickImage,
+ showThumbnails = _props3.showThumbnails;
+ var imageLoaded = this.state.imageLoaded;
 
 
  if (!images || !images.length) return null;
@@ -1179,7 +1212,7 @@ var Lightbox = function (_Component) {
  'figure',
  { className: css(this.classes.figure) },
  React.createElement('img', {
- className: css(this.classes.image),
+ className: css(this.classes.image, imageLoaded && this.classes.imageLoaded),
  onClick: onClickImage,
  sizes: sizes,
  alt: image.alt,
@@ -1189,25 +1222,18 @@ var Lightbox = function (_Component) {
  cursor: onClickImage ? 'pointer' : 'auto',
  maxHeight: 'calc(100vh - ' + heightOffset + ')'
  }
- }),
- React.createElement(Footer, {
- caption: images[currentImage].caption,
- countCurrent: currentImage + 1,
- countSeparator: imageCountSeparator,
- countTotal: images.length,
- showCount: showImageCount
  })
  );
  }
  }, {
  key: 'renderThumbnails',
  value: function renderThumbnails() {
- var _props3 = this.props,
- images = _props3.images,
- currentImage = _props3.currentImage,
- onClickThumbnail = _props3.onClickThumbnail,
- showThumbnails = _props3.showThumbnails,
- thumbnailOffset = _props3.thumbnailOffset;
+ var _props4 = this.props,
+ images = _props4.images,
+ currentImage = _props4.currentImage,
+ onClickThumbnail = _props4.onClickThumbnail,
+ showThumbnails = _props4.showThumbnails,
+ thumbnailOffset = _props4.thumbnailOffset;
 
 
  if (!showThumbnails) return;
@@ -1219,6 +1245,63 @@ var Lightbox = function (_Component) {
  onClickThumbnail: onClickThumbnail
  });
  }
+ }, {
+ key: 'renderHeader',
+ value: function renderHeader() {
+ var _props5 = this.props,
+ closeButtonTitle = _props5.closeButtonTitle,
+ customControls = _props5.customControls,
+ onClose = _props5.onClose,
+ showCloseButton = _props5.showCloseButton;
+
+
+ return React.createElement(Header, {
+ customControls: customControls,
+ onClose: onClose,
+ showCloseButton: showCloseButton,
+ closeButtonTitle: closeButtonTitle
+ });
+ }
+ }, {
+ key: 'renderFooter',
+ value: function renderFooter() {
+ var _props6 = this.props,
+ currentImage = _props6.currentImage,
+ images = _props6.images,
+ imageCountSeparator = _props6.imageCountSeparator,
+ showImageCount = _props6.showImageCount;
+
+
+ if (!images || !images.length) return null;
+
+ return React.createElement(Footer, {
+ caption: images[currentImage].caption,
+ countCurrent: currentImage + 1,
+ countSeparator: imageCountSeparator,
+ countTotal: images.length,
+ showCount: showImageCount
+ });
+ }
+ }, {
+ key: 'renderSpinner',
+ value: function renderSpinner() {
+ var _props7 = this.props,
+ spinner = _props7.spinner,
+ spinnerColor = _props7.spinnerColor,
+ spinnerSize = _props7.spinnerSize;
+ var imageLoaded = this.state.imageLoaded;
+
+ var Spinner = spinner;
+
+ return React.createElement(
+ 'div',
+ { className: css(this.classes.spinner, !imageLoaded && this.classes.spinnerActive) },
+ React.createElement(Spinner, {
+ color: spinnerColor,
+ size: spinnerSize
+ })
+ );
+ }
  }, {
  key: 'render',
  value: function render$$1() {
@@ -1232,6 +1315,10 @@ var Lightbox = function (_Component) {
  return Lightbox;
 }(Component);
 
+var DefaultSpinner = function DefaultSpinner(props) {
+ return React.createElement(BounceLoader, props);
+};
+
 Lightbox.propTypes = {
  backdropClosesModal: PropTypes.bool,
  closeButtonTitle: PropTypes.string,
@@ -1256,6 +1343,9 @@ Lightbox.propTypes = {
  showCloseButton: PropTypes.bool,
  showImageCount: PropTypes.bool,
  showThumbnails: PropTypes.bool,
+ spinner: PropTypes.func,
+ spinnerColor: PropTypes.string,
+ spinnerSize: PropTypes.number,
  theme: PropTypes.object,
  thumbnailOffset: PropTypes.number,
  width: PropTypes.number
@@ -1271,6 +1361,9 @@ Lightbox.defaultProps = {
  rightArrowTitle: 'Next (Right arrow key)',
  showCloseButton: true,
  showImageCount: true,
+ spinner: DefaultSpinner,
+ spinnerColor: 'white',
+ spinnerSize: 100,
  theme: {},
  thumbnailOffset: 2,
  width: 1024
@@ -1294,7 +1387,27 @@ var defaultStyles = {
 
  // disable user select
  WebkitTouchCallout: 'none',
- userSelect: 'none'
+ userSelect: 'none',
+
+ // opacity animation on image load
+ opacity: 0,
+ transition: 'opacity 0.3s'
+ },
+ imageLoaded: {
+ opacity: 1
+ },
+ spinner: {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+
+ // opacity animation to make spinner appear with delay
+ opacity: 0,
+ transition: 'opacity 0.3s'
+ },
+ spinnerActive: {
+ opacity: 1
  }
 };