update rsponsive config

README.md

@@ -100,14 +100,19 @@ const Gallery = () => {
 - `paddingLeft`: Number, default `0` - Set the gallery offset from the left.
 - `paddingRight`: Number, default `0` - Set the gallery offset from the right.
 - `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
  {
  0: {
  items: 1,
  },
  1024: {
- items: 3
+ items: 3,
+ itemsFit: 'contain',
  }
  }
  ```

src/components/pages/basic/code-responsive.md

@@ -0,0 +1,31 @@
+```javascript
+import React from 'react';
+import AliceCarousel from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
+const responsive = {
+ 0: { 
+ items: 1
+ },
+ 568: { 
+ items: 2
+ },
+ 1024: {
+ items: 3, 
+ itemsFit: 'contain'
+ },
+};
+
+const items = [
+ <div className="item" data-value="1">1</div>,
+ <div className="item" data-value="2">2</div>,
+];
+
+const Carousel = () => (
+ <AliceCarousel
+ mouseTracking
+ items={items}
+ responsive={responsive}
+ />
+);
+```

src/components/pages/basic/index.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 
 import markdown from './code.md';
+import markdown2 from './code-responsive.md';
 import TheCode from '../../the-code';
 import AliceCarousel from '../../../lib/react-alice-carousel';
+import Anchor, { genAnchorProps } from '../../the-anchor';
 
 const responsive = {
  0: { items: 1 },
  568: { items: 2 },
- 1024: { items: 3 },
+ 1024: {
+ items: 3,
+ itemsFit: 'contain',
+ },
 };
 
 const items = [
@@ -33,6 +38,13 @@ const BasicPage = () => {
  <section className="p-basic">
  <AliceCarousel mouseTracking items={items} responsive={responsive} controlsStrategy="alternate" />
  <TheCode html={markdown} />
+
+ <h2 className="title" style={{ paddingTop: 80 }}>
+ <Anchor {...genAnchorProps('responsive')} />
+ &nbsp; Responsive
+ </h2>
+ <AliceCarousel mouseTracking items={items.slice(0, 2)} responsive={responsive} />
+ <TheCode html={markdown2} />
  </section>
  );
 };

src/lib/defaultProps.ts

@@ -18,7 +18,7 @@ export const defaultProps = {
  disableDotsControls: false,
  disableSlideInfo: true,
  infinite: false,
- innerWidth: 0,
+ innerWidth: undefined,
  items: undefined,
  keyboardNavigation: false,
  mouseTracking: false,

src/lib/types/index.ts

@@ -87,9 +87,10 @@ export type Transition = {
 };
 
 export type Responsive = {
- [key: string]: {
- items: number;
- };
+ [key:string | number]: {
+ items: number,
+ itemsFit?: 'contain' | 'fill' | string;
+ }
 };
 
 export type EventObject = {

src/lib/utils/common.ts

@@ -48,17 +48,22 @@ export const getItemsInSlide = (itemsCount: number, props: Props) => {
 
  if (configKeys.length) {
  if (innerWidth || canUseDOM()) {
- const value = typeof innerWidth === 'number' ? innerWidth : window.innerWidth;
+ const value = innerWidth === undefined ? window.innerWidth : innerWidth;
  configKeys.forEach((key) => {
  if (Number(key) <= value) {
- itemsInSlide = Math.min(responsive[key].items, itemsCount) || itemsInSlide;
+ const { items, itemsFit = 'fill' } = responsive[key];
+ if (itemsFit === 'contain') {
+ itemsInSlide = items;
+ } else {
+ itemsInSlide = Math.min(items, itemsCount);
+ }
  }
  });
  }
  }
  }
 
- return itemsInSlide;
+ return itemsInSlide || 1;
 };
 
 export const calculateInitialState = (props: Partial<Props>, el: null | HTMLElement, canUseDom = false): State => {

tests/utils/common/getItemsInSlide.test.ts

@@ -39,4 +39,13 @@ describe('Utils.getItemsInSlide', function () {
  it('should return correct value if responsive && innerWidth is 1024', function () {
  expect(Utils.getItemsInSlide(3, { ...defaultProps, innerWidth: 1024, responsive })).toEqual(3);
  });
+
+ it('should return correct value if responsive && itemsFit equal `contain`', function () {
+ expect(Utils.getItemsInSlide(2, { ...defaultProps, innerWidth: 0, responsive: {
+ 0 : {
+ items: 3,
+ itemsFit: 'contain'
+ },
+ }})).toEqual(3);
+ });
 });