@proximus/lavender-carousel-native 0.1.0-alpha.4 → 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,42 +1,14 @@
 {
   "name": "@proximus/lavender-carousel-native",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-beta.0",
   "description": "Carousel component",
   "license": "MIT",
-  "main": "src/index.ts",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
-    "prepublish": "yarn clean && yarn transform-package-json && yarn build",
-    "build": "npx tsc -p tsconfig.json"
-  },
+  "main": "dist/index.js",
   "peerDependencies": {
-    "@proximus/lavender-common-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*"
-  },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.6",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.5"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "a1feec25c51a94781f121bd6daba378d09021174"
+  }
 }

package/CHANGELOG.md

@@ -1,20 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-carousel-native@0.1.0-alpha.3...@proximus/lavender-carousel-native@0.1.0-alpha.4) (2025-09-26)
-
-### Features
-
-- **BCRI-000000:** datasource based mendix carousel ([#35](https://github.com/Pxs-Corporate/react-native-lavender/issues/35)) ([c627206](https://github.com/Pxs-Corporate/react-native-lavender/commit/c6272061736ee196d2c2dcea0d239e8819e0489b))
-
-# [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-carousel-native@0.1.0-alpha.2...@proximus/lavender-carousel-native@0.1.0-alpha.3) (2025-09-26)
-
-**Note:** Version bump only for package @proximus/lavender-carousel-native
-
-# 0.1.0-alpha.2 (2025-09-25)
-
-### Bug Fixes
-
-- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))

package/dist/far/away/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@proximus/lavender-carousel-native",
-  "version": "0.1.0-alpha.4",
-  "description": "Carousel component",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "peerDependencies": {
-    "@proximus/lavender-common-native": "*",
-    "@proximus/lavender-styling-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "a1feec25c51a94781f121bd6daba378d09021174"
-}

package/src/AppleSeed.tsx

@@ -1,113 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, View } from 'react-native';
-import { useTheme } from '@proximus/lavender-styling-native';
-
-const appleSeedSizeL = 14;
-const appleSeedSizeM = 10;
-const appleSeedSizeS = 6;
-const appleSeedSizeXS = 4;
-
-export function PxAppleSeed({
-  numberOfItems,
-  selectedItemIndex,
-}: {
-  numberOfItems: number;
-  selectedItemIndex: number;
-}) {
-  const { theme } = useTheme();
-  const tx = useRef(new Animated.Value(0)).current;
-  const prevSelectedItemIndex = useRef(selectedItemIndex);
-
-  useEffect(() => {
-    if (
-      (selectedItemIndex <= 2 && prevSelectedItemIndex.current != 3) ||
-      numberOfItems - selectedItemIndex < 3
-    ) {
-      return;
-    }
-
-    const translateLeft =
-      selectedItemIndex > prevSelectedItemIndex.current ? -1 : 1;
-
-    const toValue = translateLeft
-      ? -1 * (selectedItemIndex - 2) * theme.t('SizeIconS').number
-      : (selectedItemIndex - 3) * theme.t('SizeIconS').number;
-
-    Animated.spring(tx, {
-      toValue,
-      useNativeDriver: true,
-    }).start();
-
-    prevSelectedItemIndex.current = selectedItemIndex;
-  }, [numberOfItems, selectedItemIndex, theme, tx]);
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        width: 5 * theme.t('SizeIconS').number,
-        justifyContent: numberOfItems < 5 ? 'center' : 'flex-start',
-        alignSelf: 'center',
-        overflow: 'hidden',
-        alignItems: 'center',
-      }}
-    >
-      {Array.from({ length: numberOfItems }).map((_, index) => (
-        <Animated.View
-          key={index}
-          style={{
-            width: theme.t('SizeIconS').number,
-            height: theme.t('SizeIconS').number,
-            alignItems: 'center',
-            justifyContent: 'center',
-            transform: [
-              {
-                translateX: tx,
-              },
-            ],
-          }}
-        >
-          <View
-            key={index}
-            style={{
-              borderWidth: theme.t('SizeBorderS').number,
-              height: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
-              width: numberOfItems > 5 ? appleSeedSizeXS : appleSeedSizeM,
-              borderRadius: theme.t('RadiusMain').number,
-              borderColor: theme.t('ColorBackgroundStateActiveDefault'),
-              ...(index === numberOfItems - 2 &&
-                numberOfItems > 6 && {
-                  height: appleSeedSizeM,
-                  width: appleSeedSizeM,
-                }),
-              ...(index === numberOfItems - 3 &&
-                numberOfItems > 5 && {
-                  height: appleSeedSizeS,
-                  width: appleSeedSizeS,
-                }),
-              ...((index === selectedItemIndex - 2 ||
-                index === selectedItemIndex + 2) &&
-                numberOfItems > 5 && {
-                  height: appleSeedSizeS,
-                  width: appleSeedSizeS,
-                }),
-              ...((index === selectedItemIndex - 1 ||
-                index === selectedItemIndex + 1) &&
-                numberOfItems > 5 && {
-                  height: appleSeedSizeM,
-                  width: appleSeedSizeM,
-                }),
-              ...(index === selectedItemIndex && {
-                backgroundColor: theme.t('ColorBackgroundStateActiveDefault'),
-                ...(numberOfItems > 5 && {
-                  height: appleSeedSizeL,
-                  width: appleSeedSizeL,
-                }),
-              }),
-            }}
-          />
-        </Animated.View>
-      ))}
-    </View>
-  );
-}

package/src/Carousel.tsx

@@ -1,108 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  AccessibilityProps,
-  Dimensions,
-  FlatList,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-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,
-}: {
-  numberOfItemsVisible?: number;
-  children?: React.ReactNode;
-  withAppleSeed?: boolean;
-  containerStyle?: StyleProp<ViewStyle>;
-  testID?: string;
-  accessibilityProps?: AccessibilityProps;
-}) {
-  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();
-
-  useEffect(() => {
-    setWidth(
-      (Dimensions.get('window').width -
-        numberOfItemsVisible * computedGap -
-        2 * inset) /
-        numberOfItemsVisible
-    );
-  }, [numberOfItemsVisible, computedGap, theme]);
-
-  useEffect(() => {
-    setElementsCount(React.Children.count(children));
-  }, [children]);
-
-  useEffect(() => {
-    setComputedGap(theme.t(`SpacingSMobile`).number);
-  }, [theme]);
-
-  useEffect(() => {
-    setOffsets(
-      new Array(elementsCount).fill(0).reduce(
-        (prev, _, i) => {
-          return [...prev, prev[i] + width + computedGap];
-        },
-        [width]
-      )
-    );
-  }, [computedGap, elementsCount, width]);
-
-  return (
-    <View
-      style={[containerStyle, { flexDirection: 'column', gap: 27.15, flex: 1 }]}
-      {...e2eID(testID)}
-      {...a11y(accessibilityProps)}
-    >
-      <FlatList
-        data={new Array(React.Children.count(children)).fill(0)}
-        renderItem={({ index }) => (
-          <View style={{ width }}>
-            {[...(children as Iterable<any>)]?.[index]}
-          </View>
-        )}
-        contentContainerStyle={{
-          gap: computedGap,
-          alignItems: 'stretch',
-          paddingLeft: computedGap,
-        }}
-        horizontal
-        snapToOffsets={offsets}
-        decelerationRate="fast"
-        snapToAlignment={numberOfItemsVisible === 1 ? 'center' : 'start'}
-        showsHorizontalScrollIndicator={false}
-        onViewableItemsChanged={(event) => {
-          if (
-            event.viewableItems.length === 2 &&
-            event.viewableItems?.[0]?.index === 0
-          ) {
-            setSelectedItemIndex(0);
-            return;
-          }
-          setSelectedItemIndex(event.viewableItems?.[1]?.index ?? 0);
-        }}
-      />
-      {withAppleSeed && elementsCount > 1 && (
-        <PxAppleSeed
-          numberOfItems={React.Children.count(children)}
-          selectedItemIndex={selectedItemIndex}
-        />
-      )}
-    </View>
-  );
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './Carousel';
-export * from './AppleSeed';

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../tsconfig.npm.json",
-  "compilerOptions": {
-    "outDir": "dist",
-  },
-  "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
-}