react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.34 to 3.1.35

CHANGELOG.md

 # React Responsive Carousel
 
 
+## 3.1.34 - Fri Mar 30 2018
+ * Include index.html to storybook url
+ * Replacing codepen with codesandbox
+ * Updating readme
+ * Fix story for swipeable
+ * feat: add story for swipeable
+ * test: add snapshot for swipeable false
+
+
 ## 3.1.33 - Mon Jan 29 2018
@@ -8,2 +17,6 @@ * Updating example with external controls
  * refactor: move style rules to not be applied to everying inside slide
+ * chore: add build /lib
+ * refactor: finding DOMNode of swiper with ReactDom method
+ * refactor: remove unused ref on ul tag
+ * fix: setting transform properties on swipe
  * Update index.d.ts
@@ -25,2 +38,6 @@ * Update index.d.ts
  * issue #191: Add alternative to codepen
+ * refactor: using ref as a callback instead of string to fix react ref error
+ * refactor: using if else statement instead of ternary to avoid multiple elements with same ref in render
+ * fix: typos in README and Carousel.js
+ * feat: add property to enable and disable swiping
  * Revert "Automating gh-pages publishing"
@@ -89,16 +106,8 @@
  * Adding license
- * Update README.md
 
-Removes duplicate option from the documentation
- * Update changelog and changelog whitelist
 
-
 ## 3.1.19 - Mon May 29 2017
- * #131: Add story and docs about the custom formatter
- * #131: Allow user to pass a custom formatter for status
- * #131: Removing old unused files
 
 
 ## 3.1.18 - Mon May 29 2017
- * #129: Allow only right and left keys when axis is horizontal
 
@@ -105,0 +114,0 @@

lib/components/Carousel.js

@@ -135,2 +135,6 @@ 'use strict';
             });
+
+            if (_this.refs.thumbs) {
+                _this.refs.thumbs.updateSizes();
+            }
         };
@@ -521,3 +525,3 @@
                 _Thumbs2.default,
-                { onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth },
+                { ref: 'thumbs', onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth },
                 this.props.children
@@ -524,0 +528,0 @@ );

lib/components/Thumbs.js

@@ -52,3 +52,3 @@ 'use strict';
         _this.updateSizes = function () {
-            if (!_this.state.initialized) {
+            if (!_this.props.children || !_this.refs.itemsWrapper) {
                 return;
@@ -58,7 +58,14 @@ }
             var total = _this.props.children.length;
-            _this.wrapperSize = _this.itemsWrapper.clientWidth;
-            _this.itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : (0, _dimensions.outerWidth)(_this.refs.thumb0);
-            _this.visibleItems = Math.floor(_this.wrapperSize / _this.itemSize);
-            _this.lastPosition = total - _this.visibleItems;
-            _this.showArrows = _this.visibleItems < total;
+            var wrapperSize = _this.refs.itemsWrapper.clientWidth;
+            var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : (0, _dimensions.outerWidth)(_this.refs.thumb0);
+            var visibleItems = Math.floor(wrapperSize / itemSize);
+            var lastPosition = total - visibleItems;
+            var showArrows = visibleItems < total;
+            _this.setState({
+                itemSize: itemSize,
+                visibleItems: visibleItems,
+                firstItem: showArrows ? _this.getFirstItem(_this.props.selectedItem) : 0,
+                lastPosition: lastPosition,
+                showArrows: showArrows
+            });
         };
@@ -93,8 +100,5 @@
             var leftBoundry = 0;
-            var list = _reactDom2.default.findDOMNode(_this.itemList);
-            var wrapperSize = list.clientWidth;
-            var visibleItems = Math.floor(wrapperSize / _this.itemSize);
 
-            var currentPosition = -_this.state.firstItem * _this.itemSize;
-            var lastLeftBoundry = -_this.visibleItems * _this.itemSize;
+            var currentPosition = -_this.state.firstItem * _this.state.itemSize;
+            var lastLeftBoundry = -_this.state.visibleItems * _this.state.itemSize;
 
@@ -141,7 +145,10 @@ // prevent user from swiping left out of boundaries
         _this.state = {
-            initialized: false,
             selectedItem: props.selectedItem,
             hasMount: false,
-            firstItem: _this.getFirstItem(props.selectedItem),
-            images: []
+            firstItem: 0,
+            itemSize: null,
+            visibleItems: 0,
+            lastPosition: 0,
+            showArrows: false,
+            images: _this.getImages()
         };
@@ -154,6 +161,2 @@ return _this;
         value: function componentDidMount(nextProps) {
-            if (!this.props.children) {
-                return;
-            }
-
             this.setupThumbs();
@@ -170,2 +173,7 @@ }
             }
+            if (props.children !== this.props.children) {
+                this.setState({
+                    images: this.getImages()
+                });
+            }
         }
@@ -175,5 +183,9 @@ }, {
         value: function componentDidUpdate(prevProps) {
-            if (!prevProps.children && this.props.children && !this.state.initialized) {
-                this.setupThumbs();
+            if (this.props.children === prevProps.children) {
+                return;
             }
+
+            // This will capture any size changes for arrow adjustments etc.
+            // usually in the same render cycle so we don't see any flickers
+            this.updateSizes();
         }
@@ -194,13 +206,2 @@ }, {
 
-            var images = this.getImages();
-
-            if (!images) {
-                return;
-            }
-
-            this.setState({
-                initialized: true,
-                images: images
-            });
-
             // when the component is rendered we need to calculate
@@ -250,13 +251,9 @@ // the container size to adjust the responsive behaviour
         value: function getFirstItem(selectedItem) {
-            if (!this.showArrows) {
-                return 0;
-            }
-
             var firstItem = selectedItem;
 
-            if (selectedItem >= this.lastPosition) {
-                firstItem = this.lastPosition;
+            if (selectedItem >= this.state.lastPosition) {
+                firstItem = this.state.lastPosition;
             }
 
-            if (selectedItem < this.state.firstItem + this.visibleItems) {
+            if (selectedItem < this.state.firstItem + this.state.visibleItems) {
                 firstItem = this.state.firstItem;
@@ -304,3 +301,3 @@ }
 
-            if (!this.props.children || this.state.images.length === 0) {
+            if (!this.props.children) {
                 return null;
@@ -310,9 +307,9 @@ }
             // show left arrow?
-            var hasPrev = this.showArrows && this.state.firstItem > 0;
+            var hasPrev = this.state.showArrows && this.state.firstItem > 0;
             // show right arrow
-            var hasNext = this.showArrows && this.state.firstItem < this.lastPosition;
+            var hasNext = this.state.showArrows && this.state.firstItem < this.state.lastPosition;
             // obj to hold the transformations and styles
             var itemListStyles = {};
 
-            var currentPosition = -this.state.firstItem * this.itemSize + 'px';
+            var currentPosition = -this.state.firstItem * this.state.itemSize + 'px';
 
@@ -343,5 +340,3 @@ var transformProp = (0, _CSSTranslate2.default)(currentPosition, this.props.axis);
                     'div',
-                    { className: _cssClasses2.default.WRAPPER(false), ref: function ref(node) {
-                            return _this3.itemsWrapper = node;
-                        } },
+                    { className: _cssClasses2.default.WRAPPER(false), ref: 'itemsWrapper' },
                     _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight }),
@@ -348,0 +343,0 @@ _react2.default.createElement(

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

932882

increased by0.05%

Lines of code

1476

increased by0.14%

No dependency changes