related-ui-components 2.7.7 → 2.7.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/module/components/CarouselCardStack/CarouselCardStack.js +54 -75
- package/lib/module/components/CarouselCardStack/CarouselCardStack.js.map +1 -1
- package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts +1 -1
- package/lib/typescript/src/components/CarouselCardStack/CarouselCardStack.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/CarouselCardStack/CarouselCardStack.tsx +142 -168
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import { Image } from "expo-image";
|
|
3
4
|
import React, { useEffect, useMemo } from "react";
|
|
4
|
-
import {
|
|
5
|
+
import { Dimensions, StyleSheet, Text, View } from "react-native";
|
|
5
6
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
6
|
-
import Animated, {
|
|
7
|
+
import Animated, { Extrapolation, interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
|
|
7
8
|
import { useTheme } from "../../theme/index.js";
|
|
9
|
+
|
|
10
|
+
// --- Constants remain the same ---
|
|
8
11
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
12
|
const {
|
|
10
13
|
width: SCREEN_WIDTH
|
|
@@ -24,9 +27,9 @@ const SPRING_CONFIG = {
|
|
|
24
27
|
mass: 0.6
|
|
25
28
|
};
|
|
26
29
|
const SIDE_CARD_ROTATION_DEGREES = 7;
|
|
30
|
+
const VISIBILITY_WINDOW = 3; // Render active card + 2 on each side
|
|
27
31
|
|
|
28
|
-
//
|
|
29
|
-
const VISIBLE_RANGE = 2; // Items on each side of active item
|
|
32
|
+
// --- Interfaces remain the same ---
|
|
30
33
|
|
|
31
34
|
const createVirtualData = originalData => {
|
|
32
35
|
if (!originalData || originalData.length === 0) return [];
|
|
@@ -39,8 +42,6 @@ const createVirtualData = originalData => {
|
|
|
39
42
|
const nextSegment = prefixItems(originalData, "next");
|
|
40
43
|
return [...prevSegment, ...currSegment, ...nextSegment];
|
|
41
44
|
};
|
|
42
|
-
|
|
43
|
-
// Memoized card component
|
|
44
45
|
const CarouselCard = /*#__PURE__*/React.memo(({
|
|
45
46
|
item,
|
|
46
47
|
index,
|
|
@@ -54,28 +55,30 @@ const CarouselCard = /*#__PURE__*/React.memo(({
|
|
|
54
55
|
const currentCardDragOffset = gestureTranslateX.value / cardWidth;
|
|
55
56
|
const displayOffset = index - (activeIndex.value - currentCardDragOffset);
|
|
56
57
|
|
|
57
|
-
//
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
// --- THE CORE CHANGE IS HERE ---
|
|
59
|
+
// Check if the card is within our visibility window on the UI thread.
|
|
60
|
+
const isVisible = Math.abs(displayOffset) < VISIBILITY_WINDOW;
|
|
61
|
+
|
|
62
|
+
// If not visible, we don't need to calculate transforms.
|
|
63
|
+
// `display: 'none'` is highly performant as it removes the item from the layout.
|
|
64
|
+
if (!isVisible) {
|
|
60
65
|
return {
|
|
61
|
-
|
|
62
|
-
transform: [{
|
|
63
|
-
translateX: 0
|
|
64
|
-
}, {
|
|
65
|
-
scale: 0.8
|
|
66
|
-
}, {
|
|
67
|
-
rotateZ: '0deg'
|
|
68
|
-
}],
|
|
69
|
-
zIndex: 0
|
|
66
|
+
display: "none"
|
|
70
67
|
};
|
|
71
68
|
}
|
|
69
|
+
|
|
70
|
+
// Calculations now only run for visible cards
|
|
72
71
|
const scale = interpolate(displayOffset, [-1, 0, 1], [SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR], Extrapolation.CLAMP);
|
|
73
72
|
const translateX = interpolate(displayOffset, [-1, 0, 1], [-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X], Extrapolation.CLAMP);
|
|
74
73
|
const rotation = interpolate(displayOffset, [-1, 0, 1], [-SIDE_CARD_ROTATION_DEGREES, 0, SIDE_CARD_ROTATION_DEGREES], Extrapolation.CLAMP);
|
|
75
|
-
const opacity = interpolate(
|
|
74
|
+
const opacity = interpolate(Math.abs(displayOffset), [0, 1, 2], [1, 1, 0],
|
|
75
|
+
// Fade out the outermost cards
|
|
76
|
+
Extrapolation.CLAMP);
|
|
76
77
|
const snappedDisplayOffset = index - Math.round(activeIndex.value);
|
|
77
78
|
const zIndex = virtualDataLength - Math.abs(snappedDisplayOffset);
|
|
78
79
|
return {
|
|
80
|
+
display: "flex",
|
|
81
|
+
// Ensure it's visible
|
|
79
82
|
transform: [{
|
|
80
83
|
translateX
|
|
81
84
|
}, {
|
|
@@ -86,7 +89,7 @@ const CarouselCard = /*#__PURE__*/React.memo(({
|
|
|
86
89
|
opacity,
|
|
87
90
|
zIndex
|
|
88
91
|
};
|
|
89
|
-
}
|
|
92
|
+
});
|
|
90
93
|
return /*#__PURE__*/_jsxs(Animated.View, {
|
|
91
94
|
style: [styles.card, {
|
|
92
95
|
width: cardWidth,
|
|
@@ -97,8 +100,8 @@ const CarouselCard = /*#__PURE__*/React.memo(({
|
|
|
97
100
|
uri: item.image
|
|
98
101
|
},
|
|
99
102
|
style: styles.cardImage,
|
|
100
|
-
|
|
101
|
-
|
|
103
|
+
cachePolicy: "memory-disk",
|
|
104
|
+
transition: 250
|
|
102
105
|
}), item.title && /*#__PURE__*/_jsx(View, {
|
|
103
106
|
style: styles.titleContainer,
|
|
104
107
|
children: /*#__PURE__*/_jsx(Text, {
|
|
@@ -108,7 +111,8 @@ const CarouselCard = /*#__PURE__*/React.memo(({
|
|
|
108
111
|
})]
|
|
109
112
|
});
|
|
110
113
|
});
|
|
111
|
-
|
|
114
|
+
CarouselCard.displayName = "CarouselCard";
|
|
115
|
+
export const CarouselCardStack = ({
|
|
112
116
|
data: originalData,
|
|
113
117
|
cardHeight = CARD_HEIGHT,
|
|
114
118
|
cardWidth = CARD_WIDTH,
|
|
@@ -121,70 +125,49 @@ const CarouselCardStack = ({
|
|
|
121
125
|
const virtualData = useMemo(() => createVirtualData(originalData), [originalData]);
|
|
122
126
|
const activeIndex = useSharedValue(N_original > 0 ? N_original : 0);
|
|
123
127
|
const gestureTranslateX = useSharedValue(0);
|
|
124
|
-
const contextX = useSharedValue(0);
|
|
125
128
|
useEffect(() => {
|
|
126
129
|
activeIndex.value = N_original > 0 ? N_original : 0;
|
|
127
130
|
gestureTranslateX.value = 0;
|
|
128
131
|
}, [N_original, activeIndex, gestureTranslateX]);
|
|
132
|
+
const handleLoopReset = () => {
|
|
133
|
+
"worklet";
|
|
129
134
|
|
|
130
|
-
|
|
131
|
-
const visibleItems = useDerivedValue(() => {
|
|
132
|
-
const center = Math.round(activeIndex.value);
|
|
133
|
-
const start = Math.max(0, center - VISIBLE_RANGE);
|
|
134
|
-
const end = Math.min(virtualData.length - 1, center + VISIBLE_RANGE);
|
|
135
|
-
return virtualData.slice(start, end + 1).map((item, sliceIndex) => ({
|
|
136
|
-
item,
|
|
137
|
-
originalIndex: start + sliceIndex
|
|
138
|
-
}));
|
|
139
|
-
});
|
|
140
|
-
useDerivedValue(() => {
|
|
135
|
+
if (N_original === 0) return;
|
|
141
136
|
const currentValue = Math.round(activeIndex.value);
|
|
137
|
+
if (currentValue >= N_original * 2) {
|
|
138
|
+
activeIndex.value = currentValue - N_original;
|
|
139
|
+
} else if (currentValue < N_original) {
|
|
140
|
+
activeIndex.value = currentValue + N_original;
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
useDerivedValue(() => {
|
|
142
144
|
if (gestureTranslateX.value === 0) {
|
|
143
|
-
|
|
144
|
-
activeIndex.value = currentValue - N_original;
|
|
145
|
-
} else if (currentValue < N_original) {
|
|
146
|
-
activeIndex.value = currentValue + N_original;
|
|
147
|
-
}
|
|
145
|
+
handleLoopReset();
|
|
148
146
|
}
|
|
149
147
|
});
|
|
150
|
-
const panGesture = Gesture.Pan().activeOffsetX([-10, 10]).
|
|
151
|
-
contextX.value = gestureTranslateX.value;
|
|
152
|
-
}).onUpdate(event => {
|
|
148
|
+
const panGesture = Gesture.Pan().activeOffsetX([-10, 10]).onUpdate(event => {
|
|
153
149
|
gestureTranslateX.value = event.translationX;
|
|
154
150
|
}).onEnd(event => {
|
|
155
151
|
if (virtualData.length === 0) return;
|
|
156
152
|
const threshold = cardWidth / 3;
|
|
157
|
-
let newTargetVirtualIndex = activeIndex.value;
|
|
153
|
+
let newTargetVirtualIndex = Math.round(activeIndex.value);
|
|
158
154
|
if (event.translationX < -threshold) {
|
|
159
|
-
newTargetVirtualIndex
|
|
155
|
+
newTargetVirtualIndex++;
|
|
160
156
|
} else if (event.translationX > threshold) {
|
|
161
|
-
newTargetVirtualIndex
|
|
157
|
+
newTargetVirtualIndex--;
|
|
162
158
|
}
|
|
163
|
-
newTargetVirtualIndex = Math.max(0, Math.min(newTargetVirtualIndex, virtualData.length - 1));
|
|
164
159
|
activeIndex.value = withSpring(newTargetVirtualIndex, SPRING_CONFIG);
|
|
165
160
|
gestureTranslateX.value = withSpring(0, SPRING_CONFIG);
|
|
166
|
-
contextX.value = 0;
|
|
167
161
|
});
|
|
168
162
|
const activeDotIndex = useDerivedValue(() => {
|
|
169
163
|
if (N_original === 0) return 0;
|
|
170
|
-
|
|
171
|
-
return (currentVal % N_original + N_original) % N_original;
|
|
164
|
+
return (Math.round(activeIndex.value) % N_original + N_original) % N_original;
|
|
172
165
|
});
|
|
173
|
-
if (virtualData.length === 0) {
|
|
174
|
-
return /*#__PURE__*/_jsx(View, {
|
|
175
|
-
style: [styles.container, {
|
|
176
|
-
height: cardHeight + 60
|
|
177
|
-
}],
|
|
178
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
179
|
-
style: styles.emptyText,
|
|
180
|
-
children: "No items to display"
|
|
181
|
-
})
|
|
182
|
-
});
|
|
183
|
-
}
|
|
166
|
+
if (virtualData.length === 0) {/* ... */}
|
|
184
167
|
return /*#__PURE__*/_jsxs(View, {
|
|
185
168
|
style: [styles.container, {
|
|
186
169
|
height: cardHeight + 60,
|
|
187
|
-
backgroundColor
|
|
170
|
+
backgroundColor: backgroundColor
|
|
188
171
|
}],
|
|
189
172
|
children: [/*#__PURE__*/_jsx(GestureDetector, {
|
|
190
173
|
gesture: panGesture,
|
|
@@ -205,17 +188,14 @@ const CarouselCardStack = ({
|
|
|
205
188
|
}), N_original > 0 && /*#__PURE__*/_jsx(View, {
|
|
206
189
|
style: styles.paginationContainer,
|
|
207
190
|
children: originalData.map((_, i) => {
|
|
208
|
-
const
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
opacity: isActive ? 1 : 0.5
|
|
217
|
-
};
|
|
218
|
-
});
|
|
191
|
+
const isActiveDot = useDerivedValue(() => activeDotIndex.value === i);
|
|
192
|
+
const dotStyle = useAnimatedStyle(() => ({
|
|
193
|
+
width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
|
|
194
|
+
height: 8,
|
|
195
|
+
borderRadius: 4,
|
|
196
|
+
backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
|
|
197
|
+
marginHorizontal: 4
|
|
198
|
+
}));
|
|
219
199
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
220
200
|
style: dotStyle
|
|
221
201
|
}, `dot-${i}`);
|
|
@@ -241,8 +221,7 @@ const styles = StyleSheet.create({
|
|
|
241
221
|
},
|
|
242
222
|
cardImage: {
|
|
243
223
|
width: "100%",
|
|
244
|
-
height: "100%"
|
|
245
|
-
resizeMode: "cover"
|
|
224
|
+
height: "100%"
|
|
246
225
|
},
|
|
247
226
|
titleContainer: {
|
|
248
227
|
position: "absolute",
|
|
@@ -1 +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","SIDE_CARD_ROTATION_DEGREES","VISIBLE_RANGE","createVirtualData","originalData","length","prefixItems","items","segmentPrefix","map","item","idx","uniqueId","id","prevSegment","currSegment","nextSegment","CarouselCard","memo","index","activeIndex","gestureTranslateX","cardWidth","cardHeight","virtualDataLength","animatedStyle","currentCardDragOffset","value","displayOffset","absDisplayOffset","abs","opacity","transform","translateX","scale","rotateZ","zIndex","CLAMP","rotation","snappedDisplayOffset","round","style","styles","card","height","children","source","uri","image","cardImage","resizeMode","fadeDuration","title","titleContainer","cardTitle","CarouselCardStack","data","backgroundColor","theme","N_original","virtualData","contextX","visibleItems","center","start","max","end","slice","sliceIndex","originalIndex","currentValue","panGesture","Pan","activeOffsetX","onBegin","onUpdate","event","translationX","onEnd","threshold","newTargetVirtualIndex","activeDotIndex","currentVal","container","emptyText","gesture","cardContainer","paginationContainer","_","i","dotStyle","isActive","borderRadius","primary","marginHorizontal","create","alignItems","justifyContent","position","overflow","bottom","left","right","padding","color","fontSize","fontWeight","flexDirection","marginTop","marginBottom"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/CarouselCardStack.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["Image","React","useEffect","useMemo","Dimensions","StyleSheet","Text","View","Gesture","GestureDetector","Animated","Extrapolation","interpolate","useAnimatedStyle","useDerivedValue","useSharedValue","withSpring","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","VISIBILITY_WINDOW","createVirtualData","originalData","length","prefixItems","items","segmentPrefix","map","item","idx","uniqueId","id","prevSegment","currSegment","nextSegment","CarouselCard","memo","index","activeIndex","gestureTranslateX","cardWidth","cardHeight","virtualDataLength","animatedStyle","currentCardDragOffset","value","displayOffset","isVisible","abs","display","scale","CLAMP","translateX","rotation","opacity","snappedDisplayOffset","round","zIndex","transform","rotateZ","style","styles","card","height","children","source","uri","image","cardImage","cachePolicy","transition","title","titleContainer","cardTitle","displayName","CarouselCardStack","data","backgroundColor","theme","N_original","virtualData","handleLoopReset","currentValue","panGesture","Pan","activeOffsetX","onUpdate","event","translationX","onEnd","threshold","newTargetVirtualIndex","activeDotIndex","container","gesture","cardContainer","paginationContainer","_","i","isActiveDot","dotStyle","borderRadius","primary","marginHorizontal","create","alignItems","justifyContent","position","overflow","bottom","left","right","padding","color","fontSize","fontWeight","flexDirection","marginTop","marginBottom","emptyText"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/CarouselCardStack/CarouselCardStack.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,YAAY;AAClC,OAAOC,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,UAAU,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACjE,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACXC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,EACdC,UAAU,QACP,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,sBAAa;;AAEtC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAM;EAAEC,KAAK,EAAEC;AAAa,CAAC,GAAGnB,UAAU,CAACoB,GAAG,CAAC,QAAQ,CAAC;AACxD,MAAMC,iBAAiB,GAAG,GAAG;AAC7B,MAAMC,iBAAiB,GAAG,IAAI;AAC9B,MAAMC,sBAAsB,GAAG,IAAI;AACnC,MAAMC,UAAU,GAAGL,YAAY,GAAGE,iBAAiB;AACnD,MAAMI,WAAW,GAAGD,UAAU,GAAGF,iBAAiB;AAClD,MAAMI,YAAY,GAAG,GAAG,GAAGL,iBAAiB,GAAGE,sBAAsB,GAAG,CAAC;AACzE,MAAMI,4BAA4B,GAAGC,IAAI,CAACC,GAAG,CAAC,IAAI,EAAEH,YAAY,CAAC;AACjE,MAAMI,qBAAqB,GAAGN,UAAU,GAAGG,4BAA4B;AACvE,MAAMI,iBAAiB,GAAG,GAAG;AAC7B,MAAMC,aAAa,GAAG;EAAEC,OAAO,EAAE,EAAE;EAAEC,SAAS,EAAE,GAAG;EAAEC,IAAI,EAAE;AAAI,CAAC;AAChE,MAAMC,0BAA0B,GAAG,CAAC;AACpC,MAAMC,iBAAiB,GAAG,CAAC,CAAC,CAAC;;AAE7B;;AAgBA,MAAMC,iBAAiB,GACrBC,YAAoC,IACV;EAC1B,IAAI,CAACA,YAAY,IAAIA,YAAY,CAACC,MAAM,KAAK,CAAC,EAAE,OAAO,EAAE;EACzD,MAAMC,WAAW,GAAGA,CAClBC,KAA6B,EAC7BC,aAAqB,KAErBD,KAAK,CAACE,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,MAAM;IACxB,GAAGD,IAAI;IACPE,QAAQ,EAAE,GAAGJ,aAAa,IAAIE,IAAI,CAACG,EAAE,IAAIF,GAAG;EAC9C,CAAC,CAAC,CAAC;EACL,MAAMG,WAAW,GAAGR,WAAW,CAACF,YAAY,EAAE,MAAM,CAAC;EACrD,MAAMW,WAAW,GAAGT,WAAW,CAACF,YAAY,EAAE,MAAM,CAAC;EACrD,MAAMY,WAAW,GAAGV,WAAW,CAACF,YAAY,EAAE,MAAM,CAAC;EACrD,OAAO,CAAC,GAAGU,WAAW,EAAE,GAAGC,WAAW,EAAE,GAAGC,WAAW,CAAC;AACzD,CAAC;AAED,MAAMC,YAAY,gBAAGvD,KAAK,CAACwD,IAAI,CAC7B,CAAC;EACCR,IAAI;EACJS,KAAK;EACLC,WAAW;EACXC,iBAAiB;EACjBC,SAAS;EACTC,UAAU;EACVC;AASF,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGnD,gBAAgB,CAAC,MAAM;IAC3C,MAAMoD,qBAAqB,GAAGL,iBAAiB,CAACM,KAAK,GAAGL,SAAS;IACjE,MAAMM,aAAa,GACjBT,KAAK,IAAIC,WAAW,CAACO,KAAK,GAAGD,qBAAqB,CAAC;;IAErD;IACA;IACA,MAAMG,SAAS,GAAGpC,IAAI,CAACqC,GAAG,CAACF,aAAa,CAAC,GAAG1B,iBAAiB;;IAE7D;IACA;IACA,IAAI,CAAC2B,SAAS,EAAE;MACd,OAAO;QAAEE,OAAO,EAAE;MAAO,CAAC;IAC5B;;IAEA;IACA,MAAMC,KAAK,GAAG3D,WAAW,CACvBuD,aAAa,EACb,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CAACxC,sBAAsB,EAAEQ,iBAAiB,EAAER,sBAAsB,CAAC,EACnEhB,aAAa,CAAC6D,KAChB,CAAC;IACD,MAAMC,UAAU,GAAG7D,WAAW,CAC5BuD,aAAa,EACb,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CAAC,CAACjC,qBAAqB,EAAE,CAAC,EAAEA,qBAAqB,CAAC,EAClDvB,aAAa,CAAC6D,KAChB,CAAC;IACD,MAAME,QAAQ,GAAG9D,WAAW,CAC1BuD,aAAa,EACb,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACV,CAAC,CAAC3B,0BAA0B,EAAE,CAAC,EAAEA,0BAA0B,CAAC,EAC5D7B,aAAa,CAAC6D,KAChB,CAAC;IACD,MAAMG,OAAO,GAAG/D,WAAW,CACzBoB,IAAI,CAACqC,GAAG,CAACF,aAAa,CAAC,EACvB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACT,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAAE;IACXxD,aAAa,CAAC6D,KAChB,CAAC;IACD,MAAMI,oBAAoB,GAAGlB,KAAK,GAAG1B,IAAI,CAAC6C,KAAK,CAAClB,WAAW,CAACO,KAAK,CAAC;IAClE,MAAMY,MAAM,GAAGf,iBAAiB,GAAG/B,IAAI,CAACqC,GAAG,CAACO,oBAAoB,CAAC;IAEjE,OAAO;MACLN,OAAO,EAAE,MAAM;MAAE;MACjBS,SAAS,EAAE,CAAC;QAAEN;MAAW,CAAC,EAAE;QAAEF;MAAM,CAAC,EAAE;QAAES,OAAO,EAAE,GAAGN,QAAQ;MAAM,CAAC,CAAC;MACrEC,OAAO;MACPG;IACF,CAAC;EACH,CAAC,CAAC;EAEF,oBACEzD,KAAA,CAACX,QAAQ,CAACH,IAAI;IACZ0E,KAAK,EAAE,CACLC,MAAM,CAACC,IAAI,EACX;MAAE7D,KAAK,EAAEuC,SAAS;MAAEuB,MAAM,EAAEtB;IAAW,CAAC,EACxCE,aAAa,CACb;IAAAqB,QAAA,gBAEFlE,IAAA,CAACnB,KAAK;MACJsF,MAAM,EAAE;QAAEC,GAAG,EAAEtC,IAAI,CAACuC;MAAM,CAAE;MAC5BP,KAAK,EAAEC,MAAM,CAACO,SAAU;MACxBC,WAAW,EAAC,aAAa;MACzBC,UAAU,EAAE;IAAI,CACjB,CAAC,EACD1C,IAAI,CAAC2C,KAAK,iBACTzE,IAAA,CAACZ,IAAI;MAAC0E,KAAK,EAAEC,MAAM,CAACW,cAAe;MAAAR,QAAA,eACjClE,IAAA,CAACb,IAAI;QAAC2E,KAAK,EAAEC,MAAM,CAACY,SAAU;QAAAT,QAAA,EAAEpC,IAAI,CAAC2C;MAAK,CAAO;IAAC,CAC9C,CACP;EAAA,CACY,CAAC;AAEpB,CACF,CAAC;AAEDpC,YAAY,CAACuC,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMC,iBAAmD,GAAGA,CAAC;EAClEC,IAAI,EAAEtD,YAAY;EAClBmB,UAAU,GAAGjC,WAAW;EACxBgC,SAAS,GAAGjC,UAAU;EACtBsE,eAAe,GAAG;AACpB,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAM,CAAC,GAAGlF,QAAQ,CAAC,CAAC;EAC5B,MAAMmF,UAAU,GAAGzD,YAAY,CAACC,MAAM;EAEtC,MAAMyD,WAAW,GAAGlG,OAAO,CAAC,MAAMuC,iBAAiB,CAACC,YAAY,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElF,MAAMgB,WAAW,GAAG5C,cAAc,CAACqF,UAAU,GAAG,CAAC,GAAGA,UAAU,GAAG,CAAC,CAAC;EACnE,MAAMxC,iBAAiB,GAAG7C,cAAc,CAAC,CAAC,CAAC;EAE3Cb,SAAS,CAAC,MAAM;IACdyD,WAAW,CAACO,KAAK,GAAGkC,UAAU,GAAG,CAAC,GAAGA,UAAU,GAAG,CAAC;IACnDxC,iBAAiB,CAACM,KAAK,GAAG,CAAC;EAC7B,CAAC,EAAE,CAACkC,UAAU,EAAEzC,WAAW,EAAEC,iBAAiB,CAAC,CAAC;EAEhD,MAAM0C,eAAe,GAAGA,CAAA,KAAM;IAC5B,SAAS;;IACT,IAAIF,UAAU,KAAK,CAAC,EAAE;IACtB,MAAMG,YAAY,GAAGvE,IAAI,CAAC6C,KAAK,CAAClB,WAAW,CAACO,KAAK,CAAC;IAClD,IAAIqC,YAAY,IAAIH,UAAU,GAAG,CAAC,EAAE;MAClCzC,WAAW,CAACO,KAAK,GAAGqC,YAAY,GAAGH,UAAU;IAC/C,CAAC,MAAM,IAAIG,YAAY,GAAGH,UAAU,EAAE;MACpCzC,WAAW,CAACO,KAAK,GAAGqC,YAAY,GAAGH,UAAU;IAC/C;EACF,CAAC;EAEDtF,eAAe,CAAC,MAAM;IACpB,IAAI8C,iBAAiB,CAACM,KAAK,KAAK,CAAC,EAAE;MACjCoC,eAAe,CAAC,CAAC;IACnB;EACF,CAAC,CAAC;EAEF,MAAME,UAAU,GAAGhG,OAAO,CAACiG,GAAG,CAAC,CAAC,CAC7BC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CACxBC,QAAQ,CAAEC,KAAK,IAAK;IACnBhD,iBAAiB,CAACM,KAAK,GAAG0C,KAAK,CAACC,YAAY;EAC9C,CAAC,CAAC,CACDC,KAAK,CAAEF,KAAK,IAAK;IAChB,IAAIP,WAAW,CAACzD,MAAM,KAAK,CAAC,EAAE;IAC9B,MAAMmE,SAAS,GAAGlD,SAAS,GAAG,CAAC;IAC/B,IAAImD,qBAAqB,GAAGhF,IAAI,CAAC6C,KAAK,CAAClB,WAAW,CAACO,KAAK,CAAC;IACzD,IAAI0C,KAAK,CAACC,YAAY,GAAG,CAACE,SAAS,EAAE;MACnCC,qBAAqB,EAAE;IACzB,CAAC,MAAM,IAAIJ,KAAK,CAACC,YAAY,GAAGE,SAAS,EAAE;MACzCC,qBAAqB,EAAE;IACzB;IACArD,WAAW,CAACO,KAAK,GAAGlD,UAAU,CAACgG,qBAAqB,EAAE5E,aAAa,CAAC;IACpEwB,iBAAiB,CAACM,KAAK,GAAGlD,UAAU,CAAC,CAAC,EAAEoB,aAAa,CAAC;EACxD,CAAC,CAAC;EAEJ,MAAM6E,cAAc,GAAGnG,eAAe,CAAC,MAAM;IAC3C,IAAIsF,UAAU,KAAK,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAACpE,IAAI,CAAC6C,KAAK,CAAClB,WAAW,CAACO,KAAK,CAAC,GAAGkC,UAAU,GAAGA,UAAU,IAAIA,UAAU;EAC/E,CAAC,CAAC;EAEF,IAAIC,WAAW,CAACzD,MAAM,KAAK,CAAC,EAAE,CAAE;EAEhC,oBACEvB,KAAA,CAACd,IAAI;IACH0E,KAAK,EAAE,CACLC,MAAM,CAACgC,SAAS,EAChB;MAAE9B,MAAM,EAAEtB,UAAU,GAAG,EAAE;MAAEoC,eAAe,EAAEA;IAAgB,CAAC,CAC7D;IAAAb,QAAA,gBAEFlE,IAAA,CAACV,eAAe;MAAC0G,OAAO,EAAEX,UAAW;MAAAnB,QAAA,eACnClE,IAAA,CAACT,QAAQ,CAACH,IAAI;QAAC0E,KAAK,EAAE,CAACC,MAAM,CAACkC,aAAa,EAAE;UAAEhC,MAAM,EAAEtB;QAAW,CAAC,CAAE;QAAAuB,QAAA,EAElEgB,WAAW,CAACrD,GAAG,CAAC,CAACC,IAAI,EAAES,KAAK,kBAC3BvC,IAAA,CAACqC,YAAY;UAEXP,IAAI,EAAEA,IAAK;UACXS,KAAK,EAAEA,KAAM;UACbC,WAAW,EAAEA,WAAY;UACzBC,iBAAiB,EAAEA,iBAAkB;UACrCC,SAAS,EAAEA,SAAU;UACrBC,UAAU,EAAEA,UAAW;UACvBC,iBAAiB,EAAEsC,WAAW,CAACzD;QAAO,GAPjCK,IAAI,CAACE,QAQX,CACF;MAAC,CACW;IAAC,CACD,CAAC,EAGjBiD,UAAU,GAAG,CAAC,iBACZjF,IAAA,CAACZ,IAAI;MAAC0E,KAAK,EAAEC,MAAM,CAACmC,mBAAoB;MAAAhC,QAAA,EACrC1C,YAAY,CAACK,GAAG,CAAC,CAACsE,CAAC,EAAEC,CAAC,KAAK;QAC1B,MAAMC,WAAW,GAAG1G,eAAe,CAAC,MAAMmG,cAAc,CAAC/C,KAAK,KAAKqD,CAAC,CAAC;QACrE,MAAME,QAAQ,GAAG5G,gBAAgB,CAAC,OAAO;UACrCS,KAAK,EAAEN,UAAU,CAACwG,WAAW,CAACtD,KAAK,GAAG,EAAE,GAAG,CAAC,EAAE9B,aAAa,CAAC;UAC5DgD,MAAM,EAAE,CAAC;UACTsC,YAAY,EAAE,CAAC;UACfxB,eAAe,EAAEsB,WAAW,CAACtD,KAAK,GAAGiC,KAAK,CAACwB,OAAO,GAAG,SAAS;UAC9DC,gBAAgB,EAAE;QACtB,CAAC,CAAC,CAAC;QACH,oBAAOzG,IAAA,CAACT,QAAQ,CAACH,IAAI;UAAkB0E,KAAK,EAAEwC;QAAS,GAA5B,OAAOF,CAAC,EAAsB,CAAC;MAC5D,CAAC;IAAC,CACE,CACP;EAAA,CACE,CAAC;AAEX,CAAC;AAED,MAAMrC,MAAM,GAAG7E,UAAU,CAACwH,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB7B,eAAe,EAAE;EACnB,CAAC;EACDkB,aAAa,EAAE;IACb9F,KAAK,EAAEC,YAAY;IACnBuG,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACD5C,IAAI,EAAE;IACJ6C,QAAQ,EAAE,UAAU;IACpBN,YAAY,EAAE,EAAE;IAChBO,QAAQ,EAAE;EACZ,CAAC;EACDxC,SAAS,EAAE;IACTnE,KAAK,EAAE,MAAM;IACb8D,MAAM,EAAE;EACV,CAAC;EACDS,cAAc,EAAE;IACdmC,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE,EAAE;IACVC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE,EAAE;IACTlC,eAAe,EAAE,iBAAiB;IAClCmC,OAAO,EAAE,CAAC;IACVX,YAAY,EAAE;EAChB,CAAC;EACD5B,SAAS,EAAE;IACTwC,KAAK,EAAE,OAAO;IACdC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACDnB,mBAAmB,EAAE;IACnBoB,aAAa,EAAE,KAAK;IACpBV,cAAc,EAAE,QAAQ;IACxBD,UAAU,EAAE,QAAQ;IACpBY,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE;EAChB,CAAC;EACDC,SAAS,EAAE;IACTN,KAAK,EAAE,SAAS;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAevC,iBAAiB","ignoreList":[]}
|
|
@@ -10,6 +10,6 @@ interface CarouselCardStackProps {
|
|
|
10
10
|
cardWidth?: number;
|
|
11
11
|
backgroundColor?: string;
|
|
12
12
|
}
|
|
13
|
-
declare const CarouselCardStack: React.FC<CarouselCardStackProps>;
|
|
13
|
+
export declare const CarouselCardStack: React.FC<CarouselCardStackProps>;
|
|
14
14
|
export default CarouselCardStack;
|
|
15
15
|
//# sourceMappingURL=CarouselCardStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselCardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/CarouselCardStack.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselCardStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/CarouselCardStack/CarouselCardStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AA6BlD,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,UAAU,sBAAsB;IAC9B,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAmHD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwG9D,CAAC;AAiDF,eAAe,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { Image } from "expo-image";
|
|
2
|
+
import React, { useEffect, useMemo } from "react";
|
|
3
|
+
import { Dimensions, StyleSheet, Text, View } from "react-native";
|
|
3
4
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
4
5
|
import Animated, {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
runOnJS,
|
|
12
|
-
Extrapolation,
|
|
6
|
+
Extrapolation,
|
|
7
|
+
interpolate,
|
|
8
|
+
useAnimatedStyle,
|
|
9
|
+
useDerivedValue,
|
|
10
|
+
useSharedValue,
|
|
11
|
+
withSpring,
|
|
13
12
|
} from "react-native-reanimated";
|
|
14
13
|
import { useTheme } from "../../theme";
|
|
15
14
|
|
|
15
|
+
// --- Constants remain the same ---
|
|
16
16
|
const { width: SCREEN_WIDTH } = Dimensions.get("window");
|
|
17
|
-
|
|
18
17
|
const CARD_WIDTH_FACTOR = 0.5;
|
|
19
18
|
const CARD_ASPECT_RATIO = 1.35;
|
|
20
19
|
const SIDE_CARD_SCALE_FACTOR = 0.85;
|
|
@@ -26,20 +25,17 @@ const SIDE_CARD_TRANSLATE_X = CARD_WIDTH * SIDE_CARD_TRANSLATE_X_FACTOR;
|
|
|
26
25
|
const ACTIVE_CARD_SCALE = 1.0;
|
|
27
26
|
const SPRING_CONFIG = { damping: 18, stiffness: 120, mass: 0.6 };
|
|
28
27
|
const SIDE_CARD_ROTATION_DEGREES = 7;
|
|
28
|
+
const VISIBILITY_WINDOW = 3; // Render active card + 2 on each side
|
|
29
29
|
|
|
30
|
-
//
|
|
31
|
-
const VISIBLE_RANGE = 2; // Items on each side of active item
|
|
32
|
-
|
|
30
|
+
// --- Interfaces remain the same ---
|
|
33
31
|
interface CarouselItemOriginal {
|
|
34
32
|
id: string;
|
|
35
33
|
image: string;
|
|
36
34
|
title?: string;
|
|
37
35
|
}
|
|
38
|
-
|
|
39
36
|
interface CarouselItemVirtual extends CarouselItemOriginal {
|
|
40
37
|
uniqueId: string;
|
|
41
38
|
}
|
|
42
|
-
|
|
43
39
|
interface CarouselCardStackProps {
|
|
44
40
|
data: CarouselItemOriginal[];
|
|
45
41
|
cardHeight?: number;
|
|
@@ -51,7 +47,6 @@ const createVirtualData = (
|
|
|
51
47
|
originalData: CarouselItemOriginal[]
|
|
52
48
|
): CarouselItemVirtual[] => {
|
|
53
49
|
if (!originalData || originalData.length === 0) return [];
|
|
54
|
-
|
|
55
50
|
const prefixItems = (
|
|
56
51
|
items: CarouselItemOriginal[],
|
|
57
52
|
segmentPrefix: string
|
|
@@ -60,195 +55,178 @@ const createVirtualData = (
|
|
|
60
55
|
...item,
|
|
61
56
|
uniqueId: `${segmentPrefix}-${item.id}-${idx}`,
|
|
62
57
|
}));
|
|
63
|
-
|
|
64
58
|
const prevSegment = prefixItems(originalData, "prev");
|
|
65
59
|
const currSegment = prefixItems(originalData, "curr");
|
|
66
60
|
const nextSegment = prefixItems(originalData, "next");
|
|
67
|
-
|
|
68
61
|
return [...prevSegment, ...currSegment, ...nextSegment];
|
|
69
62
|
};
|
|
70
63
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
64
|
+
const CarouselCard = React.memo(
|
|
65
|
+
({
|
|
66
|
+
item,
|
|
67
|
+
index,
|
|
68
|
+
activeIndex,
|
|
69
|
+
gestureTranslateX,
|
|
70
|
+
cardWidth,
|
|
71
|
+
cardHeight,
|
|
72
|
+
virtualDataLength,
|
|
73
|
+
}: {
|
|
74
|
+
item: CarouselItemVirtual;
|
|
75
|
+
index: number;
|
|
76
|
+
activeIndex: Animated.SharedValue<number>;
|
|
77
|
+
gestureTranslateX: Animated.SharedValue<number>;
|
|
78
|
+
cardWidth: number;
|
|
79
|
+
cardHeight: number;
|
|
80
|
+
virtualDataLength: number;
|
|
81
|
+
}) => {
|
|
82
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
83
|
+
const currentCardDragOffset = gestureTranslateX.value / cardWidth;
|
|
84
|
+
const displayOffset =
|
|
85
|
+
index - (activeIndex.value - currentCardDragOffset);
|
|
86
|
+
|
|
87
|
+
// --- THE CORE CHANGE IS HERE ---
|
|
88
|
+
// Check if the card is within our visibility window on the UI thread.
|
|
89
|
+
const isVisible = Math.abs(displayOffset) < VISIBILITY_WINDOW;
|
|
90
|
+
|
|
91
|
+
// If not visible, we don't need to calculate transforms.
|
|
92
|
+
// `display: 'none'` is highly performant as it removes the item from the layout.
|
|
93
|
+
if (!isVisible) {
|
|
94
|
+
return { display: "none" };
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Calculations now only run for visible cards
|
|
98
|
+
const scale = interpolate(
|
|
99
|
+
displayOffset,
|
|
100
|
+
[-1, 0, 1],
|
|
101
|
+
[SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR],
|
|
102
|
+
Extrapolation.CLAMP
|
|
103
|
+
);
|
|
104
|
+
const translateX = interpolate(
|
|
105
|
+
displayOffset,
|
|
106
|
+
[-1, 0, 1],
|
|
107
|
+
[-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X],
|
|
108
|
+
Extrapolation.CLAMP
|
|
109
|
+
);
|
|
110
|
+
const rotation = interpolate(
|
|
111
|
+
displayOffset,
|
|
112
|
+
[-1, 0, 1],
|
|
113
|
+
[-SIDE_CARD_ROTATION_DEGREES, 0, SIDE_CARD_ROTATION_DEGREES],
|
|
114
|
+
Extrapolation.CLAMP
|
|
115
|
+
);
|
|
116
|
+
const opacity = interpolate(
|
|
117
|
+
Math.abs(displayOffset),
|
|
118
|
+
[0, 1, 2],
|
|
119
|
+
[1, 1, 0], // Fade out the outermost cards
|
|
120
|
+
Extrapolation.CLAMP
|
|
121
|
+
);
|
|
122
|
+
const snappedDisplayOffset = index - Math.round(activeIndex.value);
|
|
123
|
+
const zIndex = virtualDataLength - Math.abs(snappedDisplayOffset);
|
|
84
124
|
|
|
85
|
-
// Early return for items that are too far away to optimize performance
|
|
86
|
-
const absDisplayOffset = Math.abs(displayOffset);
|
|
87
|
-
if (absDisplayOffset > 2.5) {
|
|
88
125
|
return {
|
|
89
|
-
|
|
90
|
-
transform: [{ translateX
|
|
91
|
-
|
|
126
|
+
display: "flex", // Ensure it's visible
|
|
127
|
+
transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
|
|
128
|
+
opacity,
|
|
129
|
+
zIndex,
|
|
92
130
|
};
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const scale = interpolate(
|
|
96
|
-
displayOffset,
|
|
97
|
-
[-1, 0, 1],
|
|
98
|
-
[SIDE_CARD_SCALE_FACTOR, ACTIVE_CARD_SCALE, SIDE_CARD_SCALE_FACTOR],
|
|
99
|
-
Extrapolation.CLAMP
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
const translateX = interpolate(
|
|
103
|
-
displayOffset,
|
|
104
|
-
[-1, 0, 1],
|
|
105
|
-
[-SIDE_CARD_TRANSLATE_X, 0, SIDE_CARD_TRANSLATE_X],
|
|
106
|
-
Extrapolation.CLAMP
|
|
107
|
-
);
|
|
108
|
-
|
|
109
|
-
const rotation = interpolate(
|
|
110
|
-
displayOffset,
|
|
111
|
-
[-1, 0, 1],
|
|
112
|
-
[-SIDE_CARD_ROTATION_DEGREES, 0, SIDE_CARD_ROTATION_DEGREES],
|
|
113
|
-
Extrapolation.CLAMP
|
|
114
|
-
);
|
|
131
|
+
});
|
|
115
132
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
133
|
+
return (
|
|
134
|
+
<Animated.View
|
|
135
|
+
style={[
|
|
136
|
+
styles.card,
|
|
137
|
+
{ width: cardWidth, height: cardHeight },
|
|
138
|
+
animatedStyle,
|
|
139
|
+
]}
|
|
140
|
+
>
|
|
141
|
+
<Image
|
|
142
|
+
source={{ uri: item.image }}
|
|
143
|
+
style={styles.cardImage}
|
|
144
|
+
cachePolicy="memory-disk"
|
|
145
|
+
transition={250}
|
|
146
|
+
/>
|
|
147
|
+
{item.title && (
|
|
148
|
+
<View style={styles.titleContainer}>
|
|
149
|
+
<Text style={styles.cardTitle}>{item.title}</Text>
|
|
150
|
+
</View>
|
|
151
|
+
)}
|
|
152
|
+
</Animated.View>
|
|
121
153
|
);
|
|
154
|
+
}
|
|
155
|
+
);
|
|
122
156
|
|
|
123
|
-
|
|
124
|
-
const zIndex = virtualDataLength - Math.abs(snappedDisplayOffset);
|
|
125
|
-
|
|
126
|
-
return {
|
|
127
|
-
transform: [{ translateX }, { scale }, { rotateZ: `${rotation}deg` }],
|
|
128
|
-
opacity,
|
|
129
|
-
zIndex,
|
|
130
|
-
};
|
|
131
|
-
}, [index, cardWidth, virtualDataLength]);
|
|
157
|
+
CarouselCard.displayName = "CarouselCard"
|
|
132
158
|
|
|
133
|
-
|
|
134
|
-
<Animated.View
|
|
135
|
-
style={[
|
|
136
|
-
styles.card,
|
|
137
|
-
{ width: cardWidth, height: cardHeight },
|
|
138
|
-
animatedStyle,
|
|
139
|
-
]}
|
|
140
|
-
>
|
|
141
|
-
<Image
|
|
142
|
-
source={{ uri: item.image }}
|
|
143
|
-
style={styles.cardImage}
|
|
144
|
-
resizeMode="cover"
|
|
145
|
-
fadeDuration={0}
|
|
146
|
-
/>
|
|
147
|
-
{item.title && (
|
|
148
|
-
<View style={styles.titleContainer}>
|
|
149
|
-
<Text style={styles.cardTitle}>{item.title}</Text>
|
|
150
|
-
</View>
|
|
151
|
-
)}
|
|
152
|
-
</Animated.View>
|
|
153
|
-
);
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
|
|
159
|
+
export const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
|
|
157
160
|
data: originalData,
|
|
158
161
|
cardHeight = CARD_HEIGHT,
|
|
159
162
|
cardWidth = CARD_WIDTH,
|
|
160
|
-
backgroundColor = "transparent"
|
|
163
|
+
backgroundColor = "transparent",
|
|
161
164
|
}) => {
|
|
162
165
|
const { theme } = useTheme();
|
|
163
166
|
const N_original = originalData.length;
|
|
164
167
|
|
|
165
|
-
const virtualData = useMemo(
|
|
166
|
-
() => createVirtualData(originalData),
|
|
167
|
-
[originalData]
|
|
168
|
-
);
|
|
168
|
+
const virtualData = useMemo(() => createVirtualData(originalData), [originalData]);
|
|
169
169
|
|
|
170
170
|
const activeIndex = useSharedValue(N_original > 0 ? N_original : 0);
|
|
171
171
|
const gestureTranslateX = useSharedValue(0);
|
|
172
|
-
const contextX = useSharedValue(0);
|
|
173
172
|
|
|
174
173
|
useEffect(() => {
|
|
175
174
|
activeIndex.value = N_original > 0 ? N_original : 0;
|
|
176
175
|
gestureTranslateX.value = 0;
|
|
177
176
|
}, [N_original, activeIndex, gestureTranslateX]);
|
|
178
177
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
const start = Math.max(0, center - VISIBLE_RANGE);
|
|
183
|
-
const end = Math.min(virtualData.length - 1, center + VISIBLE_RANGE);
|
|
184
|
-
|
|
185
|
-
return virtualData.slice(start, end + 1).map((item, sliceIndex) => ({
|
|
186
|
-
item,
|
|
187
|
-
originalIndex: start + sliceIndex
|
|
188
|
-
}));
|
|
189
|
-
});
|
|
190
|
-
|
|
191
|
-
useDerivedValue(() => {
|
|
178
|
+
const handleLoopReset = () => {
|
|
179
|
+
"worklet";
|
|
180
|
+
if (N_original === 0) return;
|
|
192
181
|
const currentValue = Math.round(activeIndex.value);
|
|
193
|
-
|
|
182
|
+
if (currentValue >= N_original * 2) {
|
|
183
|
+
activeIndex.value = currentValue - N_original;
|
|
184
|
+
} else if (currentValue < N_original) {
|
|
185
|
+
activeIndex.value = currentValue + N_original;
|
|
186
|
+
}
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
useDerivedValue(() => {
|
|
194
190
|
if (gestureTranslateX.value === 0) {
|
|
195
|
-
|
|
196
|
-
activeIndex.value = currentValue - N_original;
|
|
197
|
-
} else if (currentValue < N_original) {
|
|
198
|
-
activeIndex.value = currentValue + N_original;
|
|
199
|
-
}
|
|
191
|
+
handleLoopReset();
|
|
200
192
|
}
|
|
201
193
|
});
|
|
202
194
|
|
|
203
195
|
const panGesture = Gesture.Pan()
|
|
204
196
|
.activeOffsetX([-10, 10])
|
|
205
|
-
.onBegin(() => {
|
|
206
|
-
contextX.value = gestureTranslateX.value;
|
|
207
|
-
})
|
|
208
197
|
.onUpdate((event) => {
|
|
209
198
|
gestureTranslateX.value = event.translationX;
|
|
210
199
|
})
|
|
211
200
|
.onEnd((event) => {
|
|
212
201
|
if (virtualData.length === 0) return;
|
|
213
|
-
|
|
214
202
|
const threshold = cardWidth / 3;
|
|
215
|
-
let newTargetVirtualIndex = activeIndex.value;
|
|
216
|
-
|
|
203
|
+
let newTargetVirtualIndex = Math.round(activeIndex.value);
|
|
217
204
|
if (event.translationX < -threshold) {
|
|
218
|
-
newTargetVirtualIndex
|
|
205
|
+
newTargetVirtualIndex++;
|
|
219
206
|
} else if (event.translationX > threshold) {
|
|
220
|
-
newTargetVirtualIndex
|
|
207
|
+
newTargetVirtualIndex--;
|
|
221
208
|
}
|
|
222
|
-
|
|
223
|
-
newTargetVirtualIndex = Math.max(
|
|
224
|
-
0,
|
|
225
|
-
Math.min(newTargetVirtualIndex, virtualData.length - 1)
|
|
226
|
-
);
|
|
227
|
-
|
|
228
209
|
activeIndex.value = withSpring(newTargetVirtualIndex, SPRING_CONFIG);
|
|
229
210
|
gestureTranslateX.value = withSpring(0, SPRING_CONFIG);
|
|
230
|
-
contextX.value = 0;
|
|
231
211
|
});
|
|
232
212
|
|
|
233
213
|
const activeDotIndex = useDerivedValue(() => {
|
|
234
214
|
if (N_original === 0) return 0;
|
|
235
|
-
|
|
236
|
-
return ((currentVal % N_original) + N_original) % N_original;
|
|
215
|
+
return (Math.round(activeIndex.value) % N_original + N_original) % N_original;
|
|
237
216
|
});
|
|
238
217
|
|
|
239
|
-
if (virtualData.length === 0) {
|
|
240
|
-
return (
|
|
241
|
-
<View style={[styles.container, { height: cardHeight + 60 }]}>
|
|
242
|
-
<Text style={styles.emptyText}>No items to display</Text>
|
|
243
|
-
</View>
|
|
244
|
-
);
|
|
245
|
-
}
|
|
218
|
+
if (virtualData.length === 0) { /* ... */ }
|
|
246
219
|
|
|
247
220
|
return (
|
|
248
|
-
<View
|
|
221
|
+
<View
|
|
222
|
+
style={[
|
|
223
|
+
styles.container,
|
|
224
|
+
{ height: cardHeight + 60, backgroundColor: backgroundColor },
|
|
225
|
+
]}
|
|
226
|
+
>
|
|
249
227
|
<GestureDetector gesture={panGesture}>
|
|
250
228
|
<Animated.View style={[styles.cardContainer, { height: cardHeight }]}>
|
|
251
|
-
{/*
|
|
229
|
+
{/* We map over all data, but the logic inside CarouselCard handles visibility */}
|
|
252
230
|
{virtualData.map((item, index) => (
|
|
253
231
|
<CarouselCard
|
|
254
232
|
key={item.uniqueId}
|
|
@@ -264,25 +242,22 @@ const CarouselCardStack: React.FC<CarouselCardStackProps> = ({
|
|
|
264
242
|
</Animated.View>
|
|
265
243
|
</GestureDetector>
|
|
266
244
|
|
|
245
|
+
{/* Pagination dots remain the same */}
|
|
267
246
|
{N_original > 0 && (
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
return <Animated.View key={`dot-${i}`} style={dotStyle} />;
|
|
283
|
-
})}
|
|
284
|
-
</View>
|
|
285
|
-
)}
|
|
247
|
+
<View style={styles.paginationContainer}>
|
|
248
|
+
{originalData.map((_, i) => {
|
|
249
|
+
const isActiveDot = useDerivedValue(() => activeDotIndex.value === i);
|
|
250
|
+
const dotStyle = useAnimatedStyle(() => ({
|
|
251
|
+
width: withSpring(isActiveDot.value ? 24 : 8, SPRING_CONFIG),
|
|
252
|
+
height: 8,
|
|
253
|
+
borderRadius: 4,
|
|
254
|
+
backgroundColor: isActiveDot.value ? theme.primary : "#FFFFFF",
|
|
255
|
+
marginHorizontal: 4,
|
|
256
|
+
}));
|
|
257
|
+
return <Animated.View key={`dot-${i}`} style={dotStyle} />;
|
|
258
|
+
})}
|
|
259
|
+
</View>
|
|
260
|
+
)}
|
|
286
261
|
</View>
|
|
287
262
|
);
|
|
288
263
|
};
|
|
@@ -306,7 +281,6 @@ const styles = StyleSheet.create({
|
|
|
306
281
|
cardImage: {
|
|
307
282
|
width: "100%",
|
|
308
283
|
height: "100%",
|
|
309
|
-
resizeMode: "cover",
|
|
310
284
|
},
|
|
311
285
|
titleContainer: {
|
|
312
286
|
position: "absolute",
|