react-free-carousel - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

lib/Component.js

@@ -39,2 +39,6 @@ 'use strict';
 
+var toArray = function toArray(item) {
+  return item instanceof Array ? item : [item];
+};
+
 var ReactFreeCarousel = function (_React$Component) {
@@ -67,17 +71,21 @@ _inherits(ReactFreeCarousel, _React$Component);
         _this2.playCarousel();
+        if (_this2.props.slide > 0) {
+          _this2.gotoTile(_this2.props.slide);
+        } else if (_this2.props.page > 0) {
+          _this2.gotoPage(_this2.props.page);
+        }
         (0, _jquery2.default)(window).on('resize orientationchange', (0, _lodash2.default)(_this2.reRender, 500));
       }, 100);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(newProps) {
+      var _this3 = this;
 
-      // //debug
-      // setInterval(() => {
-      //   this.reRender(false);
-      // }, 5000);
+      if (toArray(newProps.children).length !== newProps(this.props.children).length) {
+        setTimeout(function () {
+          _this3.reRender(false);
+        }, 200);
+      }
     }
-
-    // componentWillReceiveProps() {
-    //   setTimeout(() => {
-    //     this.reRender(false);
-    //   }, 100);
-    // }
-
   }, {
@@ -92,3 +100,3 @@ key: 'componentWillUnmount',
     value: function reRender() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -107,7 +115,7 @@ var scrollToStart = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       setTimeout(function () {
-        _this3.setState({
+        _this4.setState({
           page: page,
           pages: totalPages
         }, function () {
-          _this3.playCarousel();
+          _this4.playCarousel();
         });
@@ -119,9 +127,9 @@ }, this.props.transitionSpeed + 50);
     value: function playCarousel() {
-      var _this4 = this;
+      var _this5 = this;
 
       if (this.state.pages > 0 && this.props.autoplay && this.props.interval) {
         this.slidingInterval = setInterval(function () {
-          var page = _this4.state.page === _this4.state.pages ? 0 : _this4.state.page + 1;
+          var page = _this5.state.page === _this5.state.pages ? 0 : _this5.state.page + 1;
 
-          _this4.gotoPage(page);
+          _this5.gotoPage(page);
         }, this.props.interval);
@@ -140,3 +148,3 @@ }
     value: function gotoPage(page) {
-      var _this5 = this;
+      var _this6 = this;
 
@@ -147,3 +155,3 @@ var newPage = page > this.state.pages ? 0 : page;
       this.setState({ page: newPage }, function () {
-        _this5.playCarousel();
+        _this6.playCarousel();
       });
@@ -153,2 +161,12 @@ (0, _jquery2.default)(this.container).css('margin-left', '-' + this.pageToOffset(newPage) + 'px');
   }, {
+    key: 'gotoTile',
+    value: function gotoTile(index) {
+      var $container = (0, _jquery2.default)(this.container);
+      var $tile = (0, _jquery2.default)($container.children().get(index));
+
+      if ($tile.length) {
+        this.gotoPage(Number($tile.attr('data-page')));
+      }
+    }
+  }, {
     key: 'pageToOffset',
@@ -227,3 +245,3 @@ value: function pageToOffset(page) {
     value: function renderPagination() {
-      var _this6 = this;
+      var _this7 = this;
 
@@ -235,3 +253,3 @@ return _react2.default.createElement(
           ref: function ref(node) {
-            _this6.pagination = node;
+            _this7.pagination = node;
           },
@@ -244,7 +262,7 @@ role: 'navigation' },
               'aria-label': 'Goto Page ' + (i + 1),
-              className: '\n                ' + _this6.props.paginationDotClass + '\n                ' + (i === _this6.state.page ? _this6.props.paginationDotActiveClass : ''),
-              'data-active': i === _this6.state.page ? 'true' : 'false',
+              className: '\n                ' + _this7.props.paginationDotClass + '\n                ' + (i === _this7.state.page ? _this7.props.paginationDotActiveClass : ''),
+              'data-active': i === _this7.state.page ? 'true' : 'false',
               key: i,
               onClick: function onClick() {
-                _this6.gotoPage(i);
+                _this7.gotoPage(i);
               } },
@@ -259,10 +277,10 @@ i + 1
     value: function renderArrows(kind) {
-      var _this7 = this;
+      var _this8 = this;
 
       var calculateNextPage = function calculateNextPage(direction) {
-        if (direction === 'next' && _this7.state.page < _this7.state.pages) {
-          return _this7.state.page + 1;
+        if (direction === 'next' && _this8.state.page < _this8.state.pages) {
+          return _this8.state.page + 1;
         }
-        if (direction === 'prev' && _this7.state.page > 0) {
-          return _this7.state.page - 1;
+        if (direction === 'prev' && _this8.state.page > 0) {
+          return _this8.state.page - 1;
         }
@@ -278,3 +296,3 @@ return null;
         onClick: function onClick() {
-          _this7.gotoPage(nextPage);
+          _this8.gotoPage(nextPage);
         },
@@ -287,3 +305,3 @@ role: 'button',
     value: function render() {
-      var _this8 = this;
+      var _this9 = this;
 
@@ -332,3 +350,3 @@ var _props = this.props,
           ref: function ref(node) {
-            _this8.wrapper = node;
+            _this9.wrapper = node;
           },
@@ -343,3 +361,3 @@ style: wrapperStyling },
               ref: function ref(node) {
-                _this8.container = node;
+                _this9.container = node;
               },
@@ -373,2 +391,3 @@ style: containerStyling },
   page: _propTypes2.default.number,
+  slide: _propTypes2.default.number,
   minPagesToShowPagination: _propTypes2.default.number,
@@ -392,2 +411,3 @@ paginationClass: _propTypes2.default.string,
   page: 0,
+  slide: null,
   minPagesToShowPagination: 2,
@@ -394,0 +414,0 @@ paginationClass: '',

package.json

 {
   "name": "react-free-carousel",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Carousel component for free flex-box layout built with React.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -62,3 +62,4 @@ # react-free-carousel [![npm](https://img.shields.io/npm/v/react-free-carousel.svg?style=flat-square)](https://www.npmjs.com/package/react-free-carousel)
 | `autoplay`                 | boolean             | true          | Autostart carousel.
-| `page`                     | number              | 0             | Page to show.
+| `page`                     | number              | 0             | Page to show (0-indexed).
+| `slide`                    | number              | null          | Slide to scroll to (0-indexed).
 | `showPagination`           | boolean             | true          | Show pagination.
@@ -65,0 +66,0 @@ | `minPagesToShowPagination` | number              | 2             | Min number of page to show the pagination.

src/Component.js

@@ -7,2 +7,4 @@ import React from 'react';
 
+const toArray = item => item instanceof Array ? item : [item];
+
 export default class ReactFreeCarousel extends React.Component {
@@ -25,17 +27,19 @@ constructor(props) {
       this.playCarousel();
+      if (this.props.slide > 0) {
+        this.gotoTile(this.props.slide);
+      } else if (this.props.page > 0) {
+        this.gotoPage(this.props.page);
+      }
       $(window).on('resize orientationchange', debounce(this.reRender, 500));
     }, 100);
+  }
 
-    // //debug
-    // setInterval(() => {
-    //   this.reRender(false);
-    // }, 5000);
+  componentWillReceiveProps(newProps) {
+    if (toArray(newProps.children).length !== newProps(this.props.children).length) {
+      setTimeout(() => {
+        this.reRender(false);
+      }, 200);
+    }
   }
 
-  // componentWillReceiveProps() {
-  //   setTimeout(() => {
-  //     this.reRender(false);
-  //   }, 100);
-  // }
-
   componentWillUnmount() {
@@ -92,2 +96,11 @@ this.stopCarousel();
 
+  gotoTile(index) {
+    const $container = $(this.container);
+    const $tile = $($container.children().get(index));
+
+    if ($tile.length) {
+      this.gotoPage(Number($tile.attr('data-page')));
+    }
+  }
+
   pageToOffset(page) {
@@ -299,2 +312,3 @@ const $container = $(this.container);
   page: PropTypes.number,
+  slide: PropTypes.number,
   minPagesToShowPagination: PropTypes.number,
@@ -318,2 +332,3 @@ paginationClass: PropTypes.string,
   page: 0,
+  slide: null,
   minPagesToShowPagination: 2,
@@ -320,0 +335,0 @@ paginationClass: '',

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

848496

increased by0.45%

Lines of code

10401

increased by0.53%

Number of lines in readme file

105

increased by0.96%

No dependency changes