react-alice-carousel - npm Package Compare versions

Comparing version 2.6.7 to 2.7.0

lib/defaultProps.d.ts

@@ -20,3 +20,3 @@ import { AnimationType, AutoPlayStrategy, AutoplayDirection, ControlsStrategy } from './types';
     infinite: boolean;
-    innerWidth: number;
+    innerWidth: undefined;
     items: undefined;
@@ -23,0 +23,0 @@ keyboardNavigation: boolean;

lib/defaultProps.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultProps=void 0;var types_1=require("./types");exports.defaultProps={activeIndex:0,animationDuration:400,animationEasingFunction:"ease",animationType:types_1.AnimationType.SLIDE,autoHeight:!1,autoWidth:!1,autoPlay:!1,autoPlayControls:!1,autoPlayDirection:types_1.AutoplayDirection.LTR,autoPlayInterval:400,autoPlayStrategy:types_1.AutoPlayStrategy.DEFAULT,children:void 0,controlsStrategy:types_1.ControlsStrategy.DEFAULT,disableButtonsControls:!1,disableDotsControls:!1,disableSlideInfo:!0,infinite:!1,innerWidth:0,items:void 0,keyboardNavigation:!1,mouseTracking:!1,name:"",paddingLeft:0,paddingRight:0,responsive:void 0,swipeDelta:20,swipeExtraPadding:200,ssrSilentMode:!0,touchTracking:!0,touchMoveDefaultEvents:!0,onInitialized:function(){},onResized:function(){},onResizeEvent:void 0,onSlideChange:function(){},onSlideChanged:function(){}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.defaultProps=void 0;var types_1=require("./types");exports.defaultProps={activeIndex:0,animationDuration:400,animationEasingFunction:"ease",animationType:types_1.AnimationType.SLIDE,autoHeight:!1,autoWidth:!1,autoPlay:!1,autoPlayControls:!1,autoPlayDirection:types_1.AutoplayDirection.LTR,autoPlayInterval:400,autoPlayStrategy:types_1.AutoPlayStrategy.DEFAULT,children:void 0,controlsStrategy:types_1.ControlsStrategy.DEFAULT,disableButtonsControls:!1,disableDotsControls:!1,disableSlideInfo:!0,infinite:!1,innerWidth:void 0,items:void 0,keyboardNavigation:!1,mouseTracking:!1,name:"",paddingLeft:0,paddingRight:0,responsive:void 0,swipeDelta:20,swipeExtraPadding:200,ssrSilentMode:!0,touchTracking:!0,touchMoveDefaultEvents:!0,onInitialized:function(){},onResized:function(){},onResizeEvent:void 0,onSlideChange:function(){},onSlideChanged:function(){}};

lib/react-alice-carousel.d.ts

@@ -24,3 +24,3 @@ import React from 'react';
         infinite: boolean;
-        innerWidth: number;
+        innerWidth: undefined;
         items: undefined;
@@ -27,0 +27,0 @@ keyboardNavigation: boolean;

lib/types/index.d.ts

@@ -90,4 +90,5 @@ import type { ReactNode } from 'react';
 export declare type Responsive = {
-    [key: string]: {
+    [key: string | number]: {
         items: number;
+        itemsFit?: 'contain' | 'fill' | string;
     };
@@ -94,0 +95,0 @@ };

lib/utils/common.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calculateInitialState=exports.getItemsInSlide=exports.getIsStageContentPartial=exports.concatClassnames=exports.canUseDOM=void 0;var elements_1=require("./elements"),math_1=require("./math"),canUseDOM=function(){var t;try{return Boolean(null==(t=null===window||void 0===window?void 0:window.document)?void 0:t.createElement)}catch(t){return!1}},concatClassnames=(exports.canUseDOM=canUseDOM,function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(Boolean).join(" ")}),getIsStageContentPartial=(exports.concatClassnames=concatClassnames,function(t,e,n){return void 0===e&&(e=0),void 0===n&&(n=0),!(t=void 0!==t&&t)&&n<=e}),getItemsInSlide=(exports.getIsStageContentPartial=getIsStageContentPartial,function(e,t){var n,i=1,a=t.responsive,o=t.autoWidth,s=t.infinite,t=t.innerWidth;return void 0!==o&&o?void 0!==s&&s?e:i:(a&&(o=Object.keys(a)).length&&(t||(0,exports.canUseDOM)())&&(n="number"==typeof t?t:window.innerWidth,o.forEach(function(t){Number(t)<=n&&(i=Math.min(a[t].items,e)||i)})),i)}),calculateInitialState=(exports.getItemsInSlide=getItemsInSlide,function(t,e,n){void 0===n&&(n=!1);var i,a,o=t.animationDuration,o=void 0===o?0:o,s=t.infinite,s=void 0!==s&&s,r=t.autoPlay,r=void 0!==r&&r,l=t.autoWidth,l=void 0!==l&&l,m=(0,elements_1.createClones)(t),d=(0,elements_1.getTransitionProperty)(),c=(0,elements_1.getItemsCount)(t),u=(0,elements_1.getItemsOffset)(t),f=(0,exports.getItemsInSlide)(c,t),g=(0,math_1.getStartIndex)(t.activeIndex,c),g=(0,math_1.getActiveIndex)({startIndex:g,itemsCount:c,infinite:s}),I=(0,elements_1.getElementDimensions)(e).width,S=(a=(e=(l?(i=(e=(0,elements_1.createAutowidthTransformationSet)(e,I,s)).coords,a=e.content,e):(i=(e=(0,elements_1.createDefaultTransformationSet)(m,I,f,s)).coords,a=e.content,e)).partial,a),(0,math_1.getItemCoords)(-f,i=i).position),p=(0,math_1.getSwipeLimitMin)({itemsOffset:u,transformationSet:i},t),t=(0,math_1.getSwipeLimitMax)({itemsCount:c,itemsOffset:u,itemsInSlide:f,transformationSet:i},t),h=(0,math_1.getSwipeShiftValue)(c,i);return{activeIndex:g,autoWidth:l,animationDuration:o,clones:m,infinite:s,itemsCount:c,itemsInSlide:f,itemsOffset:u,translate3d:(0,elements_1.getTranslate3dProperty)(g,{itemsInSlide:f,itemsOffset:u,transformationSet:i,autoWidth:l,infinite:s}),stageWidth:I,stageContentWidth:a,initialStageHeight:0,isStageContentPartial:e,isAutoPlaying:Boolean(r),isAutoPlayCanceledOnAction:!1,transformationSet:i,transition:d,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1,swipeLimitMin:p,swipeLimitMax:t,swipeAllowedPositionMax:S,swipeShiftValue:h,canUseDom:n||(0,exports.canUseDOM)()}});exports.calculateInitialState=calculateInitialState;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calculateInitialState=exports.getItemsInSlide=exports.getIsStageContentPartial=exports.concatClassnames=exports.canUseDOM=void 0;var elements_1=require("./elements"),math_1=require("./math"),canUseDOM=function(){var t;try{return Boolean(null==(t=null===window||void 0===window?void 0:window.document)?void 0:t.createElement)}catch(t){return!1}},concatClassnames=(exports.canUseDOM=canUseDOM,function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(Boolean).join(" ")}),getIsStageContentPartial=(exports.concatClassnames=concatClassnames,function(t,e,n){return void 0===e&&(e=0),void 0===n&&(n=0),!(t=void 0!==t&&t)&&n<=e}),getItemsInSlide=(exports.getIsStageContentPartial=getIsStageContentPartial,function(n,t){var i,a=1,o=t.responsive,e=t.autoWidth,s=t.infinite,t=t.innerWidth;return void 0!==e&&e?void 0!==s&&s?n:a:(o&&(e=Object.keys(o)).length&&(t||(0,exports.canUseDOM)())&&(i=void 0===t?window.innerWidth:t,e.forEach(function(t){var e;Number(t)<=i&&(e=(t=o[t]).items,t=t.itemsFit,a="contain"===(void 0===t?"fill":t)?e:Math.min(e,n))})),a||1)}),calculateInitialState=(exports.getItemsInSlide=getItemsInSlide,function(t,e,n){void 0===n&&(n=!1);var i,a,o=t.animationDuration,o=void 0===o?0:o,s=t.infinite,s=void 0!==s&&s,r=t.autoPlay,r=void 0!==r&&r,l=t.autoWidth,l=void 0!==l&&l,m=(0,elements_1.createClones)(t),d=(0,elements_1.getTransitionProperty)(),c=(0,elements_1.getItemsCount)(t),u=(0,elements_1.getItemsOffset)(t),f=(0,exports.getItemsInSlide)(c,t),g=(0,math_1.getStartIndex)(t.activeIndex,c),g=(0,math_1.getActiveIndex)({startIndex:g,itemsCount:c,infinite:s}),I=(0,elements_1.getElementDimensions)(e).width,S=(a=(e=(l?(i=(e=(0,elements_1.createAutowidthTransformationSet)(e,I,s)).coords,a=e.content,e):(i=(e=(0,elements_1.createDefaultTransformationSet)(m,I,f,s)).coords,a=e.content,e)).partial,a),(0,math_1.getItemCoords)(-f,i=i).position),p=(0,math_1.getSwipeLimitMin)({itemsOffset:u,transformationSet:i},t),t=(0,math_1.getSwipeLimitMax)({itemsCount:c,itemsOffset:u,itemsInSlide:f,transformationSet:i},t),v=(0,math_1.getSwipeShiftValue)(c,i);return{activeIndex:g,autoWidth:l,animationDuration:o,clones:m,infinite:s,itemsCount:c,itemsInSlide:f,itemsOffset:u,translate3d:(0,elements_1.getTranslate3dProperty)(g,{itemsInSlide:f,itemsOffset:u,transformationSet:i,autoWidth:l,infinite:s}),stageWidth:I,stageContentWidth:a,initialStageHeight:0,isStageContentPartial:e,isAutoPlaying:Boolean(r),isAutoPlayCanceledOnAction:!1,transformationSet:i,transition:d,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1,swipeLimitMin:p,swipeLimitMax:t,swipeAllowedPositionMax:S,swipeShiftValue:v,canUseDom:n||(0,exports.canUseDOM)()}});exports.calculateInitialState=calculateInitialState;

package.json

 {
   "name": "react-alice-carousel",
-  "version": "2.6.7",
+  "version": "2.7.0",
   "description": "React image gallery, react slideshow carousel, react content rotator",
@@ -5,0 +5,0 @@ "main": "./lib/react-alice-carousel.js",

README.md

@@ -103,4 +103,8 @@ # React Alice Carousel
 - `renderKey`: Number, default `undefined`  - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
-- `responsive`: Object, default `undefined` - Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
-    ```js
+- `responsive`: Object, default `undefined` - The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
+    * `items` - set number of items in the slide. Default: `1`
+    * `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
+  
+      If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+  ```js
         {
@@ -111,3 +115,4 @@ 0: {
           1024: {
-              items: 3
+              items: 3,
+              itemsFit: 'contain',
           }
@@ -114,0 +119,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

92662

increased by0.56%

Lines of code

697

increased by0.14%

Number of lines in readme file

229

increased by2.23%

No dependency changes