nuka-carousel - npm Package Compare versions

Comparing version 5.0.13 to 5.0.14

es-v5/carousel.js

@@ -60,2 +60,4 @@ 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; }
 
+  var visibleHeights = useRef([]);
+
   var _useState13 = useState(null),
@@ -388,2 +390,3 @@ _useState14 = _slicedToArray(_useState13, 2),
         frameHeight: frameHeight,
+        visibleHeights: visibleHeights,
         adaptiveHeight: props.adaptiveHeight
@@ -390,0 +393,0 @@ }, child);

es-v5/slide.js

@@ -0,1 +1,13 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 import React, { useRef, useEffect } from 'react';
@@ -14,5 +26,4 @@ import { Alignment } from './types';
     width: width,
-    height: '100%',
-    display: 'inline-block',
-    verticalAlign: adaptiveHeight ? 'top' : 'inherit',
+    flex: 1,
+    height: adaptiveHeight ? '100%' : 'auto',
     padding: "0 ".concat(cellSpacing ? cellSpacing / 2 : 0, "px"),
@@ -73,6 +84,8 @@ transition: animation ? "".concat(speed || animationSpeed, "ms ease 0s") : 'none',
       frameHeight = _ref.frameHeight,
+      visibleHeights = _ref.visibleHeights,
       adaptiveHeight = _ref.adaptiveHeight;
   var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
   var isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
-  var slideRef = useRef(null);
+  var slideRef = useRef(null); // eslint-disable-next-line complexity
+
   useEffect(function () {
@@ -82,2 +95,6 @@ var node = slideRef.current;
     if (node) {
+      var _node$getBoundingClie;
+
+      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
+
       if (isVisible) {
@@ -88,14 +105,36 @@ node.removeAttribute('inert');
       }
+
+      if (adaptiveHeight && isVisible && slidesToShow === 1) {
+        if (slideHeight !== frameHeight) {
+          setFrameHeight(slideHeight);
+        }
+      } else if (adaptiveHeight && isVisible && slidesToShow > 1) {
+        visibleHeights.current = [].concat(_toConsumableArray(visibleHeights.current), [{
+          height: slideHeight,
+          slideIndex: customIndex
+        }]);
+      } else if (adaptiveHeight && !isVisible && visibleHeights.current.findIndex(function (v) {
+        return v.slideIndex === customIndex;
+      }) > -1) {
+        visibleHeights.current = visibleHeights.current.filter(function (v) {
+          return v.slideIndex !== customIndex;
+        });
+      }
     }
+  }, [isVisible]);
+  useEffect(function () {
+    if (adaptiveHeight && slidesToShow > 1) {
+      var newFrameHeight = visibleHeights.current.reduce(function (acc, value) {
+        if (acc >= value.height) {
+          return acc;
+        }
 
-    if (adaptiveHeight && node && isVisible) {
-      var _node$getBoundingClie;
+        return value.height;
+      }, 0);
 
-      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
-
-      if (slideHeight > frameHeight) {
-        setFrameHeight(slideHeight);
+      if (newFrameHeight !== frameHeight) {
+        setFrameHeight(newFrameHeight);
       }
     }
-  }, [isVisible]);
+  }, [adaptiveHeight, visibleHeights.current]);
   return /*#__PURE__*/React.createElement("div", {
@@ -102,0 +141,0 @@ ref: slideRef,

es-v5/slider-list.js

@@ -107,4 +107,5 @@ import React from 'react';
     transition: animation && slideAnimation !== 'fade' ? "".concat(speed || 500, "ms ease 0s") : 'none',
-    transform: positioning
+    transform: positioning,
+    display: 'flex'
   };
 };

index.d.ts

@@ -150,2 +150,7 @@ import * as React from 'react';
   /**
+   * Explicit children prop to resolve issue with @types/react v18
+   */
+  children?: React.ReactNode;
+
+  /**
    * Additional className
@@ -152,0 +157,0 @@ */

lib-v5/carousel.js

@@ -81,2 +81,4 @@ "use strict";
 
+  var visibleHeights = (0, _react.useRef)([]);
+
   var _useState13 = (0, _react.useState)(null),
@@ -409,2 +411,3 @@ _useState14 = _slicedToArray(_useState13, 2),
         frameHeight: frameHeight,
+        visibleHeights: visibleHeights,
         adaptiveHeight: props.adaptiveHeight
@@ -411,0 +414,0 @@ }, child);

lib-v5/slide.js

@@ -18,2 +18,14 @@ "use strict";
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 var getSlideWidth = function getSlideWidth(count, wrapAround) {
@@ -29,5 +41,4 @@ return "".concat(wrapAround ? 100 / (3 * count) : 100 / count, "%");
     width: width,
-    height: '100%',
-    display: 'inline-block',
-    verticalAlign: adaptiveHeight ? 'top' : 'inherit',
+    flex: 1,
+    height: adaptiveHeight ? '100%' : 'auto',
     padding: "0 ".concat(cellSpacing ? cellSpacing / 2 : 0, "px"),
@@ -88,6 +99,8 @@ transition: animation ? "".concat(speed || animationSpeed, "ms ease 0s") : 'none',
       frameHeight = _ref.frameHeight,
+      visibleHeights = _ref.visibleHeights,
       adaptiveHeight = _ref.adaptiveHeight;
   var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
   var isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
-  var slideRef = (0, _react.useRef)(null);
+  var slideRef = (0, _react.useRef)(null); // eslint-disable-next-line complexity
+
   (0, _react.useEffect)(function () {
@@ -97,2 +110,6 @@ var node = slideRef.current;
     if (node) {
+      var _node$getBoundingClie;
+
+      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
+
       if (isVisible) {
@@ -103,14 +120,36 @@ node.removeAttribute('inert');
       }
+
+      if (adaptiveHeight && isVisible && slidesToShow === 1) {
+        if (slideHeight !== frameHeight) {
+          setFrameHeight(slideHeight);
+        }
+      } else if (adaptiveHeight && isVisible && slidesToShow > 1) {
+        visibleHeights.current = [].concat(_toConsumableArray(visibleHeights.current), [{
+          height: slideHeight,
+          slideIndex: customIndex
+        }]);
+      } else if (adaptiveHeight && !isVisible && visibleHeights.current.findIndex(function (v) {
+        return v.slideIndex === customIndex;
+      }) > -1) {
+        visibleHeights.current = visibleHeights.current.filter(function (v) {
+          return v.slideIndex !== customIndex;
+        });
+      }
     }
+  }, [isVisible]);
+  (0, _react.useEffect)(function () {
+    if (adaptiveHeight && slidesToShow > 1) {
+      var newFrameHeight = visibleHeights.current.reduce(function (acc, value) {
+        if (acc >= value.height) {
+          return acc;
+        }
 
-    if (adaptiveHeight && node && isVisible) {
-      var _node$getBoundingClie;
+        return value.height;
+      }, 0);
 
-      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
-
-      if (slideHeight > frameHeight) {
-        setFrameHeight(slideHeight);
+      if (newFrameHeight !== frameHeight) {
+        setFrameHeight(newFrameHeight);
       }
     }
-  }, [isVisible]);
+  }, [adaptiveHeight, visibleHeights.current]);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -117,0 +156,0 @@ ref: slideRef,

lib-v5/slider-list.js

@@ -118,3 +118,4 @@ "use strict";
     transition: animation && slideAnimation !== 'fade' ? "".concat(speed || 500, "ms ease 0s") : 'none',
-    transform: positioning
+    transform: positioning,
+    display: 'flex'
   };
@@ -121,0 +122,0 @@ };

package.json

 {
   "name": "nuka-carousel",
-  "version": "5.0.13",
+  "version": "5.0.14",
   "description": "Pure React Carousel",
   "main": "index.js",
-  "module": "es/index.js",
-  "jsnext:main": "es/index.js",
+  "module": "es-v5/index.js",
+  "jsnext:main": "es-v5/index.js",
   "types": "index.d.ts",
@@ -9,0 +9,0 @@ "engines": {

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

133318

increased by3.7%

Lines of code

2711

increased by2.73%

No dependency changes