nuka-carousel - npm Package Compare versions

Comparing version 4.7.3 to 4.7.4

CHANGELOG.md

 # Nuka Changelog
 
+## 4.7.3 (2020-11-24)
+
+- [#740](https://github.com/FormidableLabs/nuka-carousel/pull/740) Update Wicg-inert and puppeteer
+- [#737](https://github.com/FormidableLabs/nuka-carousel/pull/737) Types update: fix PreviousButton, NextButton, and PagingDots def
+- [#734](https://github.com/FormidableLabs/nuka-carousel/pull/734) Fix: showing partial slides breaks navigation dots
+
 ## 4.7.2 (2020-10-30)
@@ -4,0 +10,0 @@

es/default-controls.js

@@ -7,2 +7,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+/* eslint-disable complexity */
 import React from 'react';
@@ -53,3 +54,5 @@ import { getAlignmentOffset } from './utilities/style-utilities';
       slideWidth = _ref.slideWidth,
-      wrapAround = _ref.wrapAround;
+      wrapAround = _ref.wrapAround,
+      scrollMode = _ref.scrollMode,
+      slidesToScroll = _ref.slidesToScroll;
   var buttonDisabled = false;
@@ -69,2 +72,9 @@
     buttonDisabled = relativePosition < endPosition || Math.abs(relativePosition - endPosition) < 0.01;
+  } // return true if its last slide or slideCount =0
+
+
+  var lastSlide = currentSlide > 0 && currentSlide + slidesToScroll >= slideCount;
+
+  if (lastSlide && !wrapAround && scrollMode === 'remainder' || slideCount === 0) {
+    return buttonDisabled = true;
   }
@@ -91,3 +101,5 @@
       vertical = props.vertical,
-      wrapAround = props.wrapAround;
+      wrapAround = props.wrapAround,
+      scrollMode = props.scrollMode,
+      slidesToScroll = props.slidesToScroll;
   var nextButtonClassName = defaultControlsConfig.nextButtonClassName,
@@ -106,3 +118,5 @@ _defaultControlsConfi = defaultControlsConfig.nextButtonStyle,
     slideWidth: slideWidth,
-    wrapAround: wrapAround
+    wrapAround: wrapAround,
+    scrollMode: scrollMode,
+    slidesToScroll: slidesToScroll
   });
@@ -118,3 +132,3 @@ return /*#__PURE__*/React.createElement("button", {
 };
-export var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
+export var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign) {
   var dotIndexes = [];
@@ -142,10 +156,13 @@ var lastDotIndex = slideCount - slidesToShow;
     dotIndexes.push(i);
-  } // the below condition includes the last index if slidesToShow is not decimal and cellAlign = left and mode = page
+  } // the below condition includes the last index if slidesToShow is not decimal and cellAlign = left
 
 
-  if (cellAlign === 'left' && scrollMode === 'page' && !slidesToShowIsDecimal) {
+  if (cellAlign === 'left' && !slidesToShowIsDecimal) {
     lastDotIndex = slideCount - (slideCount % slidesToShow || slidesToShow);
   }
 
-  dotIndexes.push(lastDotIndex);
+  if (!dotIndexes.includes(lastDotIndex)) {
+    dotIndexes.push(lastDotIndex);
+  }
+
   return dotIndexes;
@@ -175,3 +192,3 @@ };
 
-  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign, props.scrollMode);
+  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign);
   var _props$defaultControl3 = props.defaultControlsConfig,
@@ -178,0 +195,0 @@ pagingDotsContainerClassName = _props$defaultControl3.pagingDotsContainerClassName,

es/index.js

@@ -698,3 +698,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-      if (lastSlide && this.props.slideWidth !== 1 && !this.props.wrapAround && this.props.slidesToScroll === 'auto') {
+      if (lastSlide && !this.props.wrapAround && this.props.scrollMode === 'remainder') {
         left = this.state.slideWidth * this.state.slideCount - this.state.frameWidth;
@@ -872,3 +872,3 @@ offset = 0;
         var offset = targetSlideIndex;
-        var leftAlignSlideIndex = this.props.scrollMode === 'page' ? offset : Math.min(offset, slideCount - slidesToShow);
+        var leftAlignSlideIndex = this.props.scrollMode === 'page' ? offset : Math.min(offset, slideCount - Math.floor(slidesToShow));
         var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : leftAlignSlideIndex; // If nextSlideIndex is larger than last index, then
@@ -984,3 +984,4 @@ // just navigate to last index
       }
-    }
+    } // eslint-disable-next-line complexity
+
   }, {
@@ -1013,2 +1014,6 @@ key: "setDimensions",
 
+      if ((props.slideWidth !== 1 || props.cellSpacing > 0) && scrollMode === 'page' && cellAlign === 'left') {
+        slidesToShow = slidesToScroll;
+      }
+
       this.setState({
@@ -1015,0 +1020,0 @@ frameWidth: frameWidth,

es/transitions/scroll-transition.js

@@ -155,2 +155,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
       var transform = "translate3d(".concat(deltaX, "px, ").concat(deltaY, "px, 0)");
+      var transition = this.props.heightMode === 'current' && this.props.hasInteraction ? 'height 0.2s ease-out' : '0s';
       return {
@@ -169,3 +170,4 @@ boxSizing: 'border-box',
         WebkitTransform: transform,
-        width: 'auto'
+        width: 'auto',
+        transition: transition
       };
@@ -202,2 +204,3 @@ }
   frameWidth: PropTypes.number,
+  hasInteraction: PropTypes.bool,
   heightMode: PropTypes.oneOf(['first', 'current', 'max']),
@@ -204,0 +207,0 @@ isWrappingAround: PropTypes.bool,

es/utilities/style-utilities.js

@@ -182,2 +182,3 @@ import React from 'react';
     frameWidth: parseInt(state.frameWidth),
+    hasInteraction: state.hasInteraction,
     heightMode: props.heightMode,
@@ -184,0 +185,0 @@ isWrappingAround: state.isWrappingAround,

es/utilities/utilities.js

@@ -49,3 +49,3 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
       };
-      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), ariaProps));
+      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, ariaProps), child.props));
     });
@@ -61,3 +61,3 @@ } else {
       };
-      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), ariaProps));
+      return /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, ariaProps), child.props));
     });
@@ -200,3 +200,4 @@ }
       frameWidth = config.frameWidth,
-      wrapAround = config.wrapAround; // Slide width can't be 0
+      wrapAround = config.wrapAround,
+      cellAlign = config.cellAlign; // Slide width can't be 0
 
@@ -207,4 +208,18 @@ var fullSlideWidth = slideWidth || 1; // Calculate offset without cellSpacing
   var remainingWidth = frameWidth - offsetWidth;
-  var fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
-  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth) - 1, 0);
+  var fullSlidesBefore = 0;
+
+  if (cellAlign !== 'left') {
+    fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth) + 1, 0);
+  } else {
+    fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
+  }
+
+  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth), 0); // when slidesToScroll is auto enable clicking of all fully visible slides
+
+  if (fullSlidesAfter + fullSlidesBefore + currentSlide >= slideCount && !wrapAround) {
+    var fullSlidesAuto = fullSlidesBefore + fullSlidesAfter;
+    fullSlidesAfter = fullSlidesAuto;
+    fullSlidesBefore = fullSlidesAuto;
+  }
+
   var currentSlideIndex = Math.ceil(currentSlide);
@@ -211,0 +226,0 @@ var fullyVisibleSlides = [];

lib/default-controls.js

@@ -65,3 +65,5 @@ "use strict";
       slideWidth = _ref.slideWidth,
-      wrapAround = _ref.wrapAround;
+      wrapAround = _ref.wrapAround,
+      scrollMode = _ref.scrollMode,
+      slidesToScroll = _ref.slidesToScroll;
   var buttonDisabled = false;
@@ -81,2 +83,9 @@
     buttonDisabled = relativePosition < endPosition || Math.abs(relativePosition - endPosition) < 0.01;
+  } // return true if its last slide or slideCount =0
+
+
+  var lastSlide = currentSlide > 0 && currentSlide + slidesToScroll >= slideCount;
+
+  if (lastSlide && !wrapAround && scrollMode === 'remainder' || slideCount === 0) {
+    return buttonDisabled = true;
   }
@@ -106,3 +115,5 @@
       vertical = props.vertical,
-      wrapAround = props.wrapAround;
+      wrapAround = props.wrapAround,
+      scrollMode = props.scrollMode,
+      slidesToScroll = props.slidesToScroll;
   var nextButtonClassName = defaultControlsConfig.nextButtonClassName,
@@ -121,3 +132,5 @@ _defaultControlsConfi = defaultControlsConfig.nextButtonStyle,
     slideWidth: slideWidth,
-    wrapAround: wrapAround
+    wrapAround: wrapAround,
+    scrollMode: scrollMode,
+    slidesToScroll: slidesToScroll
   });
@@ -136,3 +149,3 @@ return /*#__PURE__*/_react["default"].createElement("button", {
 
-var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign, scrollMode) {
+var getDotIndexes = function getDotIndexes(slideCount, slidesToScroll, slidesToShow, cellAlign) {
   var dotIndexes = [];
@@ -160,10 +173,13 @@ var lastDotIndex = slideCount - slidesToShow;
     dotIndexes.push(i);
-  } // the below condition includes the last index if slidesToShow is not decimal and cellAlign = left and mode = page
+  } // the below condition includes the last index if slidesToShow is not decimal and cellAlign = left
 
 
-  if (cellAlign === 'left' && scrollMode === 'page' && !slidesToShowIsDecimal) {
+  if (cellAlign === 'left' && !slidesToShowIsDecimal) {
     lastDotIndex = slideCount - (slideCount % slidesToShow || slidesToShow);
   }
 
-  dotIndexes.push(lastDotIndex);
+  if (!dotIndexes.includes(lastDotIndex)) {
+    dotIndexes.push(lastDotIndex);
+  }
+
   return dotIndexes;
@@ -196,3 +212,3 @@ };
 
-  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign, props.scrollMode);
+  var indexes = getDotIndexes(props.slideCount, props.slidesToScroll, props.slidesToShow, props.cellAlign);
   var _props$defaultControl3 = props.defaultControlsConfig,
@@ -199,0 +215,0 @@ pagingDotsContainerClassName = _props$defaultControl3.pagingDotsContainerClassName,

lib/index.js

@@ -740,3 +740,3 @@ "use strict";
 
-      if (lastSlide && this.props.slideWidth !== 1 && !this.props.wrapAround && this.props.slidesToScroll === 'auto') {
+      if (lastSlide && !this.props.wrapAround && this.props.scrollMode === 'remainder') {
         left = this.state.slideWidth * this.state.slideCount - this.state.frameWidth;
@@ -914,3 +914,3 @@ offset = 0;
         var offset = targetSlideIndex;
-        var leftAlignSlideIndex = this.props.scrollMode === 'page' ? offset : Math.min(offset, slideCount - slidesToShow);
+        var leftAlignSlideIndex = this.props.scrollMode === 'page' ? offset : Math.min(offset, slideCount - Math.floor(slidesToShow));
         var nextSlideIndex = this.props.cellAlign !== 'left' ? offset : leftAlignSlideIndex; // If nextSlideIndex is larger than last index, then
@@ -1026,3 +1026,4 @@ // just navigate to last index
       }
-    }
+    } // eslint-disable-next-line complexity
+
   }, {
@@ -1055,2 +1056,6 @@ key: "setDimensions",
 
+      if ((props.slideWidth !== 1 || props.cellSpacing > 0) && scrollMode === 'page' && cellAlign === 'left') {
+        slidesToShow = slidesToScroll;
+      }
+
       this.setState({
@@ -1057,0 +1062,0 @@ frameWidth: frameWidth,

lib/transitions/scroll-transition.js

@@ -171,2 +171,3 @@ "use strict";
       var transform = "translate3d(".concat(deltaX, "px, ").concat(deltaY, "px, 0)");
+      var transition = this.props.heightMode === 'current' && this.props.hasInteraction ? 'height 0.2s ease-out' : '0s';
       return {
@@ -185,3 +186,4 @@ boxSizing: 'border-box',
         WebkitTransform: transform,
-        width: 'auto'
+        width: 'auto',
+        transition: transition
       };
@@ -218,2 +220,3 @@ }
   frameWidth: _propTypes["default"].number,
+  hasInteraction: _propTypes["default"].bool,
   heightMode: _propTypes["default"].oneOf(['first', 'current', 'max']),
@@ -220,0 +223,0 @@ isWrappingAround: _propTypes["default"].bool,

lib/utilities/style-utilities.js

@@ -211,2 +211,3 @@ "use strict";
     frameWidth: parseInt(state.frameWidth),
+    hasInteraction: state.hasInteraction,
     heightMode: props.heightMode,
@@ -213,0 +214,0 @@ isWrappingAround: state.isWrappingAround,

lib/utilities/utilities.js

@@ -66,3 +66,3 @@ "use strict";
       };
-      return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), ariaProps));
+      return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, ariaProps), child.props));
     });
@@ -78,3 +78,3 @@ } else {
       };
-      return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props), ariaProps));
+      return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, ariaProps), child.props));
     });
@@ -241,3 +241,4 @@ }
       frameWidth = config.frameWidth,
-      wrapAround = config.wrapAround; // Slide width can't be 0
+      wrapAround = config.wrapAround,
+      cellAlign = config.cellAlign; // Slide width can't be 0
 
@@ -248,4 +249,18 @@ var fullSlideWidth = slideWidth || 1; // Calculate offset without cellSpacing
   var remainingWidth = frameWidth - offsetWidth;
-  var fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
-  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth) - 1, 0);
+  var fullSlidesBefore = 0;
+
+  if (cellAlign !== 'left') {
+    fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth) + 1, 0);
+  } else {
+    fullSlidesBefore = Math.max(Math.floor(offsetWidth / fullSlideWidth), 0);
+  }
+
+  var fullSlidesAfter = Math.max(Math.floor(remainingWidth / fullSlideWidth), 0); // when slidesToScroll is auto enable clicking of all fully visible slides
+
+  if (fullSlidesAfter + fullSlidesBefore + currentSlide >= slideCount && !wrapAround) {
+    var fullSlidesAuto = fullSlidesBefore + fullSlidesAfter;
+    fullSlidesAfter = fullSlidesAuto;
+    fullSlidesBefore = fullSlidesAuto;
+  }
+
   var currentSlideIndex = Math.ceil(currentSlide);
@@ -252,0 +267,0 @@ var fullyVisibleSlides = [];

package.json

 {
   "name": "nuka-carousel",
-  "version": "4.7.3",
+  "version": "4.7.4",
   "description": "Pure React Carousel",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -215,3 +215,3 @@ [![Maintenance Status][maintenance-image]](#maintenance-status)
   nextButtonText: 'Custom Next',
-  prevButtonText: 'Customn Prev',
+  prevButtonText: 'Custom Prev',
   pagingDotsStyle: {
@@ -218,0 +218,0 @@ fill: 'red'

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

292482

increased by1.09%

Lines of code

5554

increased by1.11%

No dependency changes