@proximus/lavender-carousel-native 0.1.0-alpha.9 → 0.1.0-beta.0

package/dist/Carousel.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
-import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
-export declare function PxCarousel({ numberOfItemsVisible, children, withAppleSeed, containerStyle, testID, accessibilityProps, }: {
+import { AccessibilityProps, ListRenderItem, StyleProp, ViewStyle } from 'react-native';
+export type Gap = '2xs' | 'Xs' | 'S' | 'Default' | 'L';
+export interface CarouselProps {
     numberOfItemsVisible?: number;
-    children?: React.ReactNode;
+    renderItem?: ListRenderItem<any>;
+    data: any[];
     withAppleSeed?: boolean;
     containerStyle?: StyleProp<ViewStyle>;
     testID?: string;
     accessibilityProps?: AccessibilityProps;
-}): React.JSX.Element;
+    hasPreview?: boolean;
+    snap?: boolean;
+    gap?: Gap;
+    onItemDisplayed?: (index: number) => void;
+}
+export declare function PxCarousel(props: CarouselProps): React.JSX.Element | null;
 //# 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,qBA8EA"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../src/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,kBAAkB,EAGlB,cAAc,EACd,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,SAAS,GAAG,GAAG,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACjC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,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;IACV,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,4BAiB9C"}

package/dist/Carousel.js

@@ -4,42 +4,84 @@ 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(props) {
+    const { data } = props;
+    if (!data || data.length === 0) {
+        return null;
+    }
+    else if (data.length === 1) {
+        return (React.createElement(View, { style: [props.containerStyle, { flex: 1 }], ...e2eID(props.testID), ...a11y(props.accessibilityProps) }, props.renderItem?.({ item: data[0], index: 0, separators: {} })));
+    }
+    else {
+        return React.createElement(_PxCarousel, { ...props });
+    }
+}
+function _PxCarousel({ numberOfItemsVisible = 1, renderItem, data, withAppleSeed = true, containerStyle, testID, accessibilityProps, hasPreview = true, snap = true, gap = 'S', onItemDisplayed, }) {
     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]);
+        setElementsCount(data.length);
+    }, [data]);
     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];
         }, [width]));
     }, [computedGap, elementsCount, width]);
     return (React.createElement(View, { style: [containerStyle, { flexDirection: 'column', gap: 27.15, flex: 1 }], ...e2eID(testID), ...a11y(accessibilityProps) },
-        React.createElement(FlatList, { data: new Array(React.Children.count(children)).fill(0), renderItem: ({ index }) => (React.createElement(View, { style: { width } }, [...children]?.[index])), contentContainerStyle: {
+        React.createElement(FlatList, { data: data, renderItem: (data) => (React.createElement(View, { style: { width } }, renderItem?.(data))), contentContainerStyle: {
                 gap: computedGap,
                 alignItems: 'stretch',
                 paddingLeft: computedGap,
-            }, horizontal: true, snapToOffsets: offsets, decelerationRate: "fast", snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start', showsHorizontalScrollIndicator: false, onViewableItemsChanged: (event) => {
-                if (event.viewableItems.length === 2 &&
-                    event.viewableItems?.[0]?.index === 0) {
+            }, horizontal: true, ...(snap && {
+                snapToOffsets: offsets,
+                decelerationRate: 'fast',
+                snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start',
+            }), showsHorizontalScrollIndicator: false, ...(data.length === 2 && {
+                onEndReached: () => {
+                    onItemDisplayed?.(1);
+                    setSelectedItemIndex(1);
+                },
+                onStartReached: () => {
+                    onItemDisplayed?.(0);
+                    setSelectedItemIndex(0);
+                },
+            }), onViewableItemsChanged: (event) => {
+                const firstViewableIndex = event.viewableItems?.[0]?.index ?? 0;
+                if (!hasPreview) {
+                    onItemDisplayed?.(firstViewableIndex);
+                    setSelectedItemIndex(firstViewableIndex);
+                    return;
+                }
+                if (data.length === 2) {
+                    return;
+                }
+                if (event.viewableItems.length === 2 && firstViewableIndex === 0) {
+                    onItemDisplayed?.(0);
                     setSelectedItemIndex(0);
                     return;
                 }
+                // when keeping swiping left on ios on the last element,
+                // viewableItems contains only one element so we ignore that case
+                // because vent.viewableItems?.[1] is out of bounds
+                if (event.viewableItems.length === 1) {
+                    return;
+                }
+                onItemDisplayed?.(firstViewableIndex);
                 setSelectedItemIndex(event.viewableItems?.[1]?.index ?? 0);
             } }),
-        withAppleSeed && elementsCount > 1 && (React.createElement(PxAppleSeed, { numberOfItems: React.Children.count(children), selectedItemIndex: selectedItemIndex }))));
+        withAppleSeed && elementsCount > 1 && (React.createElement(PxAppleSeed, { numberOfItems: data.length, selectedItemIndex: selectedItemIndex }))));
 }

package/package.json

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