react-responsive-carousel - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

components/Carousel.js

@@ -26,2 +26,3 @@ /** @jsx React.DOM */
 			selectedItem: this.props.selectedItem,
+            hasMount: false,
 
@@ -85,4 +86,14 @@ // Index of the thumb that will appear first.
 		el.addEventListener('touchend', this.onSwipeEnd);
-	}, 
 
+		if (!this.isSlider) {
+			var defaultImgIndex = 0;
+			var defaultImg = this.refs['itemImg' + defaultImgIndex].getDOMNode();
+			defaultImg.addEventListener('load', this.setMountState);
+		}
+	},
+
+    setMountState: function() {
+        this.setState({hasMount: true});
+	},
+
 	updateDimensions:function () {
@@ -255,3 +266,4 @@ this.calculateSpace(this.props.items.length);
 		return this.props.items.map(function(item, index)  {
-			var itemClass = klass.ITEM(this.isSlider, index, this.state.selectedItem);
+            var hasMount = this.state.hasMount;
+			var itemClass = klass.ITEM(this.isSlider, index, this.state.selectedItem, hasMount);
 			var imageSchema = {};
@@ -263,3 +275,3 @@
 					onClick:  this.handleClickItem.bind(this, index, item) }, 
-					React.createElement("img", {src: item.url})
+					React.createElement("img", {src: item.url, ref: "itemImg" + index})
 				)
@@ -266,0 +278,0 @@ );

cssClasses.js

@@ -26,7 +26,7 @@ var classNames = require('classnames');
 
-	ITEM:function (isSlider, index, selectedItem) {
+	ITEM:function (isSlider, index, selectedItem, hasMount) {
 		return classNames({
 			"thumb": !isSlider,
 			"slide": isSlider,
-			"selected": index === selectedItem
+            "selected": index === selectedItem && hasMount
 		});
@@ -55,2 +55,2 @@ },
 	}
-}
+}

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React Responsive Carousel",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

73372

increased by0.56%

Lines of code

1201

increased by0.92%

No dependency changes