From ea3a33e4f54efef0f73bc15735c320b3df20fb82 Mon Sep 17 00:00:00 2001 From: Xhriman Date: Mon, 11 Apr 2016 14:24:37 +0800 Subject: [PATCH 1/2] npm label --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b8e2330..90d0441 100644 --- 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 From 1d4acf6216189af50969e1088f17658e44f1f461 Mon Sep 17 00:00:00 2001 From: Xhriman Date: Mon, 11 Apr 2016 14:43:46 +0800 Subject: [PATCH 2/2] react 0.14 --- components/OwlCarousel.jsx | 217 ++++++++++++++++--------------------- example/index.html | 1 + example/index.jsx | 47 ++++---- package.json | 8 +- 4 files changed, 124 insertions(+), 149 deletions(-) diff --git a/components/OwlCarousel.jsx b/components/OwlCarousel.jsx index edafaa6..5d01cf5 100644 --- 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 (
{children}
); + } +} + +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 index 9e3f112..a2f6f0d 100644 --- a/example/index.html +++ b/example/index.html @@ -13,6 +13,7 @@ +
diff --git a/example/index.jsx b/example/index.jsx index db61571..2e65c3d 100644 --- 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: [
The Last of us
,
GTA V
, @@ -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(
GTA V
); this.setState({items}); - }, + } - _newOptions : function() { + newOptions() { this.setState({ navigation : false, // Show next and prev buttons }); - }, + } render() { - return (
- - - - - - - -
); - }, - - -}); + } +} -React.render(
, document.body); +ReactDOM.render(, document.getElementById('root')); diff --git a/package.json b/package.json index 3539ffb..8d4caf9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-owl-carousel", - "version": "0.13.4", + "version": "0.14.0", "description": "React.js + Owl Carousel", "main": "lib/OwlCarousel.js", "scripts": { @@ -26,7 +26,8 @@ }, "homepage": "https://github.com/seal789ie/react-owl-carousel#readme", "peerDependencies": { - "react": "~0.13.3" + "react": "^0.14.0 || ^15.0.0", + "react-dom": "^0.14.0 || ^15.0.0" }, "devDependencies": { "autoprefixer": "~6.3.1", @@ -50,8 +51,9 @@ "file-loader": "~0.8.5", "node-sass": "~3.4.2", "postcss-loader": "~0.8.0", + "react": "~0.14.8", + "react-dom": "~0.14.8", "rimraf": "~2.5.1", - "react": "~0.13.3", "sass-loader": "~3.1.2", "style-loader": "~0.13.0", "url-loader": "~0.5.7",