@ndla/carousel - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

es/Carousel.js

@@ -207,2 +207,27 @@ import { jsx as ___EmotionJSX } from "@emotion/core";
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    // Todo: All slides ar left aligned when the (number of) slides does not fill
+    // the entire screen. Can be reproduced by limiting the number of slides in the carousel
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var columnsPrSlide = nextProps.columnsPrSlide,
+          items = nextProps.items;
+      var slideIndex = prevState.slideIndex; // Check if resize caused carousel to be scrolled to far.
+
+      if (Math.floor(columnsPrSlide) - items.length > slideIndex) {
+        var adjustedSlideIndex = slideIndex + (Math.floor(columnsPrSlide) - items.length - slideIndex);
+
+        if (items.length < columnsPrSlide) {
+          return {
+            slideIndex: 0
+          };
+        }
+
+        return {
+          slideIndex: adjustedSlideIndex
+        };
+      }
+
+      return null;
+    }
   }]);
@@ -209,0 +234,0 @@

es/CarouselAutosize.js

@@ -34,2 +34,3 @@ import { jsx as ___EmotionJSX } from "@emotion/core";
 import { StyledWrapperAutosizer } from './Styles';
+import { ndlaFilmBreakpoints, standardBreakpoints } from './Breakpoints';
 export var CarouselAutosize =
@@ -57,6 +58,12 @@ /*#__PURE__*/
 
+    _defineProperty(_assertThisInitialized(_this), "getBreakpoints", function () {
+      return _this.props.ndlaFilm ? ndlaFilmBreakpoints : standardBreakpoints;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
       var node = _this.autosizeRef.current;
       var wrapperWidthInEm = parseFloat(em(node.offsetWidth));
-      var breakpoints = _this.props.breakpoints;
+
+      var breakpoints = _this.getBreakpoints();
+
       var useBreakpoint = breakpoints.filter(function (breakpointItem) {
@@ -114,2 +121,6 @@ var until = breakpointItem.until ? parseFloat(breakpointFromCore[breakpointItem.until]) : 9999;
       var carouselBreakpoint = this.state.carouselBreakpoint;
+      var _this$props = this.props,
+          children = _this$props.children,
+          centered = _this$props.centered,
+          itemsLength = _this$props.itemsLength;
 
@@ -123,7 +134,6 @@ if (!carouselBreakpoint) {
       var calculatedCarouselProps = this.calculateCarouselProps(carouselBreakpoint);
-      var maxColumnWidth = carouselBreakpoint.maxColumnWidth;
       var wrapperWidth = 'auto';
 
-      if (this.props.centered && calculatedCarouselProps && maxColumnWidth === calculatedCarouselProps.columnWidth) {
-        wrapperWidth = "".concat(calculatedCarouselProps.columnWidth * calculatedCarouselProps.columnsPrSlide + calculatedCarouselProps.distanceBetweenItems * (calculatedCarouselProps.columnsPrSlide - 1) + (calculatedCarouselProps.margin || 0) * 2, "px");
+      if (centered && calculatedCarouselProps) {
+        wrapperWidth = "".concat(calculatedCarouselProps.columnWidth * Math.min(calculatedCarouselProps.columnsPrSlide, itemsLength) + calculatedCarouselProps.distanceBetweenItems * (calculatedCarouselProps.columnsPrSlide - 1) + (calculatedCarouselProps.margin || 0) * 2, "px");
       }
@@ -135,3 +145,3 @@
         width: wrapperWidth
-      }, this.props.children(calculatedCarouselProps)));
+      }, children(calculatedCarouselProps)));
     }
@@ -141,2 +151,6 @@ }]);
   return CarouselAutosize;
-}(Component);
+}(Component);
+
+_defineProperty(CarouselAutosize, "defaultProps", {
+  itemsLength: 999
+});

lib/Carousel.d.ts

@@ -42,2 +42,5 @@ /**
     state: State;
+    static getDerivedStateFromProps(nextProps: Props, prevState: State): {
+        slideIndex: number;
+    } | null;
     onSwipeEnd: () => void;
@@ -44,0 +47,0 @@ onSwipe: (eventData: EventData<HTMLElement>) => void;

lib/Carousel.js

@@ -212,2 +212,27 @@ "use strict";
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    // Todo: All slides ar left aligned when the (number of) slides does not fill
+    // the entire screen. Can be reproduced by limiting the number of slides in the carousel
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var columnsPrSlide = nextProps.columnsPrSlide,
+          items = nextProps.items;
+      var slideIndex = prevState.slideIndex; // Check if resize caused carousel to be scrolled to far.
+
+      if (Math.floor(columnsPrSlide) - items.length > slideIndex) {
+        var adjustedSlideIndex = slideIndex + (Math.floor(columnsPrSlide) - items.length - slideIndex);
+
+        if (items.length < columnsPrSlide) {
+          return {
+            slideIndex: 0
+          };
+        }
+
+        return {
+          slideIndex: adjustedSlideIndex
+        };
+      }
+
+      return null;
+    }
   }]);
@@ -214,0 +239,0 @@

lib/CarouselAutosize.d.ts

@@ -11,3 +11,3 @@ /**
 import { CalculatedProps as CalculatedCarouselProps } from './Carousel';
-interface CaruselBreakpoint {
+export interface CaruselBreakpoint {
     until?: Breakpoint;
@@ -21,4 +21,5 @@ columnsPrSlide: number;
 interface Props {
-    breakpoints: CaruselBreakpoint[];
+    ndlaFilm: boolean;
     centered?: boolean;
+    itemsLength: number;
     children: (calculatedProps: CalculatedCarouselProps | null) => React.ReactNode;
@@ -30,4 +31,8 @@ }
 export declare class CarouselAutosize extends Component<Props, State> {
+    static defaultProps: {
+        itemsLength: number;
+    };
     autosizeRef: React.RefObject<HTMLDivElement>;
     state: State;
+    getBreakpoints: () => CaruselBreakpoint[];
     componentDidMount(): void;
@@ -34,0 +39,0 @@ componentWillUnmount(): void;

lib/CarouselAutosize.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _Breakpoints = require("./Breakpoints");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,6 +67,12 @@
 
+    _defineProperty(_assertThisInitialized(_this), "getBreakpoints", function () {
+      return _this.props.ndlaFilm ? _Breakpoints.ndlaFilmBreakpoints : _Breakpoints.standardBreakpoints;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
       var node = _this.autosizeRef.current;
       var wrapperWidthInEm = parseFloat((0, _em.default)(node.offsetWidth));
-      var breakpoints = _this.props.breakpoints;
+
+      var breakpoints = _this.getBreakpoints();
+
       var useBreakpoint = breakpoints.filter(function (breakpointItem) {
@@ -122,2 +130,6 @@ var until = breakpointItem.until ? parseFloat(_core2.breakpoints[breakpointItem.until]) : 9999;
       var carouselBreakpoint = this.state.carouselBreakpoint;
+      var _this$props = this.props,
+          children = _this$props.children,
+          centered = _this$props.centered,
+          itemsLength = _this$props.itemsLength;
 
@@ -131,7 +143,6 @@ if (!carouselBreakpoint) {
       var calculatedCarouselProps = this.calculateCarouselProps(carouselBreakpoint);
-      var maxColumnWidth = carouselBreakpoint.maxColumnWidth;
       var wrapperWidth = 'auto';
 
-      if (this.props.centered && calculatedCarouselProps && maxColumnWidth === calculatedCarouselProps.columnWidth) {
-        wrapperWidth = "".concat(calculatedCarouselProps.columnWidth * calculatedCarouselProps.columnsPrSlide + calculatedCarouselProps.distanceBetweenItems * (calculatedCarouselProps.columnsPrSlide - 1) + (calculatedCarouselProps.margin || 0) * 2, "px");
+      if (centered && calculatedCarouselProps) {
+        wrapperWidth = "".concat(calculatedCarouselProps.columnWidth * Math.min(calculatedCarouselProps.columnsPrSlide, itemsLength) + calculatedCarouselProps.distanceBetweenItems * (calculatedCarouselProps.columnsPrSlide - 1) + (calculatedCarouselProps.margin || 0) * 2, "px");
       }
@@ -143,3 +154,3 @@
         width: wrapperWidth
-      }, this.props.children(calculatedCarouselProps)));
+      }, children(calculatedCarouselProps)));
     }
@@ -151,2 +162,6 @@ }]);
 
-exports.CarouselAutosize = CarouselAutosize;
+exports.CarouselAutosize = CarouselAutosize;
+
+_defineProperty(CarouselAutosize, "defaultProps", {
+  itemsLength: 999
+});

package.json

 {
   "name": "@ndla/carousel",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Carousel for NDLA",
@@ -28,3 +28,3 @@ "license": "GPL-3.0",
   "dependencies": {
-    "@ndla/core": "^0.6.2",
+    "@ndla/core": "^0.6.3",
     "react-swipeable": "^5.0.1"
@@ -41,3 +41,3 @@ },
   },
-  "gitHead": "ab93351e80f4dd699b3ad9ce174f357227ed749b"
+  "gitHead": "b10930801d5385b9b1199cd4ef6fc75e05e9e577"
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99225

increased by8.07%

Number of package files

18

increased by20%

Lines of code

1119

increased by29.97%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@ndla/core@^0.6.3