Merge branch 'develop'

laurenchen0631 · Apr 11, 2016 · 48f8185 · 48f8185
2 parents cd958f4 + 085f72c
commit 48f8185
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# react-owl-carousel
+# react-owl-carousel  [![npm version](https://img.shields.io/npm/v/react-owl-carousel.svg?style=flat)](https://www.npmjs.com/package/react-owl-carousel)
 [React](http://facebook.github.io/react/) + [Owl Carousel 1.3](http://owlgraphic.com/owlcarousel/)
 
 ### 1.Getting Started

diff --git a/components/OwlCarousel.jsx b/components/OwlCarousel.jsx
@@ -1,6 +1,7 @@
 'use strict';
 
-import React from 'react';
+import React, {PropTypes} from 'react';
+import {findDOMNode} from 'react-dom';
 import '../src/owl.carousel.css';
 import '../src/owl.carousel.js';
 
@@ -55,109 +56,33 @@ const Owl_Carousel_Options = [
 *		stop()
 */
 
-const OwlCarousel = React.createClass({
+class OwlCarousel extends React.Component {
+	constructor(props, context) {
+		super(props, context);
 
-	getDefaultProps() {
-		return {
-			style : {},
-		};
-	},
-
-	propTypes: {
-		children : React.PropTypes.oneOfType([
-			React.PropTypes.element,
-			React.PropTypes.arrayOf(React.PropTypes.element.isRequired),
-		]).isRequired,
-
-		style : React.PropTypes.object,
-		id : React.PropTypes.string,
-
-		items : React.PropTypes.number,
-		itemsCustom : React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.number).isRequired),
-		itemsDesktop : React.PropTypes.arrayOf(React.PropTypes.number.isRequired),
-		itemsDesktopSmall : React.PropTypes.arrayOf(React.PropTypes.number.isRequired),
-		itemsTablet : React.PropTypes.arrayOf(React.PropTypes.number.isRequired),
-		itemsTabletSmall : React.PropTypes.arrayOf(React.PropTypes.number.isRequired),
-		itemsMobile : React.PropTypes.arrayOf(React.PropTypes.number.isRequired),
-		singleItem : React.PropTypes.bool,
-		itemsScaleUp : React.PropTypes.bool,
-
-		slideSpeed : React.PropTypes.number,
-		paginationSpeed : React.PropTypes.number,
-		rewindSpeed : React.PropTypes.number,
-
-		autoPlay : React.PropTypes.oneOfType([
-			React.PropTypes.bool,
-			React.PropTypes.number,
-		]),
-		stopOnHover : React.PropTypes.bool,
-
-		navigation : React.PropTypes.bool,
-		navigationText : React.PropTypes.arrayOf(React.PropTypes.string),
-		rewindNav : React.PropTypes.bool,
-		scrollPerPage : React.PropTypes.bool,
-
-		pagination : React.PropTypes.bool,
-		paginationNumbers : React.PropTypes.bool,
-
-		responsive : React.PropTypes.bool,
-		responsiveRefreshRate : React.PropTypes.number,
-		responsiveBaseWidth : function(props, propName, componentName) {
-			if (
-				props[propName] &&
-				!$(props[propName]).length
-			) {
-				return new Error('React-owl-carousel: the props `responsiveBaseWidth` needs jQuery selector.');
-			}
-		},
-
-		baseClass : React.PropTypes.string,
-		theme : React.PropTypes.string,
-
-		lazyLoad : React.PropTypes.bool,
-		lazyFollow : React.PropTypes.bool,
-		lazyEffect : React.PropTypes.bool,
-
-		autoHeight : React.PropTypes.bool,
-
-		jsonPath : React.PropTypes.string,
-		jsonSuccess : React.PropTypes.func,
-
-		dragBeforeAnimFinish : React.PropTypes.bool,
-		mouseDrag : React.PropTypes.bool,
-		touchDrag : React.PropTypes.bool,
-
-		addClassActive : React.PropTypes.bool,
-
-		//build-in transitionStyle: 'fade', 'backSlide', 'goDown', 'scaleUp'
-		transitionStyle : React.PropTypes.string,
-
-		beforeUpdate : React.PropTypes.func,
-		afterUpdate : React.PropTypes.func,
-		beforeInit : React.PropTypes.func,
-		afterInit : React.PropTypes.func,
-		beforeMove : React.PropTypes.func,
-		afterMove : React.PropTypes.func,
-		afterAction : React.PropTypes.func,
-		startDragging : React.PropTypes.func,
-		afterLazyLoad: React.PropTypes.func,
-	},
+		this.next = () => $(findDOMNode(this)).data('owlCarousel').next();
+		this.prev = () => $(findDOMNode(this)).data('owlCarousel').prev();
+		this.goTo = (x) => $(findDOMNode(this)).data('owlCarousel').goTo(x);
+		this.jumpTo = (x) => $(findDOMNode(this)).data('owlCarousel').jumpTo(x);
+		this.play = () => $(findDOMNode(this)).data('owlCarousel').play();
+		this.stop = () => $(findDOMNode(this)).data('owlCarousel').stop();
+	}
 
 	componentDidMount() {
-		$(React.findDOMNode(this)).owlCarousel(this.getOptions());
-	},
+		$(findDOMNode(this)).owlCarousel(this.getOptions());
+	}
 
 	componentWillReceiveProps(nextProps) {
-		$(React.findDOMNode(this)).data('owlCarousel').destroy();
-	},
+		$(findDOMNode(this)).data('owlCarousel').destroy();
+	}
 
 	componentDidUpdate(prevProps, prevState) {
-		$(React.findDOMNode(this)).owlCarousel(this.getOptions());
-	},
+		$(findDOMNode(this)).owlCarousel(this.getOptions());
+	}
 
 	componentWillUnmount() {
-		$(React.findDOMNode(this)).data('owlCarousel').destroy();
-	},
+		$(findDOMNode(this)).data('owlCarousel').destroy();
+	}
 
 	getOptions() {
 		const options = {};
@@ -169,10 +94,9 @@ const OwlCarousel = React.createClass({
 		});
 
 		return options;
-	},
+	}
 
 	render() {
-
 		const {
 			items,
 			itemsDesktop,
@@ -215,43 +139,92 @@ const OwlCarousel = React.createClass({
 			...props,
 		} = this.props;
 
-		touchDrag !== false
-			?	React.initializeTouchEvents(true)
-			: React.initializeTouchEvents(false);
-
 		return (
 			<div {...props}>
 				{children}
 			</div>
 		);
+	}
+}
+
+OwlCarousel.propTypes = {
+	children : PropTypes.oneOfType([
+		PropTypes.element,
+		PropTypes.arrayOf(PropTypes.element.isRequired),
+	]).isRequired,
+
+	style : PropTypes.object,
+	id : PropTypes.string,
+
+	items : PropTypes.number,
+	itemsCustom : PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number).isRequired),
+	itemsDesktop : PropTypes.arrayOf(PropTypes.number.isRequired),
+	itemsDesktopSmall : PropTypes.arrayOf(PropTypes.number.isRequired),
+	itemsTablet : PropTypes.arrayOf(PropTypes.number.isRequired),
+	itemsTabletSmall : PropTypes.arrayOf(PropTypes.number.isRequired),
+	itemsMobile : PropTypes.arrayOf(PropTypes.number.isRequired),
+	singleItem : PropTypes.bool,
+	itemsScaleUp : PropTypes.bool,
+
+	slideSpeed : PropTypes.number,
+	paginationSpeed : PropTypes.number,
+	rewindSpeed : PropTypes.number,
+
+	autoPlay : PropTypes.oneOfType([
+		PropTypes.bool,
+		PropTypes.number,
+	]),
+	stopOnHover : PropTypes.bool,
+
+	navigation : PropTypes.bool,
+	navigationText : PropTypes.arrayOf(PropTypes.string),
+	rewindNav : PropTypes.bool,
+	scrollPerPage : PropTypes.bool,
+
+	pagination : PropTypes.bool,
+	paginationNumbers : PropTypes.bool,
+
+	responsive : PropTypes.bool,
+	responsiveRefreshRate : PropTypes.number,
+	responsiveBaseWidth : function(props, propName, componentName) {
+		if (
+			props[propName] &&
+			!$(props[propName]).length
+		) {
+			return new Error('React-owl-carousel: the props `responsiveBaseWidth` needs jQuery selector.');
+		}
 	},
 
-	next() {
-		$(React.findDOMNode(this)).data('owlCarousel').next();
-	},
+	baseClass : PropTypes.string,
+	theme : PropTypes.string,
 
-	prev() {
-		$(React.findDOMNode(this)).data('owlCarousel').prev();
-	},
+	lazyLoad : PropTypes.bool,
+	lazyFollow : PropTypes.bool,
+	lazyEffect : PropTypes.bool,
 
-	// Go to x slide
-	goTo(x) {
-		$(React.findDOMNode(this)).data('owlCarousel').goTo(x);
-	},
+	autoHeight : PropTypes.bool,
 
-	// Go to x slide without slide animation
-	jumpTo(x) {
-		$(React.findDOMNode(this)).data('owlCarousel').jumpTo(x);
-	},
+	jsonPath : PropTypes.string,
+	jsonSuccess : PropTypes.func,
 
-	play() {
-		$(React.findDOMNode(this)).data('owlCarousel').play();
-	},
+	dragBeforeAnimFinish : PropTypes.bool,
+	mouseDrag : PropTypes.bool,
+	touchDrag : PropTypes.bool,
 
-	stop() {
-		$(React.findDOMNode(this)).data('owlCarousel').stop();
-	},
+	addClassActive : PropTypes.bool,
+
+	//build-in transitionStyle: 'fade', 'backSlide', 'goDown', 'scaleUp'
+	transitionStyle : PropTypes.string,
 
-});
+	beforeUpdate : PropTypes.func,
+	afterUpdate : PropTypes.func,
+	beforeInit : PropTypes.func,
+	afterInit : PropTypes.func,
+	beforeMove : PropTypes.func,
+	afterMove : PropTypes.func,
+	afterAction : PropTypes.func,
+	startDragging : PropTypes.func,
+	afterLazyLoad: PropTypes.func,
+};
 
 export default OwlCarousel;
diff --git a/example/index.html b/example/index.html
@@ -13,6 +13,7 @@
 	</head>
 	<body>
 
+		<div id="root"></div>
 		<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 		<script src="./static/bundle.js"></script>
 	</body>

diff --git a/example/index.jsx b/example/index.jsx
@@ -2,14 +2,16 @@
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import ReactDOM from 'react-dom';
 import OwlCarousel from 'react-owl-carousel';
 import './style.css';
 
-var Main = React.createClass({
+class App extends React.Component {
+	constructor(props, context) {
+		super(props, context);
 
-	getInitialState: function() {
-		return {
+		this.state = {
 			items: [
 				<div key={1} className="item"><img src="/img/fullimage1.jpg" alt="The Last of us"/></div>,
 				<div key={2} className="item"><img src="/img/fullimage2.jpg" alt="GTA V"/></div>,
@@ -22,22 +24,21 @@ var Main = React.createClass({
 			singleItem : true,
 			autoPlay : true,
 		};
-	},
+	}
 
-	_addItem : function() {
-		var items = this.state.items;
+	addItem() {
+		let items = this.state.items;
 		items.push(<div key={this.state.items.length+1} className="item"><img src="/img/fullimage2.jpg" alt="GTA V"/></div>);
 		this.setState({items});
-	},
+	}
 
-	_newOptions : function() {
+	newOptions() {
 		this.setState({
 			navigation : false, // Show next and prev buttons
 		});
-	},
+	}
 
 	render() {
-
 		return (
 			<div>
 				<OwlCarousel
@@ -51,42 +52,40 @@ var Main = React.createClass({
 					{this.state.items}
 				</OwlCarousel>
 
-				<button onClick={function(e){this.refs.car.prev();}.bind(this)}>
+				<button onClick={() => this.this.refs.car.prev()}>
 					prev
 				</button>
 
-				<button onClick={function(e){this.refs.car.next();}.bind(this)}>
+				<button onClick={() => this.this.refs.car.next()}>
 					next
 				</button>
 
-				<button onClick={function(e){this.refs.car.goTo(0);}.bind(this)}>
+				<button onClick={() => this.this.refs.car.goTo(0)}>
 					goTo
 				</button>
 
-				<button onClick={function(e){this.refs.car.jumpTo(0);}.bind(this)}>
+				<button onClick={() => this.this.refs.car.jumpTo(0)}>
 					jumpTo
 				</button>
 
-				<button onClick={function(e){this.refs.car.play();}.bind(this)}>
+				<button onClick={() => this.this.refs.car.play()}>
 					play
 				</button>
 
-				<button onClick={function(e){this.refs.car.stop();}.bind(this)}>
+				<button onClick={() => this.this.refs.car.stop()}>
 					stop
 				</button>
 
-				<button onClick={this._addItem}>
+				<button onClick={this.addItem.bind(this)}>
 					Add New
 				</button>
 
-				<button onClick={this._newOptions}>
+				<button onClick={this.newOptions.bind(this)}>
 					New Options
 				</button>
 			</div>
 		);
-	},
-
-
-});
+	}
+}
 
-React.render(<Main />, document.body);
+ReactDOM.render(<App />, document.getElementById('root'));