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

package/dist/AppleSeed.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function PxAppleSeed({ numberOfItems, selectedItemIndex, }: {
+    numberOfItems: number;
+    selectedItemIndex: number;
+}): React.JSX.Element;
+//# sourceMappingURL=AppleSeed.d.ts.map

package/dist/AppleSeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppleSeed.d.ts","sourceRoot":"","sources":["../src/AppleSeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AASjD,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,iBAAiB,GAClB,EAAE;IACD,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,qBAiGA"}

package/dist/AppleSeed.js

@@ -0,0 +1,81 @@
+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, }) {
+    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 (React.createElement(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) => (React.createElement(Animated.View, { key: index, style: {
+            width: theme.t('SizeIconS').number,
+            height: theme.t('SizeIconS').number,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: [
+                {
+                    translateX: tx,
+                },
+            ],
+        } },
+        React.createElement(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,
+                    }),
+                }),
+            } }))))));
+}

package/dist/Carousel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+export declare function PxCarousel({ numberOfItemsVisible, children, withAppleSeed, containerStyle, testID, accessibilityProps, }: {
+    numberOfItemsVisible?: number;
+    children?: React.ReactNode;
+    withAppleSeed?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    accessibilityProps?: AccessibilityProps;
+}): React.JSX.Element;
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/Carousel.d.ts.map

@@ -0,0 +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"}

package/dist/Carousel.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { Dimensions, FlatList, View, } 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, }) {
+    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 (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: {
+                gap: computedGap,
+                alignItems: 'stretch',
+                paddingLeft: computedGap,
+            }, horizontal: true, snapToOffsets: offsets, decelerationRate: "fast", snapToAlignment: numberOfItemsVisible === 1 ? 'center' : 'start', showsHorizontalScrollIndicator: false, ...(children?.length === 2 && {
+                onEndReached: () => {
+                    setSelectedItemIndex(1);
+                },
+                onStartReached: () => {
+                    setSelectedItemIndex(0);
+                },
+            }), onViewableItemsChanged: (event) => {
+                // @ts-ignore
+                if (children?.length === 2) {
+                    return;
+                }
+                if (event.viewableItems.length === 2 &&
+                    event.viewableItems?.[0]?.index === 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;
+                }
+                setSelectedItemIndex(event.viewableItems?.[1]?.index ?? 0);
+            } }),
+        withAppleSeed && elementsCount > 1 && (React.createElement(PxAppleSeed, { numberOfItems: React.Children.count(children), selectedItemIndex: selectedItemIndex }))));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Carousel';
+export * from './AppleSeed';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/index.js

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

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@proximus/lavender-carousel-native",
+  "version": "0.1.0-alpha.10",
+  "description": "Carousel component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}