@proximus/lavender-carousel-native 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/Carousel.d.ts

@@ -1,11 +1,15 @@
 import React from 'react';
 import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
-export declare function PxCarousel({ numberOfItemsVisible, children, withAppleSeed, containerStyle, testID, accessibilityProps, }: {
+export type Gap = '2xs' | 'Xs' | 'S' | 'Default' | 'L';
+export declare function PxCarousel({ numberOfItemsVisible, children, withAppleSeed, containerStyle, testID, accessibilityProps, hasPreview, snap, gap, }: {
     numberOfItemsVisible?: number;
     children?: React.ReactNode;
     withAppleSeed?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
     testID?: string;
     accessibilityProps?: AccessibilityProps;
+    hasPreview?: boolean;
+    snap?: boolean;
+    gap?: Gap;
 }): React.JSX.Element;
 //# sourceMappingURL=Carousel.d.ts.map

package/dist/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,kBAAkB,EAGlB,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,wBAAgB,UAAU,CAAC,EACzB,oBAAwB,EACxB,QAAQ,EACR,aAAoB,EACpB,cAAc,EACd,MAAM,EACN,kBAAkB,GACnB,EAAE;IACD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,qBAmGA"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,kBAAkB,EAGlB,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,CAAC;AAEvD,wBAAgB,UAAU,CAAC,EACzB,oBAAwB,EACxB,QAAQ,EACR,aAAoB,EACpB,cAAc,EACd,MAAM,EACN,kBAAkB,EAClB,UAAiB,EACjB,IAAW,EACX,GAAS,GACV,EAAE;IACD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC;CACX,qBA2GA"}

package/dist/Carousel.js

@@ -4,25 +4,26 @@ import { useTheme } from '@proximus/lavender-styling-native';
 import { PxAppleSeed } from './AppleSeed';
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 const inset = 24;
-export function PxCarousel({ numberOfItemsVisible = 1, children, withAppleSeed = true, containerStyle, testID, accessibilityProps, }) {
+export function PxCarousel({ numberOfItemsVisible = 1, children, withAppleSeed = true, containerStyle, testID, accessibilityProps, hasPreview = true, snap = true, gap = 'S', }) {
     const [width, setWidth] = useState(0);
     const [computedGap, setComputedGap] = useState(0);
     const [elementsCount, setElementsCount] = useState(0);
     const [selectedItemIndex, setSelectedItemIndex] = useState(0);
     const [offsets, setOffsets] = useState([]);
     const { theme } = useTheme();
+    const computedInset = hasPreview ? inset : 0;
     useEffect(() => {
         setWidth((Dimensions.get('window').width -
             numberOfItemsVisible * computedGap -
-            2 * inset) /
+            2 * computedInset) /
             numberOfItemsVisible);
-    }, [numberOfItemsVisible, computedGap, theme]);
+    }, [numberOfItemsVisible, computedGap, theme, computedInset]);
     useEffect(() => {
         setElementsCount(React.Children.count(children));
     }, [children]);
     useEffect(() => {
-        setComputedGap(theme.t(`SpacingSMobile`).number);
-    }, [theme]);
+        setComputedGap(hasPreview ? theme.t(`Spacing${gap}Mobile`).number : 0);
+    }, [theme, hasPreview, gap]);
     useEffect(() => {
         setOffsets(new Array(elementsCount).fill(0).reduce((prev, _, i) => {
             return [...prev, prev[i] + width + computedGap];
@@ -33,7 +34,11 @@ export function PxCarousel({ numberOfItemsVisible = 1, children, withAppleSeed =
                 gap: computedGap,
                 alignItems: 'stretch',
                 paddingLeft: computedGap,
-            }, horizontal: true, snapToOffsets: offsets, decelerationRate: "fast", snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start', showsHorizontalScrollIndicator: false, ...(children?.length === 2 && {
+            }, horizontal: true, ...(snap && {
+                snapToOffsets: offsets,
+                decelerationRate: 'fast',
+                snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start',
+            }), showsHorizontalScrollIndicator: false, ...(children?.length === 2 && {
                 onEndReached: () => {
                     setSelectedItemIndex(1);
                 },
@@ -41,6 +46,9 @@ export function PxCarousel({ numberOfItemsVisible = 1, children, withAppleSeed =
                     setSelectedItemIndex(0);
                 },
             }), onViewableItemsChanged: (event) => {
+                if (!hasPreview) {
+                    setSelectedItemIndex(event.viewableItems?.[0]?.index ?? 0);
+                }
                 // @ts-ignore
                 if (children?.length === 2) {
                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-carousel-native",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "description": "Carousel component",
   "license": "MIT",
   "main": "dist/index.js",