react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.27 to 3.1.28

CHANGELOG.md

 # React Responsive Carousel
 
 
+## 3.1.27 - Tue Sep 26 2017
+ * #151: Autoplay keeps trying to transition after the component has been unmounted
+
+
 ## 3.1.26 - Fri Sep 22 2017
@@ -93,5 +97,2 @@ * add thumbWidth prop to allow specifying thumbnail width
 ## 3.1.11 - Wed Apr 26 2017
- * #98: Delay rendering of thumbs when children is not provided
- * #98: Adding snapshot tests
- * #98: Testing only component source, not storybook
 
@@ -98,0 +99,0 @@

lib/components/Carousel.js

@@ -186,4 +186,4 @@ 'use strict';
 
-            var currentPosition = -_this.state.selectedItem * 100;
-            var finalBoundry = -(_this.props.children.length - 1) * 100;
+            var currentPosition = _this.getPosition(_this.state.selectedItem);
+            var finalBoundry = _this.getPosition(_this.props.children.length - 1);
 
@@ -220,3 +220,3 @@ var axisDelta = isHorizontal ? delta.x : delta.y;
         _this.resetPosition = function () {
-            var currentPosition = -_this.state.selectedItem * 100 + '%';
+            var currentPosition = _this.getPosition(_this.state.selectedItem) + '%';
             _this.setPosition(currentPosition);
@@ -433,2 +433,20 @@ };
     }, {
+        key: 'getPosition',
+        value: function getPosition(index) {
+            if (this.props.centerMode && this.props.axis === 'horizontal') {
+                var currentPosition = -index * this.props.centerSlidePercentage;
+                var lastPosition = this.props.children.length - 1;
+
+                if (index && index !== lastPosition) {
+                    currentPosition += (100 - this.props.centerSlidePercentage) / 2;
+                } else if (index === lastPosition) {
+                    currentPosition += 100 - this.props.centerSlidePercentage;
+                }
+
+                return currentPosition;
+            }
+
+            return -index * 100;
+        }
+    }, {
         key: 'renderItems',
@@ -439,9 +457,19 @@ value: function renderItems() {
             return _react2.default.Children.map(this.props.children, function (item, index) {
-                var hasMount = _this2.state.hasMount;
                 var itemClass = _cssClasses2.default.ITEM(true, index === _this2.state.selectedItem);
+                var slideProps = {
+                    ref: 'item' + index,
+                    key: 'itemKey' + index,
+                    className: _cssClasses2.default.ITEM(true, index === _this2.state.selectedItem),
+                    onClick: _this2.handleClickItem.bind(_this2, index, item)
+                };
 
+                if (_this2.props.centerMode && _this2.props.axis === 'horizontal') {
+                    slideProps.style = {
+                        minWidth: _this2.props.centerSlidePercentage + '%'
+                    };
+                }
+
                 return _react2.default.createElement(
                     'li',
-                    { ref: "item" + index, key: "itemKey" + index, className: itemClass,
-                        onClick: _this2.handleClickItem.bind(_this2, index, item) },
+                    slideProps,
                     item
@@ -514,5 +542,6 @@ );
 
-            var currentPosition = -this.state.selectedItem * 100 + '%';
+            var currentPosition = this.getPosition(this.state.selectedItem);
+
             // if 3d is available, let's take advantage of the performance of transform
-            var transformProp = (0, _CSSTranslate2.default)(currentPosition, this.props.axis);
+            var transformProp = (0, _CSSTranslate2.default)(currentPosition + '%', this.props.axis);
 
@@ -622,3 +651,5 @@ var transitionTime = this.props.transitionTime + 'ms';
     emulateTouch: _propTypes2.default.bool,
-    statusFormatter: _propTypes2.default.func.isRequired
+    statusFormatter: _propTypes2.default.func.isRequired,
+    centerMode: _propTypes2.default.bool,
+    centerSlidePercentage: _propTypes2.default.number
 };
@@ -645,4 +676,6 @@ Carousel.defaultProps = {
     onChange: noop,
-    statusFormatter: defaultStatusFormatter
+    statusFormatter: defaultStatusFormatter,
+    centerMode: false,
+    centerSlidePercentage: 80
 };
 exports.default = Carousel;

package.json

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

README.md

@@ -7,2 +7,3 @@ # React Responsive Carousel
 [![Build Status](https://travis-ci.org/leandrowd/react-responsive-carousel.svg?branch=master)](https://travis-ci.org/leandrowd/react-responsive-carousel)
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_shield)
 
@@ -101,2 +102,4 @@ Powerful, lightweight and fully customizable carousel component for React apps.
 | statusFormatter       | `func`        | (current, total) => `${current} of ${total}` | Allows custom formatting of the status indicator |  
+| centerMode            | `boolean`     | `false` | Enables centered view with partial prev/next slides. Only works with horizontal axis. |
+| centerSlidePercentage | `number`      | `80` | optionally specify percentage width (as an integer) of the slides in `centerMode` |
 
@@ -160,1 +163,5 @@
 - [CONTRIBUTING](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md)
+
+
+## License
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_large)

No alert changes

Improved metrics

Total package byte prevSize

930154

increased by0.56%

Number of package files

37

increased by2.78%

Lines of code

1450

increased by1.97%

Number of lines in readme file

164

increased by3.8%

No dependency changes