nuka-carousel - npm Package Compare versions

Comparing version 5.0.8 to 5.0.9

es-v5/carousel.js

@@ -55,7 +55,12 @@ 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 _useState11 = useState(null),
+  var _useState11 = useState(0),
       _useState12 = _slicedToArray(_useState11, 2),
-      keyboardMove = _useState12[0],
-      setKeyboardMove = _useState12[1];
+      frameHeight = _useState12[0],
+      setFrameHeight = _useState12[1];
 
+  var _useState13 = useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      keyboardMove = _useState14[0],
+      setKeyboardMove = _useState14[1];
+
   var carouselWidth = useRef(null);
@@ -371,3 +376,6 @@ var focus = useRef(false);
         zoomScale: props.zoomScale,
-        cellAlign: props.cellAlign
+        cellAlign: props.cellAlign,
+        setFrameHeight: setFrameHeight,
+        frameHeight: frameHeight,
+        adaptiveHeight: props.adaptiveHeight
       }, child);
@@ -401,3 +409,4 @@ });
       position: 'relative',
-      outline: 'none'
+      outline: 'none',
+      height: props.adaptiveHeight ? "".concat(frameHeight, "px") : 'auto'
     }, props.style),
@@ -404,0 +413,0 @@ "aria-label": props.frameAriaLabel,

es-v5/default-carousel-props.js

@@ -6,2 +6,3 @@ import React from 'react';
 var defaultProps = {
+  adaptiveHeight: false,
   afterSlide: function afterSlide() {// do nothing
@@ -8,0 +9,0 @@ },

es-v5/slide.js

@@ -8,3 +8,3 @@ import React, { useRef, useEffect } from 'react';
 
-var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale) {
+var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight) {
   var width = getSlideWidth(count, wrapAround);
@@ -17,2 +17,3 @@ var visibleSlideOpacity = isVisibleSlide ? 1 : 0;
     display: 'inline-block',
+    verticalAlign: adaptiveHeight ? 'top' : 'inherit',
     padding: "0 ".concat(cellSpacing ? cellSpacing / 2 : 0, "px"),
@@ -70,3 +71,6 @@ transition: animation ? "".concat(speed || animationSpeed, "ms ease 0s") : 'none',
       zoomScale = _ref.zoomScale,
-      cellAlign = _ref.cellAlign;
+      cellAlign = _ref.cellAlign,
+      setFrameHeight = _ref.setFrameHeight,
+      frameHeight = _ref.frameHeight,
+      adaptiveHeight = _ref.adaptiveHeight;
   var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
@@ -85,2 +89,12 @@ var isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
     }
+
+    if (adaptiveHeight && node && isVisible) {
+      var _node$getBoundingClie;
+
+      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
+
+      if (slideHeight > frameHeight) {
+        setFrameHeight(slideHeight);
+      }
+    }
   }, [isVisible]);
@@ -90,3 +104,3 @@ return /*#__PURE__*/React.createElement("div", {
     className: "slide".concat(typeOfSlide ? " ".concat(typeOfSlide) : '').concat(isVisible ? ' slide-visible' : ''),
-    style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale)
+    style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight)
   }, children);
@@ -93,0 +107,0 @@ };

lib-v5/carousel.js

@@ -76,7 +76,12 @@ "use strict";
 
-  var _useState11 = (0, _react.useState)(null),
+  var _useState11 = (0, _react.useState)(0),
       _useState12 = _slicedToArray(_useState11, 2),
-      keyboardMove = _useState12[0],
-      setKeyboardMove = _useState12[1];
+      frameHeight = _useState12[0],
+      setFrameHeight = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      keyboardMove = _useState14[0],
+      setKeyboardMove = _useState14[1];
+
   var carouselWidth = (0, _react.useRef)(null);
@@ -392,3 +397,6 @@ var focus = (0, _react.useRef)(false);
         zoomScale: props.zoomScale,
-        cellAlign: props.cellAlign
+        cellAlign: props.cellAlign,
+        setFrameHeight: setFrameHeight,
+        frameHeight: frameHeight,
+        adaptiveHeight: props.adaptiveHeight
       }, child);
@@ -423,3 +431,4 @@ });
       position: 'relative',
-      outline: 'none'
+      outline: 'none',
+      height: props.adaptiveHeight ? "".concat(frameHeight, "px") : 'auto'
     }, props.style),
@@ -426,0 +435,0 @@ "aria-label": props.frameAriaLabel,

lib-v5/default-carousel-props.js

@@ -19,2 +19,3 @@ "use strict";
 var defaultProps = {
+  adaptiveHeight: false,
   afterSlide: function afterSlide() {// do nothing
@@ -21,0 +22,0 @@ },

lib-v5/slide.js

@@ -22,3 +22,3 @@ "use strict";
 
-var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale) {
+var getSlideStyles = function getSlideStyles(count, isCurrentSlide, isVisibleSlide, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight) {
   var width = getSlideWidth(count, wrapAround);
@@ -31,2 +31,3 @@ var visibleSlideOpacity = isVisibleSlide ? 1 : 0;
     display: 'inline-block',
+    verticalAlign: adaptiveHeight ? 'top' : 'inherit',
     padding: "0 ".concat(cellSpacing ? cellSpacing / 2 : 0, "px"),
@@ -84,3 +85,6 @@ transition: animation ? "".concat(speed || animationSpeed, "ms ease 0s") : 'none',
       zoomScale = _ref.zoomScale,
-      cellAlign = _ref.cellAlign;
+      cellAlign = _ref.cellAlign,
+      setFrameHeight = _ref.setFrameHeight,
+      frameHeight = _ref.frameHeight,
+      adaptiveHeight = _ref.adaptiveHeight;
   var customIndex = wrapAround ? generateIndex(index, count, typeOfSlide) : index;
@@ -99,2 +103,12 @@ var isVisible = isVisibleSlide(currentSlide, customIndex, slidesToShow, cellAlign);
     }
+
+    if (adaptiveHeight && node && isVisible) {
+      var _node$getBoundingClie;
+
+      var slideHeight = (_node$getBoundingClie = node.getBoundingClientRect()) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.height;
+
+      if (slideHeight > frameHeight) {
+        setFrameHeight(slideHeight);
+      }
+    }
   }, [isVisible]);
@@ -104,3 +118,3 @@ return /*#__PURE__*/_react["default"].createElement("div", {
     className: "slide".concat(typeOfSlide ? " ".concat(typeOfSlide) : '').concat(isVisible ? ' slide-visible' : ''),
-    style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale)
+    style: getSlideStyles(count, isCurrentSlide, isVisible, wrapAround, cellSpacing, animation, speed, zoomScale, adaptiveHeight)
   }, children);
@@ -107,0 +121,0 @@ };

package.json

 {
   "name": "nuka-carousel",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "description": "Pure React Carousel",
@@ -35,4 +35,4 @@ "main": "index.js",
     "@types/exenv": "^1.2.0",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
@@ -59,4 +59,4 @@ "@typescript-eslint/parser": "^5.5.0",
     "prettier": "2.1.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.5.2",
@@ -69,4 +69,4 @@ "url-loader": "^4.1.1",
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0 || ^17.0.1",
-    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.1"
+    "react": "^15.3.0 || ^16.0.0 || ^17.0.1 || ^18.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.1 || ^18.0.0"
   },
@@ -87,3 +87,3 @@ "resolutions": {
     "build-watch": "builder concurrent build-lib build-es -- --watch",
-    "check": "npm run lint && npm run check-typescript && npm run test",
+    "check": "npm run lint && npm run check-typescript",
     "check-typescript": "tsc --noEmit",
@@ -90,0 +90,0 @@ "lint": "eslint --ext .js,.ts,.tsx .",

README.md

 # nuka-carousel
 
+[![Maintenance Status][maintenance-image]](#maintenance-status)
+
 Small, fast and accessibility-first React carousel library with easily customizable UI and behavior to fit your brand and site
@@ -69,2 +71,3 @@
 | :------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- |
+| adaptiveHeight | `boolean`| If it's set to true, the carousel will adapt its height to the visible slides. | `false` |
 | afterSlide | `(index: number) => void`| Hook to be called after a slide is changed. |`() => {}`|
@@ -235,2 +238,4 @@ | animation | `'zoom' \| 'fade'`| Adds a zoom effect on the currently visible slide or change the animation to `fade`. A `transform: scale(0.85)` is set as default when you are using zoom, however, the scale can be customized using `zoomScale` prop. Property is applied on all slides except the current 1. Use `cellAlign` to align the slide with zoom effect where you'd like. ||
 
+- adaptiveHeight - this property is useful if you have slides with different height. The carousel with adapth its height to the slides. Replacement of `heightMode="current"` v4 property. (Included in v5.0.9)
+
 ### What about v5.1
@@ -249,4 +254,4 @@
 
-[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg
+[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat
 
 

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

129610

increased by1.81%

Lines of code

2685

increased by1.51%

Number of lines in readme file

255

increased by2%

No dependency changes