react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.8 to 3.1.9

CHANGELOG.md

 # React Responsive Carousel
 
 
+## 3.1.8 - Mon Apr 24 2017
+ * Merge pull request #107 from leandrowd/issue-101
+    > #101: Updating to react 15.5.4
+ * Updating versions and setup for tests
+ * Updating storybook + filling in stories
+ * Updating react and tests
+ * Adding changelog
+
+
 ## 3.1.7 - Mon Apr 24 2017
@@ -122,4 +131,2 @@ * Merge pull request #106 from leandrowd/issue-104
  * Removing instance variables
- * Replacing icons by pure css arrows
- * Adding support to storybook
 
@@ -126,0 +133,0 @@

lib/components/Carousel.js

@@ -22,3 +22,3 @@ 'use strict';
     propTypes: {
-        children: PropTypes.node.isRequired,
+        children: PropTypes.node,
         showArrows: PropTypes.bool,
@@ -68,2 +68,3 @@ showStatus: PropTypes.bool,
             // index of the image to be shown.
+            initialized: false,
             selectedItem: this.props.selectedItem,
@@ -73,2 +74,9 @@ hasMount: false
     },
+    componentDidMount: function componentDidMount() {
+        if (!this.props.children) {
+            return;
+        }
+
+        this.setupCarousel();
+    },
     componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
@@ -90,3 +98,11 @@ if (nextProps.selectedItem !== this.state.selectedItem) {
     },
-    componentDidMount: function componentDidMount() {
+    componentDidUpdate: function componentDidUpdate(prevProps) {
+        if (!prevProps.children && this.props.children && !this.state.initialized) {
+            this.setupCarousel();
+        }
+    },
+    componentWillUnmount: function componentWillUnmount() {
+        this.destroyCarousel();
+    },
+    setupCarousel: function setupCarousel() {
         this.bindEvents();
@@ -105,6 +121,12 @@
         }
+
+        this.setState({
+            initialized: true
+        });
     },
-    componentWillUnmount: function componentWillUnmount() {
-        this.unbindEvents();
-        this.destroyAutoPlay();
+    destroyCarousel: function destroyCarousel() {
+        if (this.state.initialized) {
+            this.unbindEvents();
+            this.destroyAutoPlay();
+        }
     },
@@ -124,5 +146,5 @@ setupAutoPlay: function setupAutoPlay() {
         this.clearAutoPlay();
+        var carouselWrapper = this.refs['carouselWrapper'];
 
-        if (this.props.stopOnHover) {
-            var carouselWrapper = this.refs['carouselWrapper'];
+        if (this.props.stopOnHover && carouselWrapper) {
             carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
@@ -190,2 +212,6 @@ carouselWrapper.removeEventListener('touchstart', this.stopOnHover);
     updateSizes: function updateSizes() {
+        if (!this.state.initialized) {
+            return;
+        }
+
         var isHorizontal = this.props.axis === 'horizontal';
@@ -409,2 +435,6 @@ var firstItem = this.refs.item0;
     render: function render() {
+        if (!this.props.children) {
+            return null;
+        }
+
         var itemsLength = this.props.children.length;
@@ -411,0 +441,0 @@

lib/components/Thumbs.js

@@ -209,3 +209,3 @@ 'use strict';
 
-        if (this.props.children.length === 0) {
+        if (!this.props.children) {
             return null;
@@ -212,0 +212,0 @@ }

package.json

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

stories/index.js

@@ -1,5 +0,6 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { Carousel } from '../src/index';
 
+
 // carousel styles
@@ -29,4 +30,34 @@ import '../src/main.scss';
 
+class LazyLoadedCarousel extends Component {
+    constructor (props) {
+        super(props);
+
+        this.state = {
+            slides: null
+        };
+
+        this.loadSlides = this.loadSlides.bind(this);
+    }
+
+    loadSlides() {
+        this.setState({
+            slides: baseChildren.props.children
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <p>Click the button to asynchronously load the slides</p>
+                <button onClick={this.loadSlides} style={{padding: '10px', margin: '10px', fontSize: '1.5em'}}>Load slides</button>
+                <Carousel>
+                    { this.state.slides }
+                </Carousel>
+            </div>
+        );
+    }
+}
+
 storiesOf('Carousel')
-  .addWithInfo('PropTypes', () => <div/>,
+  .addWithInfo('PropTypes',  'All the allowed props and default values', () => <div/>,
     { source: false, inline: true, propTables: [Carousel]})
@@ -38,6 +69,42 @@ .addWithInfo('defaults',() => (
   ), { source: true, inline: true, propTables: false})
+  .addWithInfo('lazy loaded',
+    `
+    Code example:
+    ~~~js
+    class LazyLoadedCarousel extends Component {
+        constructor (props) {
+            super(props);
+
+            this.state = {
+                slides: null
+            };
+
+            this.loadSlides = this.loadSlides.bind(this);
+        }
+
+        loadSlides() {
+            this.setState({
+                slides: baseChildren.props.children
+            });
+        }
+
+        render() {
+            return (
+                <div>
+                    <button onClick={this.loadSlides}>Load slides</button>
+                    <Carousel>
+                        { this.state.slides }
+                    </Carousel>
+                </div>
+            );
+        }
+    }
+    ~~~
+            `,
+    () => (
+    <LazyLoadedCarousel />
+  ), { source: true, inline: true, propTables: false})
   .addWithInfo('handlers',
     <div>
     <p>Handlers will be called with the index of the element plus the element. i.e:</p>
-
     <code>
@@ -44,0 +111,0 @@ function myHandler(index, element)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1183073

increased by0.22%

Lines of code

1556

increased by5.71%

No dependency changes