related-ui-components 2.1.5 → 2.1.7

package/lib/module/components/CarouselCardStack/CarouselCardStack.js

@@ -23,6 +23,7 @@ const SPRING_CONFIG = {
   stiffness: 120,
   mass: 0.6
 };
+const SIDE_CARD_ROTATION_DEGREES = 7;
 const createVirtualData = originalData => {
   if (!originalData || originalData.length === 0) return [];
   const prefixItems = (items, segmentPrefix) => items.map((item, idx) => ({
@@ -37,7 +38,8 @@ const createVirtualData = originalData => {
 const CarouselCardStack = ({
   data: originalData,
   cardHeight = CARD_HEIGHT,
-  cardWidth = CARD_WIDTH
+  cardWidth = CARD_WIDTH,
+  backgroundColor = "transparent"
 }) => {
   const {
     theme
@@ -68,6 +70,19 @@ const CarouselCardStack = ({
       activeIndex.value = currentValue + N_original;
     }
   };
+  useDerivedValue(() => {
+    const currentValue = Math.round(activeIndex.value);
+
+    // Only reset if we're at the boundaries and not currently animating (gestureTranslateX is 0)
+    if (gestureTranslateX.value === 0) {
+      // i.e., spring animation for gesture has finished
+      if (currentValue >= N_original * 2) {
+        activeIndex.value = currentValue - N_original;
+      } else if (currentValue < N_original) {
+        activeIndex.value = currentValue + N_original;
+      }
+    }
+  });
   const panGesture = Gesture.Pan().onBegin(() => {
     contextX.value = gestureTranslateX.value;
   }).onUpdate(event => {
@@ -112,7 +127,8 @@ const CarouselCardStack = ({
   }
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, {
-      height: cardHeight + 60
+      height: cardHeight + 60,
+      backgroundColor: backgroundColor
     }],
     children: [/*#__PURE__*/_jsx(GestureDetector, {
       gesture: panGesture,
@@ -126,6 +142,7 @@ const CarouselCardStack = ({
             const displayOffset = index - (activeIndex.value - currentCardDragOffset);
             const scale = interpolate(displayOffset, [-1, 0, 1], [SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR], Extrapolation.CLAMP);
             const translateX = interpolate(displayOffset, [-1, 0, 1], [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X], Extrapolation.CLAMP);
+            const rotation = interpolate(displayOffset, [-1, 0, 1], [-SIDE_CARD_ROTATION_DEGREES, 0, SIDE_CARD_ROTATION_DEGREES], Extrapolation.CLAMP);
             const opacity = interpolate(Math.abs(displayOffset), [0, 1, 2, 2.75], [1, 1, 0.6, 0], Extrapolation.CLAMP);
             const snappedDisplayOffset = index - Math.round(activeIndex.value);
             const zIndex = virtualData.length - Math.abs(snappedDisplayOffset);
@@ -134,6 +151,8 @@ const CarouselCardStack = ({
                 translateX
               }, {
                 scale
+              }, {
+                rotateZ: `${rotation}deg`
               }],
               opacity,
               zIndex
@@ -185,7 +204,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#212121"
+    backgroundColor: "transparent"
   },
   cardContainer: {
     width: SCREEN_WIDTH,
@@ -195,15 +214,6 @@ const styles = StyleSheet.create({
   card: {
     position: "absolute",
     borderRadius: 16,
-    backgroundColor: "white",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    elevation: 8,
     overflow: "hidden"
   },
   cardImage: {

package/lib/module/components/CarouselCardStack/CarouselCardStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","View","StyleSheet","Image","Dimensions","Text","Gesture","GestureDetector","Animated","useSharedValue","useAnimatedStyle","withSpring","interpolate","useDerivedValue","Extrapolation","useTheme","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","get","CARD_WIDTH_FACTOR","CARD_ASPECT_RATIO","SIDE_CARD_SCALE_FACTOR","CARD_WIDTH","CARD_HEIGHT","MAX_X_FACTOR","SIDE_CARD_TRANSLATE_X_FACTOR","Math","min","SIDE_CARD_TRANSLATE_X","ACTIVE_CARD_SCALE","SPRING_CONFIG","damping","stiffness","mass","createVirtualData","originalData","length","prefixItems","items","segmentPrefix","map","item","idx","uniqueId","id","prevSegment","currSegment","nextSegment","CarouselCardStack","data","cardHeight","cardWidth","theme","N_original","virtualData","activeIndex","gestureTranslateX","contextX","value","handleLoopReset","currentValue","round","panGesture","Pan","onBegin","onUpdate","event","translationX","onEnd","threshold","newTargetVirtualIndex","max","finished","activeDotIndex","currentVal","style","styles","container","height","children","emptyText","gesture","cardContainer","index","animatedStyle","currentCardDragOffset","displayOffset","scale","CLAMP","translateX","opacity","abs","snappedDisplayOffset","zIndex","transform","card","source","uri","image","cardImage","title","titleContainer","cardTitle","paginationContainer","_","i","isActiveDot","dotStyle","borderRadius","backgroundColor","primary","marginHorizontal","create","alignItems","justifyContent","position","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","overflow","resizeMode","bottom","left","right","padding","color","fontSize","fontWeight","flexDirection","marginTop","marginBottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/CarouselCardStack.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","View","StyleSheet","Image","Dimensions","Text","Gesture","GestureDetector","Animated","useSharedValue","useAnimatedStyle","withSpring","interpolate","useDerivedValue","Extrapolation","useTheme","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","get","CARD_WIDTH_FACTOR","CARD_ASPECT_RATIO","SIDE_CARD_SCALE_FACTOR","CARD_WIDTH","CARD_HEIGHT","MAX_X_FACTOR","SIDE_CARD_TRANSLATE_X_FACTOR","Math","min","SIDE_CARD_TRANSLATE_X","ACTIVE_CARD_SCALE","SPRING_CONFIG","damping","stiffness","mass","SIDE_CARD_ROTATION_DEGREES","createVirtualData","originalData","length","prefixItems","items","segmentPrefix","map","item","idx","uniqueId","id","prevSegment","currSegment","nextSegment","CarouselCardStack","data","cardHeight","cardWidth","backgroundColor","theme","N_original","virtualData","activeIndex","gestureTranslateX","contextX","value","handleLoopReset","currentValue","round","panGesture","Pan","onBegin","onUpdate","event","translationX","onEnd","threshold","newTargetVirtualIndex","max","finished","activeDotIndex","currentVal","style","styles","container","height","children","emptyText","gesture","cardContainer","index","animatedStyle","currentCardDragOffset","displayOffset","scale","CLAMP","translateX","rotation","opacity","abs","snappedDisplayOffset","zIndex","transform","rotateZ","card","source","uri","image","cardImage","title","titleContainer","cardTitle","paginationContainer","_","i","isActiveDot","dotStyle","borderRadius","primary","marginHorizontal","create","alignItems","justifyContent","position","overflow","resizeMode","bottom","left","right","padding","color","fontSize","fontWeight","flexDirection","marginTop","marginBottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/CarouselCardStack.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts

@@ -8,6 +8,7 @@ interface CarouselCardStackProps {
     data: CarouselItemOriginal[];
     cardHeight?: number;
     cardWidth?: number;
+    backgroundColor?: string;
 }
 declare const CarouselCardStack: React.FC<CarouselCardStackProps>;
 export default CarouselCardStack;

package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselCardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/CarouselCardStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA4B5D,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsLvD,CAAC;AAwDF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CarouselCardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/CarouselCardStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AA6B5D,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAG,MAAM,CAAC;CAC3B;AAuBD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgNvD,CAAC;AAkDF,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "related-ui-components",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "main": "./src/index.ts",
   "scripts": {
     "start": "expo start",

package/src/components/CarouselCardStack/CarouselCardStack.tsx

@@ -25,6 +25,7 @@ const SIDE_CARD_TRANSLATE_X_FACTOR = Math.min(0.32, MAX_X_FACTOR);
 const SIDE_CARD_TRANSLATE_X = CARD_WIDTH * SIDE_CARD_TRANSLATE_X_FACTOR;
 const ACTIVE_CARD_SCALE = 1.0;
 const SPRING_CONFIG = { damping: 18, stiffness: 120, mass: 0.6 };
+const SIDE_CARD_ROTATION_DEGREES = 7;
 
 interface CarouselItemOriginal {
   id: string;
@@ -40,6 +41,7 @@ interface CarouselCardStackProps {
   data: CarouselItemOriginal[];
   cardHeight?: number;
   cardWidth?: number;
+  backgroundColor? : string;
 }
 
 const createVirtualData = (
@@ -67,6 +69,7 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   data: originalData,
   cardHeight = CARD_HEIGHT,
   cardWidth = CARD_WIDTH,
+  backgroundColor = "transparent"
 }) => {
   const { theme } = useTheme();
 
@@ -103,6 +106,19 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
     }
   };
 
+  useDerivedValue(() => {
+  const currentValue = Math.round(activeIndex.value);
+  
+  // Only reset if we're at the boundaries and not currently animating (gestureTranslateX is 0)
+  if (gestureTranslateX.value === 0) { // i.e., spring animation for gesture has finished
+    if (currentValue >= N_original * 2) {
+      activeIndex.value = currentValue - N_original;
+    } else if (currentValue < N_original) {
+      activeIndex.value = currentValue + N_original;
+    }
+  }
+});
+
   const panGesture = Gesture.Pan()
     .onBegin(() => {
       contextX.value = gestureTranslateX.value;
@@ -157,7 +173,7 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
   }
 
   return (
-    <View style={[styles.container, { height: cardHeight + 60 }]}>
+    <View style={[styles.container, { height: cardHeight + 60, backgroundColor: backgroundColor}]}>
       <GestureDetector gesture={panGesture}>
         <Animated.View style={[styles.cardContainer, { height: cardHeight }]}>
           {virtualData.map((item, index) => {
@@ -184,6 +200,17 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
                 Extrapolation.CLAMP
               );
 
+              const rotation = interpolate(
+                displayOffset,
+                [-1, 0, 1], 
+                [
+                  -SIDE_CARD_ROTATION_DEGREES,
+                  0,
+                  SIDE_CARD_ROTATION_DEGREES,
+                ], 
+                Extrapolation.CLAMP,
+              );
+
               const opacity = interpolate(
                 Math.abs(displayOffset),
                 [0, 1, 2, 2.75],
@@ -196,8 +223,9 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
               const zIndex =
                 virtualData.length - Math.abs(snappedDisplayOffset);
 
+
               return {
-                transform: [{ translateX }, { scale }],
+                transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
                 opacity,
                 zIndex,
               };
@@ -251,7 +279,7 @@ const styles = StyleSheet.create({
   container: {
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#212121",
+    backgroundColor: "transparent",
   },
   cardContainer: {
     width: SCREEN_WIDTH,
@@ -261,12 +289,6 @@ const styles = StyleSheet.create({
   card: {
     position: "absolute",
     borderRadius: 16,
-    backgroundColor: "white",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    elevation: 8,
     overflow: "hidden",
   },
   cardImage: {