0.5.18

jossmac · Jul 19, 2018 · 2c345c4 · 2c345c4
1 parent 274f071
commit 2c345c4
Show file tree

Hide file tree

Showing 25 changed files with 356 additions and 623 deletions.
diff --git a/.github/HISTORY.md b/.github/HISTORY.md
@@ -1,5 +1,13 @@
 # React-Images
 
+### v0.5.18 / 2018-07-19
+- LightBox srcSet support for string and array #236 thanks to [lordoffreaks](https://github.com/lordoffreaks)
+- Upgrade react-transition-group to v2 #238 thanks to [filipecosta01](https://github.com/filipecosta01)
+- Add zindex to close button to bring it in front of spinner #225 thanks to [seanpascoe](https://github.com/seanpascoe)
+- Fix #240: Spinner consumes pointer events #241 thanks to [thepatrik](https://github.com/thepatrik)
+- Fix #216 Cannot read property 'complete' of undefined #217 thanks to [lkazberova](https://github.com/lkazberova)
+- Fix Lightbox srcSet prop type validation #209 thanks to [kripod](https://github.com/kripod)
+
 ### v0.5.17 / 2018-02-07
 - fix for "srcSet" inconsistency #204 thanks to [kripod](https://github.com/kripod) and [wmertens](https://github.com/wmertens)
 - fix for preload bug when mounted with `isOpen` set to true thanks to [mkalygin](https://github.com/mkalygin)

diff --git a/dist/react-images.es.js b/dist/react-images.es.js
@@ -3,7 +3,7 @@ import React, { Children, Component } from 'react';
 import { StyleSheet, css } from 'aphrodite';
 import ScrollLock from 'react-scrolllock';
 import { StyleSheet as StyleSheet$1, css as css$1 } from 'aphrodite/no-important';
-import { CSSTransitionGroup } from 'react-transition-group';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { render, unmountComponentAtNode } from 'react-dom';
 
 // ==============================
@@ -278,7 +278,7 @@ var possibleConstructorReturn = function (self, call) {
 function deepMerge(target) {
 	var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-	var extended = Object.assign({}, target);
+	var extended = _extends({}, target);
 
 	Object.keys(source).forEach(function (key) {
 		if (_typeof(source[key]) !== 'object' || !source[key]) {
@@ -561,6 +561,7 @@ var defaultStyles$4 = {
 		position: 'relative',
 		top: 0,
 		verticalAlign: 'bottom',
+		zIndex: 1,
 
 		// increase hit area
 		height: 40,
@@ -887,12 +888,15 @@ var Portal = function (_Component) {
 						null,
 						styles
 					),
-					React.createElement(CSSTransitionGroup, _extends({
-						component: 'div',
-						transitionName: 'fade',
-						transitionEnterTimeout: duration,
-						transitionLeaveTimeout: duration
-					}, this.props))
+					React.createElement(
+						TransitionGroup,
+						this.props,
+						React.createElement(
+							CSSTransition,
+							{ timeout: { enter: duration, exit: duration }, classNames: 'fade' },
+							this.props.children
+						)
+					)
 				)
 			), this.portalElement);
 		}
@@ -1070,8 +1074,8 @@ 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 });
+				var img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded);
+				if (img) this.setState({ imageLoaded: img.complete });
 			}
 
 			// add/remove event listeners
@@ -1097,10 +1101,12 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'preloadImage',
 		value: function preloadImage(idx, onload) {
-			var data = this.props.images[idx];
-
+			return this.preloadImageData(this.props.images[idx], onload);
+		}
+	}, {
+		key: 'preloadImageData',
+		value: function preloadImageData(data, onload) {
 			if (!data) return;
-
 			var img = new Image();
 			var sourceSet = normalizeSourceSet(data);
 
@@ -1389,7 +1395,7 @@ Lightbox.propTypes = {
 	imageCountSeparator: PropTypes.string,
 	images: PropTypes.arrayOf(PropTypes.shape({
 		src: PropTypes.string.isRequired,
-		srcSet: PropTypes.array,
+		srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 		caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 		thumbnail: PropTypes.string
 	})).isRequired,
@@ -1467,7 +1473,8 @@ var defaultStyles = {
 
 		// opacity animation to make spinner appear with delay
 		opacity: 0,
-		transition: 'opacity 0.3s'
+		transition: 'opacity 0.3s',
+		pointerEvents: 'none'
 	},
 	spinnerActive: {
 		opacity: 1

diff --git a/dist/react-images.js b/dist/react-images.js
@@ -280,7 +280,7 @@ var possibleConstructorReturn = function (self, call) {
 function deepMerge(target) {
 	var source = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-	var extended = Object.assign({}, target);
+	var extended = _extends({}, target);
 
 	Object.keys(source).forEach(function (key) {
 		if (_typeof(source[key]) !== 'object' || !source[key]) {
@@ -563,6 +563,7 @@ var defaultStyles$4 = {
 		position: 'relative',
 		top: 0,
 		verticalAlign: 'bottom',
+		zIndex: 1,
 
 		// increase hit area
 		height: 40,
@@ -889,12 +890,15 @@ var Portal = function (_Component) {
 						null,
 						styles
 					),
-					React__default.createElement(reactTransitionGroup.CSSTransitionGroup, _extends({
-						component: 'div',
-						transitionName: 'fade',
-						transitionEnterTimeout: duration,
-						transitionLeaveTimeout: duration
-					}, this.props))
+					React__default.createElement(
+						reactTransitionGroup.TransitionGroup,
+						this.props,
+						React__default.createElement(
+							reactTransitionGroup.CSSTransition,
+							{ timeout: { enter: duration, exit: duration }, classNames: 'fade' },
+							this.props.children
+						)
+					)
 				)
 			), this.portalElement);
 		}
@@ -1072,8 +1076,8 @@ 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 });
+				var img = this.preloadImageData(nextProps.images[nextProps.currentImage], this.handleImageLoaded);
+				if (img) this.setState({ imageLoaded: img.complete });
 			}
 
 			// add/remove event listeners
@@ -1099,10 +1103,12 @@ var Lightbox = function (_Component) {
 	}, {
 		key: 'preloadImage',
 		value: function preloadImage(idx, onload) {
-			var data = this.props.images[idx];
-
+			return this.preloadImageData(this.props.images[idx], onload);
+		}
+	}, {
+		key: 'preloadImageData',
+		value: function preloadImageData(data, onload) {
 			if (!data) return;
-
 			var img = new Image();
 			var sourceSet = normalizeSourceSet(data);
 
@@ -1391,7 +1397,7 @@ Lightbox.propTypes = {
 	imageCountSeparator: PropTypes.string,
 	images: PropTypes.arrayOf(PropTypes.shape({
 		src: PropTypes.string.isRequired,
-		srcSet: PropTypes.array,
+		srcSet: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 		caption: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 		thumbnail: PropTypes.string
 	})).isRequired,
@@ -1469,7 +1475,8 @@ var defaultStyles = {
 
 		// opacity animation to make spinner appear with delay
 		opacity: 0,
-		transition: 'opacity 0.3s'
+		transition: 'opacity 0.3s',
+		pointerEvents: 'none'
 	},
 	spinnerActive: {
 		opacity: 1

diff --git a/dist/react-images.min.js b/dist/react-images.min.js
diff --git a/examples/src/standalone.html b/examples/src/standalone.html
@@ -20,14 +20,14 @@
 		</div>
 	</div>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js" charset="utf-8"></script>
-  <script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
-  <script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>
+  <script src="https://unpkg.com/react@16.4.1/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/[email protected]/prop-types.js"></script>
   <script src="https://unpkg.com/aphrodite/dist/aphrodite.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.0.0/react-transition-group.js"></script>
-  <script src="https://unpkg.com/[email protected].13/dist/react-photo-gallery.min.js"></script>
+  <script src="https://unpkg.com/[email protected].28/dist/react-photo-gallery.min.js"></script>
   <script src="https://rawgit.com/neptunian/react-scrolllock/master/dist/react-scrolllock.min.js"></script>
-  <script src="https://unpkg.com/[email protected].10/dist/react-images.min.js"></script>
+  <script src="https://unpkg.com/[email protected].18/dist/react-images.min.js"></script>
   <script type="text/babel">
 const photos = [
     {src: 'https://images.unsplash.com/photo-1470619549108-b85c56fe5be8?w=1024&h=1024', width:1, height:1},