From bc51d35a9b69d8338ec9bc9c1a63cda959ababbb Mon Sep 17 00:00:00 2001 From: Marinich Maxim Date: Fri, 2 Dec 2022 12:21:46 +0300 Subject: [PATCH] update rsponsive config --- README.md | 11 +++++-- src/components/pages/basic/code-responsive.md | 31 +++++++++++++++++++ src/components/pages/basic/index.tsx | 14 ++++++++- src/lib/defaultProps.ts | 2 +- src/lib/types/index.ts | 7 +++-- src/lib/utils/common.ts | 11 +++++-- tests/utils/common/getItemsInSlide.test.ts | 9 ++++++ 7 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 src/components/pages/basic/code-responsive.md diff --git a/README.md b/README.md index a24807c2..f9b9c6b3 100644 --- a/README.md +++ b/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', } } ``` diff --git a/src/components/pages/basic/code-responsive.md b/src/components/pages/basic/code-responsive.md new file mode 100644 index 00000000..bf07c69f --- /dev/null +++ b/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 = [ +
1
, +
2
, +]; + +const Carousel = () => ( + +); +``` diff --git a/src/components/pages/basic/index.tsx b/src/components/pages/basic/index.tsx index ad8fa69e..91f9cba7 100644 --- a/src/components/pages/basic/index.tsx +++ b/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 = () => {
+ +

+ +   Responsive +

+ +
); }; diff --git a/src/lib/defaultProps.ts b/src/lib/defaultProps.ts index 03973c66..ef6eb698 100644 --- a/src/lib/defaultProps.ts +++ b/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, diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts index c296b8cb..9dec8d57 100644 --- a/src/lib/types/index.ts +++ b/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 = { diff --git a/src/lib/utils/common.ts b/src/lib/utils/common.ts index 1ab7d9f8..210ca246 100644 --- a/src/lib/utils/common.ts +++ b/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, el: null | HTMLElement, canUseDom = false): State => { diff --git a/tests/utils/common/getItemsInSlide.test.ts b/tests/utils/common/getItemsInSlide.test.ts index 13a6baa5..0076d419 100644 --- a/tests/utils/common/getItemsInSlide.test.ts +++ b/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); + }); });