react-responsive-carousel - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

__tests__/Carousel.js

@@ -1,8 +0,6 @@
-/** @jsx React.DOM */
+var React = require('react');
+var TestUtils = require('react-addons-test-utils');
+var ReactDOM = require('react-dom');
 
-describe("Carousel", function() {
-	var React = require('react');
-	var TestUtils = require('react-addons-test-utils');
-	var ReactDOM = require('react-dom');
-	
+describe("Slider", function() {
 	var findByTag = TestUtils.scryRenderedDOMComponentsWithTag;
@@ -54,6 +52,5 @@ var findByClass = TestUtils.scryRenderedDOMComponentsWithClass;
 
-  			it("Should call selectItem sending selectedItem as 1 and firstItem as 2", function () {
+  			it("Should call selectItem sending selectedItem as 1", function () {
   				expect(componentInstance.selectItem.mock.calls[0][0]).toEqual({
-					selectedItem: 1,
-					firstItem: 2
+					selectedItem: 1
 				});
@@ -66,3 +63,3 @@ });
 				componentInstance.setState = jest.genMockFunction();
-				componentInstance.triggerOnChange = jest.genMockFunction();
+				componentInstance.handleOnChange = jest.genMockFunction();
 				componentInstance.selectItem({
@@ -81,4 +78,5 @@ selectedItem: 1,
 
-  			it("Should call triggerOnChange sending only selectedItem", function () {
-				expect(componentInstance.triggerOnChange.mock.calls[0][0]).toBe(1);
+  			it("Should call handleOnChange sending only selectedItem", function () {
+  				console.log(componentInstance.handleOnChange.mock.calls[0][0]);
+				expect(componentInstance.handleOnChange.mock.calls[0][0]).toBe(1);
   			});
@@ -90,3 +88,3 @@ });
 		expect(componentInstance.state.selectedItem).toBe(0);
-		expect(componentInstance.state.firstItem).toBe(0);
+		expect(componentInstance.state.hasMount).toBe(false);
 	});
@@ -108,29 +106,11 @@
 			expect(componentInstance.state.selectedItem).toBe(3);
-			expect(componentInstance.state.firstItem).toBe(3);
 		});
 
-		it("Should update the position of the carousel if selectedItem is changed", function () {
-			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
+		it("Should update the position of the Carousel if selectedItem is changed", function () {
+			TestUtils.Simulate.click(componentInstance['item2']);
 			expect(componentInstance.state.selectedItem).toBe(2);
-			// expect(componentInstance.state.firstItem).toBe(2);
 
-			TestUtils.Simulate.click(componentInstance.refs['itemImg3']);
+			TestUtils.Simulate.click(componentInstance['item3']);
 			expect(componentInstance.state.selectedItem).toBe(3);
-			expect(componentInstance.state.firstItem).toBe(3);
 		});
-
-
-		it("Should limit the position of the carousel firstItem to the `lastPosition`", function () {
-			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
-			expect(componentInstance.state.selectedItem).toBe(2);
-			expect(componentInstance.state.firstItem).toBe(2);
-
-			TestUtils.Simulate.click(componentInstance.refs['itemImg5']);
-			expect(componentInstance.state.selectedItem).toBe(5);
-			expect(componentInstance.state.firstItem).toBe(3);
-
-			TestUtils.Simulate.click(componentInstance.refs['itemImg6']);
-			expect(componentInstance.state.selectedItem).toBe(6);
-			expect(componentInstance.state.firstItem).toBe(3);
-		});
 	})
@@ -142,6 +122,6 @@
 			
-			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
+			TestUtils.Simulate.click(componentInstance['item1']);
 			expect(componentInstance.state.selectedItem).toBe(1);
 
-			TestUtils.Simulate.click(componentInstance.refs['itemImg3']);
+			TestUtils.Simulate.click(componentInstance['item3']);
 			expect(componentInstance.state.selectedItem).toBe(3);
@@ -153,22 +133,7 @@ });
 			
-			renderComponent({onSelectItem: mockedFunction});
+			renderComponent({onClickItem: mockedFunction});
 
-			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
+			TestUtils.Simulate.click(componentInstance['item1']);
 			expect(mockedFunction).toBeCalled();
-		})
-	})
-
-	describe("Integrating", function () {
-		beforeEach(function () {
-			componentInstance.lastPosition = 4;
-			componentInstance.visibleItems = 1;
-			componentInstance.showArrows = true;
 		});
-	
-		it("Should disable the left arrow if the first thumb is selected", function () {
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
-
-			TestUtils.Simulate.click(componentInstance.refs['itemImg2']);
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(0);	
-		});
 	})
@@ -178,4 +143,2 @@
 		beforeEach(function () {
-			componentInstance.lastPosition = 4;
-			componentInstance.visibleItems = 1;
 			componentInstance.showArrows = true;
@@ -185,25 +148,18 @@ });
 		it("Should disable the left arrow if we are showing the first item", function () {
-			TestUtils.Simulate.click(componentInstance.refs['itemImg0']);
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
+			TestUtils.Simulate.click(componentInstance['item0']);
+			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(1);
 		});	
 
 		it("Should enable the left arrow if we are showing other than the first item", function () {
-			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(0);
+			TestUtils.Simulate.click(componentInstance['item1']);
+			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-prev.control-disabled').length).toBe(0);
 		});	
 
 		it("Should disable the right arrow if we reach the lastPosition", function () {
-			TestUtils.Simulate.click(componentInstance.refs['itemImg1']);
-			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(0);
+			TestUtils.Simulate.click(componentInstance['item1']);
+			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(0);
 			
-			TestUtils.Simulate.click(componentInstance.refs['itemImg4']);
-			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
-		});	
-
-		it("Should disable both arrows if we have more space than items", function () {
-			componentInstance.visibleItems = 10;
-			TestUtils.Simulate.click(componentInstance.refs['itemImg0']);
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
-			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
-		})
+			TestUtils.Simulate.click(componentInstance['item6']);
+			expect(ReactDOM.findDOMNode(componentInstance).querySelectorAll('.carousel-slider .control-next.control-disabled').length).toBe(1);
+		});		
 	})	
@@ -210,0 +166,0 @@

components/Carousel.js

 var React = require('react');
+var ReactDOM = require('react-dom');
 var klass = require('../cssClasses');
-var outerWidth = require('../dimensions').outerWidth;
-var has3d = require('../has3d')();
+var merge = require('../object-assign');
+var CSSTranslate = require('../CSSTranslate');
+var Swipe = require('react-easy-swipe');
+var Thumbs = require('./Thumbs');
 
-module.exports = React.createClass({displayName: "exports",
-	
-	propsTypes: {
-		children: React.PropTypes.element.isRequired,
-		showStatus: React.PropTypes.bool,
-		showControls: React.PropTypes.bool,
-		selectedItem: React.PropTypes.number,
-		firstItem: React.PropTypes.number,
-		type: React.PropTypes.oneOf(['carousel', 'slider'])
-	},
+// react-swipe was compiled using babel
+Swipe = Swipe.default;
 
-	getDefaultProps:function () {
-		return {
-			showStatus: false,
-			showControls: false,
-			selectedItem: 0,
-			// Carousel is the default type. It stands for a group of thumbs.
-			// It also accepts 'slider', which will show a full width item 
-			type: 'carousel'
-		}
-	}, 
+module.exports = React.createClass({
+    displayName: 'Slider',
+    propsTypes: {
+        children: React.PropTypes.element.isRequired,
+        showArrows: React.PropTypes.bool,
+        showStatus: React.PropTypes.bool,
+        showIndicators: React.PropTypes.bool,
+        showThumbs: React.PropTypes.bool,
+        selectedItem: React.PropTypes.number,
+        onClickItem: React.PropTypes.func,
+        onClickThumb: React.PropTypes.func,
+        onChange: React.PropTypes.func,
+        axis: React.PropTypes.string
+    },
 
-	getInitialState:function () {
-		return {
-			// index of the image to be shown.
-			selectedItem: this.props.selectedItem,
-            hasMount: false,
+    getDefaultProps:function () {
+        return {
+            showIndicators: true,
+            showArrows: true,
+            showStatus:true,
+            showThumbs:true,
+            selectedItem: 0,
+            axis: 'horizontal'
+        }
+    }, 
 
-			// Index of the thumb that will appear first.
-			// If you are using type = slider, this has 
-			// the same value of the selected item.
-			firstItem: this.props.selectedItem
-		}
-	}, 
+    getInitialState:function () {
+        return {
+            // index of the image to be shown.
+            selectedItem: this.props.selectedItem,
+            hasMount: false
+        }
+    }, 
 
-	statics: {
-		// touchPosition is a temporary var to decide what to do on touchEnd
-		touchPosition: null
-	},
+    componentWillReceiveProps:function (props, state) {
+        if (props.selectedItem !== this.state.selectedItem) {
+            this.updateSizes();
+            this.setState({
+                selectedItem: props.selectedItem
+            });
+        }
+    },
 
-	componentWillMount:function() {
-		// as the widths are calculated, we need to resize 
-		// the carousel when the window is resized
-		window.addEventListener("resize", this.updateDimensions);
-		// issue #2 - image loading smaller
-		window.addEventListener("DOMContentLoaded", this.updateDimensions);
+    componentWillMount:function() {
+        // as the widths are calculated, we need to resize 
+        // the carousel when the window is resized
+        window.addEventListener("resize", this.updateSizes);
+        // issue #2 - image loading smaller
+        window.addEventListener("DOMContentLoaded", this.updateSizes);
     },
 
-	componentWillUnmount:function() {
-		// removing listeners
-		window.removeEventListener("resize", this.updateDimensions);
-		window.removeEventListener("DOMContentLoaded", this.updateDimensions);
+    componentWillUnmount:function() {
+        // removing listeners
+        window.removeEventListener("resize", this.updateSizes);
+        window.removeEventListener("DOMContentLoaded", this.updateSizes);
     },
 
-	componentWillReceiveProps:function (props, state) {
-		if (props.selectedItem !== this.state.selectedItem) {
-			this.setState({
-				selectedItem: props.selectedItem,
-				firstItem: this.getFirstItem(props.selectedItem)
-			});
-		}
-	},
+    componentDidMount:function (nextProps) {
+        // when the component is rendered we need to calculate 
+        // the container size to adjust the responsive behaviour
+        this.updateSizes();
 
-	componentDidMount:function (nextProps) {
-		// when the component is rendered we need to calculate 
-		// the container size to adjust the responsive behaviour
-		this.updateDimensions();
+        this.isHorizontal = this.props.axis === 'horizontal';
+        
+        var defaultImg = ReactDOM.findDOMNode(this.item0).getElementsByTagName('img')[0];
+        defaultImg.addEventListener('load', this.setMountState);
+    },
 
-		if (!this.isSlider) {
-			var defaultImgIndex = 0;
-			var defaultImg = this.refs['itemImg' + defaultImgIndex];
-			defaultImg.addEventListener('load', this.setMountState);
-		}
-	},
+    updateSizes:function () {
+        var firstItem = ReactDOM.findDOMNode(this.item0);
+        this.itemSize = this.isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
+        this.wrapperSize = this.isHorizontal ? this.itemSize * this.props.children.length : this.itemSize;
+    },
 
-    setMountState: function() {
+    setMountState:function () {
         this.setState({hasMount: true});
-	},
+        this.updateSizes();
+        this.forceUpdate();
+    },
 
-	updateDimensions:function () {
-		this.calculateSpace(this.props.children.length);
-		// the component should be rerended after calculating space
-		this.forceUpdate();
-	},
+    handleClickItem:function (index, item) {
+        var handler = this.props.onClickItem;
 
-	// Calculate positions for carousel
-	calculateSpace:function (total) {
-		total = total || this.props.children.length;
-		this.isSlider = this.props.type === "slider";
-		
-		this.wrapperSize = this.refs.itemsWrapper.clientWidth;
-		this.itemSize = this.isSlider ? this.wrapperSize : outerWidth(this.refs.item0);
-		this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);	
-		
-		// exposing variables to other methods on this component
-		this.showArrows = this.visibleItems < total;
-		
-		// Index of the last visible element that can be the first of the carousel
-		this.lastPosition = (total - this.visibleItems);
-	}, 
+        if (typeof handler === 'function') {
+            handler(index, item);
+        }   
 
-	getFirstItem:function (selectedItem) {
-		var firstItem = selectedItem;
-		
-		if (selectedItem >= this.lastPosition) {
-			firstItem =  this.lastPosition;
-		}
+        if (index !== this.state.selectedItem) {
+            this.setState({
+                selectedItem: index,
+            });
+        }
+    }, 
 
-		if (!this.showArrows) {
-			firstItem = 0;
-		}
+    handleOnChange:function (index, item) {
+        var handler = this.props.onChange;
 
-		return firstItem;
-	},
+        if (typeof handler === 'function') {
+            handler(index, item);
+        }   
+    }, 
 
-	handleClickItem:function (index, item) {
-		var handler = this.props.onSelectItem;
+    handleClickThumb:function(index, item) {
+        var handler = this.props.onClickThumb;
 
-		if (typeof handler === 'function') {
-			handler(index, item);
-		}	
+        if (typeof handler === 'function') {
+            handler(index, item);
+        }
 
-		if (index !== this.state.selectedItem) {
-			this.setState({
-				selectedItem: index,
-				firstItem: this.getFirstItem(index)
-			});
-		}
-	}, 
+        this.selectItem({
+            selectedItem: index
+        });
+    },
 
-	triggerOnChange:function (item) {
-		var handler = this.props.onChange;
+    onSwipeStart:function() {
+        this.setState({
+            swiping: true
+        });
+    },
 
-		if (typeof handler === 'function') {
-			handler(item);
-		}	
-	}, 
+    onSwipeEnd:function() {
+        this.setState({
+            swiping: false
+        });
+    },
 
-	// touch start
-	onSwipeStart:function (e) {
-		this.setState({
-			// saving the initial touch 
-			touchStart: e.touches[0].pageX,
-			// setting the swiping state
-			swiping: true
-		})
-	},
+    onSwipeMove:function(delta) {
+        var list = ReactDOM.findDOMNode(this.itemList);
+        var isHorizontal = this.props.axis === 'horizontal';
+        
+        var initialBoundry = 0;
 
-	onSwipeMove:function (e) {
-		// getting the current delta
-		var delta = e.touches[0].pageX - this.state.touchStart;
-        var leftBoundry = 0;
+        var currentPosition = - this.state.selectedItem * 100; 
+        var finalBoundry = - (this.props.children.length - 1) * 100;
 
-        var currentPosition;
-        var lastLeftBoundry;
+        var axisDelta = isHorizontal ? delta.x : delta.y;
 
-        if (this.isSlider) {
-			currentPosition = - this.state.firstItem * 100;	
-			lastLeftBoundry = - (this.props.children.length - 1) * 100;
-		} else {
-			currentPosition = - this.state.firstItem * this.itemSize;	
-			lastLeftBoundry = - this.visibleItems * this.itemSize;
-		}
-
-        //if the first image meets the left boundry, prevent user from swiping left
-        if (currentPosition === leftBoundry && delta > 0) {
-            delta = 0;
+        // prevent user from swiping left out of boundaries
+        if (currentPosition === initialBoundry && axisDelta > 0) {
+            axisDelta = 0;
         }
         
-        //if the last image meets the left boundry, prevent user from swiping right
-        if (currentPosition === lastLeftBoundry && delta < 0) {
-            delta = 0;
+        // prevent user from swiping right out of boundaries
+        if (currentPosition === finalBoundry && axisDelta < 0) {
+            axisDelta = 0;
         }
 
-        var position;
+        var position = currentPosition + (100 / (this.wrapperSize / axisDelta)) + '%';
+        
+        [
+            'WebkitTransform',
+            'MozTransform',
+            'MsTransform',
+            'OTransform',
+            'transform',
+            'msTransform'
+        ].forEach(function(prop)  {
+            list.style[prop] = CSSTranslate(position, this.props.axis);
+        }.bind(this));
+    },
 
-        if (this.isSlider) {
-    		position = currentPosition + (100 / (this.wrapperSize / delta)) + '%';
-        } else {
-        	position = currentPosition + delta + 'px';
-        }
+    decrement:function (positions){
+        this.moveTo(this.state.selectedItem - (typeof positions === 'Number' ? positions : 1));
+    },
 
-		// adding it to the last position and saving the position
-		this.touchPosition = delta;
+    increment:function (positions){
+        this.moveTo(this.state.selectedItem + (typeof positions === 'Number' ? positions : 1));
+    },
 
-		var elementStyle = this.refs.itemList.style;
+    moveTo:function (position) {
+        // position can't be lower than 0
+        position = position < 0 ? 0 : position;
+        // position can't be higher than last postion
+        position = position >= this.props.children.length - 1 ? this.props.children.length - 1 : position;
+        
+        this.selectItem({
+            // if it's not a slider, we don't need to set position here
+            selectedItem: position
+        });
+    },
 
-		// if 3d isn't available we will use left to move
-		[
-			'WebkitTransform',
-			'MozTransform',
-			'MsTransform',
-			'OTransform',
-			'transform',
-			'msTransform'
-		].forEach(function(prop)  {
-			elementStyle[prop] = has3d ? 'translate3d(' + position + ', 0, 0)' : 'translate(' + position + ', 0)';
-		});
-	},
+    changeItem:function (e) {
+        var newIndex = e.target.value;
 
-	onSwipeEnd:function (e) {
-		this.setState({
-			// reset touchStart position
-			touchStart: null,
-			// finish the swiping state
-			swiping: false
-		}, 
-			// this function is the callback of setState because we need to wait for the
-			// state to be setted, so the swiping class will be removed and the 
-			// transition to the next slide will be smooth
-			function () {
-				// number of positions to advance;
-				var positions;
+        this.selectItem({
+            selectedItem: newIndex
+        });
+    },
+    
+    selectItem:function (state) {
+        this.setState(state);
+        this.handleOnChange(state.selectedItem, this.props.children[state.selectedItem]);
+    },
 
-                if (this.touchPosition === 0) {
-                    /* prevent users from swipe right on the first image
-                       but it goes to the opposite direction, as the delta is alwsys 0
-                       when swipe right on the first image.
-                       also prevent users from swipe left on the last image from the same reason.
-                    */
-                } else {
-                	// if it's a slider, positions is 1
-					positions = !this.isSlider ? Math.abs(Math.round(this.touchPosition / this.itemSize)) : 1;                	
-                } 
+    renderItems:function () {
+        return React.Children.map(this.props.children, function(item, index)  {
+            var hasMount = this.state.hasMount;
+            var itemClass = klass.ITEM(true, index === this.state.selectedItem);
+            
+            return (
+                React.createElement("li", {ref: function(node)  {return this["item" + index] = node;}.bind(this), key: "itemKey" + index, className: itemClass, 
+                    onClick:  this.handleClickItem.bind(this, index, item) }, 
+                    item 
+                )
+            );
+        }.bind(this));
+    },
 
-                if (this.touchPosition < 0) {
-                    // less than 0 means that it's going left
-                    this.slideLeft(positions);
-                } else if (this.touchPosition > 0) {
-                    this.slideRight(positions);
-                }
-				// discard the position
-				this.touchPosition = null;	
-			}.bind(this)
-		);	
-	},
+    renderControls:function () {
+        if (!this.props.showIndicators) {
+            return null
+        }
+        
+        return (
+            React.createElement("ul", {className: "control-dots"}, 
+                React.Children.map(this.props.children, function(item, index)  {
+                    return React.createElement("li", {className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index, key: index});
+                }.bind(this))
+            )
+        );
+    },
 
-	slideRight:function (positions){
-		this.moveTo(this.state.firstItem - (typeof positions === 'Number' ? positions : 1));
-	},
+    renderStatus:function () {
+        if (!this.props.showStatus) {
+            return null
+        }
 
-	slideLeft:function (positions){
-		this.moveTo(this.state.firstItem + (typeof positions === 'Number' ? positions : 1));
-	},
+        return React.createElement("p", {className: "carousel-status"}, this.state.selectedItem + 1, " of ", this.props.children.length);
+    }, 
 
-	moveTo:function (position) {
-		// position can't be lower than 0
-		position = position < 0 ? 0 : position;
-		// position can't be higher than last postion
-		position = position >= this.lastPosition ? this.lastPosition : position;
-		
-		this.selectItem({
-			firstItem: this.getFirstItem(position),
-			// if it's not a slider, we don't need to set position here
-			selectedItem: this.isSlider ? position : this.state.selectedItem
-		});
-	},
+    renderThumbs:function () {
+        if (!this.props.showThumbs) {
+            return null
+        }
 
-	changeItem:function (e) {
-		var newIndex = e.target.value;
+        return (
+            React.createElement(Thumbs, {onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem}, 
+                this.props.children
+            )
+        );
+    }, 
 
-		this.selectItem({
-			selectedItem: newIndex,
-			firstItem: this.getFirstItem(newIndex)
-		})
-	},
+    render:function () {
+        var itemsLength = this.props.children.length;
 
-	selectItem:function (state) {
-		this.setState(state);
-		this.triggerOnChange(state.selectedItem);
-	},
+        if (itemsLength === 0) {
+            return null;
+        }
 
-	renderItems:function () {
-		var isSlider = (this.props.type === "slider");
+        var canShowArrows = this.props.showArrows && itemsLength > 1;
 
-		return this.props.children.map(function(item, index)  {
-            var hasMount = this.state.hasMount;
-			var itemClass = klass.ITEM(this.isSlider, index, this.state.selectedItem, hasMount);
-			
-			return (
-				React.createElement("li", {key: index, ref: "item" + index, className: itemClass, 
-					onClick:  this.handleClickItem.bind(this, index, item) }, 
-					React.createElement("img", {src: item.props.src, ref: "itemImg" + index})
-				)
-			);
-		}.bind(this));
-					
-	},
+        // show left arrow? 
+        var hasPrev = canShowArrows && this.state.selectedItem > 0;
+        // show right arrow
+        var hasNext = canShowArrows && this.state.selectedItem < itemsLength - 1;
+        // obj to hold the transformations and styles
+        var itemListStyles = {};
 
-	renderControls:function () {
-		if (!this.props.showControls) {
-			return null
-		}
-		
-		return (
-			React.createElement("ul", {className: "control-dots"}, 
-				this.props.children.map( function(item, index)  {
-					return React.createElement("li", {className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index, key: index});
-				}.bind(this))
-			)
-		);
-	},
+        var currentPosition = - this.state.selectedItem * 100 + '%';   
+        
+        // if 3d is available, let's take advantage of the performance of transform
+        var transformProp = CSSTranslate(currentPosition, this.props.axis);
+        
+        itemListStyles = {
+            'WebkitTransform': transformProp,
+               'MozTransform': transformProp,
+                'MsTransform': transformProp,
+                 'OTransform': transformProp,
+                  'transform': transformProp,
+                'msTransform': transformProp
+        };
 
-	renderStatus:function () {
-		if (!this.props.showStatus) {
-			return null
-		}
-		return React.createElement("p", {className: "carousel-status"}, this.state.selectedItem + 1, " of ", this.props.children.length);
-	}, 
+        var swiperProps = {
+            selectedItem: this.state.selectedItem,
+            className: klass.SLIDER(true, this.state.swiping),
+            onSwipeMove: this.onSwipeMove,
+            onSwipeStart: this.onSwipeStart,
+            onSwipeEnd: this.onSwipeEnd,
+            style: itemListStyles,
+            ref: function(node)  {return this.itemList = node;}.bind(this)
+        };
 
-	render:function () {
-		if (this.props.children.length === 0) {
-			return null;
-		}
+        var containerStyles = {};
 
-		// show left arrow? 
-		var hasPrev = this.showArrows && this.state.firstItem > 0;
-		// show right arrow
-		var hasNext = this.showArrows && this.state.firstItem < this.lastPosition;
-		// obj to hold the transformations and styles
-		var itemListStyles = {};
+        if (this.isHorizontal) {
+            merge(swiperProps, {
+                onSwipeLeft: this.increment,
+                onSwipeRight: this.decrement
+            });
+        } else {
+            merge(swiperProps, {
+                onSwipeUp: this.decrement,
+                onSwipeDown: this.increment
+            });
 
-		var currentPosition;
+            swiperProps.style.height = this.itemSize;
+            containerStyles.height = this.itemSize;
+        }
 
-		if (this.isSlider) {
-			currentPosition = - this.state.firstItem * 100 + '%';	
-		} else {
-			currentPosition = - this.state.firstItem * this.itemSize + 'px';	
-		}
-
-		// if 3d is available, let's take advantage of the performance of transform
-		var transformProp = has3d ? 'translate3d(' + currentPosition + ', 0, 0)' : 'translate(' + currentPosition + ', 0)';
-		itemListStyles = {
-			'WebkitTransform': transformProp,
-			   'MozTransform': transformProp,
-			    'MsTransform': transformProp,
-			     'OTransform': transformProp,
-			      'transform': transformProp,
-			    'msTransform': transformProp
-		}
-		
-		return (
-			React.createElement("div", {className: klass.CAROUSEL(this.isSlider)}, 
-				React.createElement("button", {className: klass.ARROW_LEFT(!hasPrev), onClick: this.slideRight}), 
-				
-				React.createElement("div", {className: klass.WRAPPER(this.isSlider), ref: "itemsWrapper"}, 
-					React.createElement("ul", {className: klass.SLIDER(this.isSlider, this.state.swiping), 
-						onTouchMove: this.onSwipeMove, 
-						onTouchStart: this.onSwipeStart, 
-						onTouchEnd: this.onSwipeEnd, 
-						style: itemListStyles, 
-						ref: "itemList"}, 
-						 this.renderItems() 
-					)
-				), 
-
-				React.createElement("button", {className: klass.ARROW_RIGHT(!hasNext), onClick: this.slideLeft}), 
-				
-				 this.renderControls(), 
-				 this.renderStatus() 
-			)
-		);
-		
-	}
+        return (
+            React.createElement("div", {className: this.props.className}, 
+                React.createElement("div", {className: klass.CAROUSEL(true)}, 
+                    React.createElement("button", {className: klass.ARROW_PREV(!hasPrev), onClick: this.decrement}), 
+                    React.createElement("div", {className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: function(node)  {return this.itemsWrapper = node;}.bind(this)}, 
+                        React.createElement(Swipe, React.__spread({tagName: "ul"},  swiperProps), 
+                             this.renderItems() 
+                        )
+                    ), 
+                    React.createElement("button", {className: klass.ARROW_NEXT(!hasNext), onClick: this.increment}), 
+                    
+                     this.renderControls(), 
+                     this.renderStatus() 
+                ), 
+                 this.renderThumbs() 
+            )               
+        );
+        
+    }
 });
 

cssClasses.js

@@ -11,6 +11,8 @@ var classNames = require('classnames');
 
-	WRAPPER:function (isSlider) {
+	WRAPPER:function (isSlider, axis) {
 		return classNames({
 			"thumbs-wrapper": !isSlider,
-			"slider-wrapper": isSlider
+			"slider-wrapper": isSlider,
+			"axis-horizontal": axis === "horizontal",
+			"axis-vertical": axis !== "horizontal"
 		});
@@ -23,17 +25,17 @@ },
 			"slider": isSlider,
-			"swiping": isSwiping
+			"animated": !isSwiping
 		});
 	},
 
-	ITEM:function (isSlider, index, selectedItem, hasMount) {
+	ITEM:function (isSlider, selected) {
 		return classNames({
 			"thumb": !isSlider,
 			"slide": isSlider,
-            "selected": index === selectedItem && hasMount
+            "selected": selected
 		});
 	},
 
-	ARROW_LEFT:function (disabled) {
+	ARROW_PREV:function (disabled) {
 		return classNames({
-			"control-arrow control-left": true,
+			"control-arrow control-prev": true,
 			"control-disabled": disabled
@@ -43,5 +45,5 @@ });
 
-	ARROW_RIGHT:function (disabled) {
+	ARROW_NEXT:function (disabled) {
 		return classNames({
-			"control-arrow control-right": true,
+			"control-arrow control-next": true,
 			"control-disabled": disabled
@@ -48,0 +50,0 @@ })

main.js

 var React = require('react');
 var ReactDOM = require('react-dom');
-var ImageGallery = require('react-responsive-carousel').ImageGallery;
-var Carousel = require('react-responsive-carousel').Carousel;
+var Carousel = require('./components/Carousel');
 
-// Begin DemoSliderControls
-var DemoSliderControls = function() {
-	return (
-		React.createElement(Carousel, {type: "slider", showControls: true, showStatus: true}, 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"})
-		)
-	);
-};
+function onChange() {
+    console.log('onChange', arguments);
+}
 
-ReactDOM.render(React.createElement(DemoSliderControls, null), document.querySelector('.demo-slider-controls'));
-// End DemoSliderControls
+function onClickItem() {
+    console.log('onClickItem', arguments);
+}
 
-// Begin DemoGallery
-var DemoGallery = function() {
-	return (
-		React.createElement(ImageGallery, {showControls: true, showStatus: true}, 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"})
-		)
-	);
-};
+function onClickThumb() {
+    console.log('onClickThumb', arguments);
+}
 
-ReactDOM.render(React.createElement(DemoGallery, null), document.querySelector('.demo-gallery'));
-// End DemoGallery
+// Begin DemoSliderControls
+var DemoCarousel = React.createClass({displayName: "DemoCarousel",
+    render:function() {
+        return (
+            React.createElement(Carousel, {showArrows: true, onChange: onChange, onClickItem: onClickItem, onClickThumb: onClickThumb}, 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/1.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 1")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/2.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 2")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/3.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 3")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/4.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 4")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/5.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 5")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/6.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 6")
+                )
+            )
+        );
+    }
+});
+ReactDOM.render(React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
 
-// Begin DemoCarousel
-var DemoCarousel = function() {
-	return (
-		React.createElement(Carousel, null, 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"}), 
-			React.createElement("img", {src: "assets/1.jpeg"}), 
-			React.createElement("img", {src: "assets/2.jpeg"}), 
-			React.createElement("img", {src: "assets/3.jpeg"}), 
-			React.createElement("img", {src: "assets/4.jpeg"}), 
-			React.createElement("img", {src: "assets/5.jpeg"}), 
-			React.createElement("img", {src: "assets/6.jpeg"}), 
-			React.createElement("img", {src: "assets/7.jpeg"})
-		)
-	);
-};
+// Begin DemoSliderControls
+var DemoCarouselVertical = React.createClass({displayName: "DemoCarouselVertical",
+    render:function() {
+        return (
+            React.createElement(Carousel, {axis: "vertical", showArrows: true, onChange: onChange, onClickItem: onClickItem, onClickThumb: onClickThumb}, 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/1.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 1")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/2.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 2")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/3.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 3")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/4.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 4")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/5.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 5")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/6.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 6")
+                )
+            )
+        );
+    }
+});
+ReactDOM.render(React.createElement(DemoCarouselVertical, null), document.querySelector('.demo-carousel-vertical'));
 
-ReactDOM.render(React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
-// End DemoCarousel
+// Begin DemoSliderControls
+var DemoCleanCarousel = React.createClass({displayName: "DemoCleanCarousel",
+    render:function() {
+        return (
+            React.createElement(Carousel, {showThumbs: false, showArrows: false, showStatus: false, onChange: onChange, onClickItem: onClickItem}, 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/1.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 1")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/2.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 2")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/3.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 3")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/4.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 4")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/5.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 5")
+                ), 
+                React.createElement("div", null, 
+                    React.createElement("img", {src: "assets/6.jpeg"}), 
+                    React.createElement("p", {className: "legend"}, "Legend 6")
+                )
+            )
+        );
+    }
+});
+ReactDOM.render(React.createElement(DemoCleanCarousel, null), document.querySelector('.demo-clean-carousel'));
+

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

91384

increased by21.73%

Number of package files

26

increased by18.18%

Lines of code

1556

increased by27.65%

No dependency changes