overlapping-cards-scroll 0.1.7 → 0.1.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.
Files changed (7) hide show
  1. package/dist/index.cjs +5 -5
  2. package/dist/index.js +5 -5
  3. package/dist/react-native-web.cjs +5 -5
  4. package/dist/react-native-web.js +5 -5
  5. package/package.json +1 -1
  6. package/src/lib/OverlappingCardsScroll.tsx +5 -6
  7. package/src/rn/RNWebDemo.tsx +45 -0
package/dist/index.cjs CHANGED
@@ -210,6 +210,7 @@ function OverlappingCardsScroll(props) {
210
210
  }, [itemsProp]);
211
211
  const cardCount = cards.length;
212
212
  const containerRef = (0, import_react.useRef)(null);
213
+ const stageRef = (0, import_react.useRef)(null);
213
214
  const scrollRef = (0, import_react.useRef)(null);
214
215
  const touchStateRef = (0, import_react.useRef)(null);
215
216
  const snapTimeoutRef = (0, import_react.useRef)(null);
@@ -236,9 +237,9 @@ function OverlappingCardsScroll(props) {
236
237
  }, [clearFocusTransitionTimeout]);
237
238
  (0, import_react.useEffect)(() => {
238
239
  var _a;
239
- const containerElement = containerRef.current;
240
+ const stageElement = stageRef.current;
240
241
  const scrollElement = scrollRef.current;
241
- if (!containerElement || !scrollElement) {
242
+ if (!stageElement || !scrollElement) {
242
243
  return void 0;
243
244
  }
244
245
  const syncScroll = () => {
@@ -258,8 +259,8 @@ function OverlappingCardsScroll(props) {
258
259
  applyWidth(width);
259
260
  syncScroll();
260
261
  });
261
- resizeObserver.observe(containerElement);
262
- applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
262
+ resizeObserver.observe(stageElement);
263
+ applyWidth((_a = stageElement.getBoundingClientRect().width) != null ? _a : 0);
263
264
  syncScroll();
264
265
  scrollElement.addEventListener("scroll", syncScroll, { passive: true });
265
266
  return () => {
@@ -571,7 +572,6 @@ function OverlappingCardsScroll(props) {
571
572
  }
572
573
  touchStateRef.current = null;
573
574
  };
574
- const stageRef = (0, import_react.useRef)(null);
575
575
  (0, import_react.useEffect)(() => {
576
576
  const stageElement = stageRef.current;
577
577
  if (!stageElement) {
package/dist/index.js CHANGED
@@ -194,6 +194,7 @@ function OverlappingCardsScroll(props) {
194
194
  }, [itemsProp]);
195
195
  const cardCount = cards.length;
196
196
  const containerRef = useRef(null);
197
+ const stageRef = useRef(null);
197
198
  const scrollRef = useRef(null);
198
199
  const touchStateRef = useRef(null);
199
200
  const snapTimeoutRef = useRef(null);
@@ -220,9 +221,9 @@ function OverlappingCardsScroll(props) {
220
221
  }, [clearFocusTransitionTimeout]);
221
222
  useEffect(() => {
222
223
  var _a;
223
- const containerElement = containerRef.current;
224
+ const stageElement = stageRef.current;
224
225
  const scrollElement = scrollRef.current;
225
- if (!containerElement || !scrollElement) {
226
+ if (!stageElement || !scrollElement) {
226
227
  return void 0;
227
228
  }
228
229
  const syncScroll = () => {
@@ -242,8 +243,8 @@ function OverlappingCardsScroll(props) {
242
243
  applyWidth(width);
243
244
  syncScroll();
244
245
  });
245
- resizeObserver.observe(containerElement);
246
- applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
246
+ resizeObserver.observe(stageElement);
247
+ applyWidth((_a = stageElement.getBoundingClientRect().width) != null ? _a : 0);
247
248
  syncScroll();
248
249
  scrollElement.addEventListener("scroll", syncScroll, { passive: true });
249
250
  return () => {
@@ -555,7 +556,6 @@ function OverlappingCardsScroll(props) {
555
556
  }
556
557
  touchStateRef.current = null;
557
558
  };
558
- const stageRef = useRef(null);
559
559
  useEffect(() => {
560
560
  const stageElement = stageRef.current;
561
561
  if (!stageElement) {
package/dist/react-native-web.cjs CHANGED
@@ -211,6 +211,7 @@ function OverlappingCardsScroll(props) {
211
211
  }, [itemsProp]);
212
212
  const cardCount = cards.length;
213
213
  const containerRef = (0, import_react.useRef)(null);
214
+ const stageRef = (0, import_react.useRef)(null);
214
215
  const scrollRef = (0, import_react.useRef)(null);
215
216
  const touchStateRef = (0, import_react.useRef)(null);
216
217
  const snapTimeoutRef = (0, import_react.useRef)(null);
@@ -237,9 +238,9 @@ function OverlappingCardsScroll(props) {
237
238
  }, [clearFocusTransitionTimeout]);
238
239
  (0, import_react.useEffect)(() => {
239
240
  var _a;
240
- const containerElement = containerRef.current;
241
+ const stageElement = stageRef.current;
241
242
  const scrollElement = scrollRef.current;
242
- if (!containerElement || !scrollElement) {
243
+ if (!stageElement || !scrollElement) {
243
244
  return void 0;
244
245
  }
245
246
  const syncScroll = () => {
@@ -259,8 +260,8 @@ function OverlappingCardsScroll(props) {
259
260
  applyWidth(width);
260
261
  syncScroll();
261
262
  });
262
- resizeObserver.observe(containerElement);
263
- applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
263
+ resizeObserver.observe(stageElement);
264
+ applyWidth((_a = stageElement.getBoundingClientRect().width) != null ? _a : 0);
264
265
  syncScroll();
265
266
  scrollElement.addEventListener("scroll", syncScroll, { passive: true });
266
267
  return () => {
@@ -572,7 +573,6 @@ function OverlappingCardsScroll(props) {
572
573
  }
573
574
  touchStateRef.current = null;
574
575
  };
575
- const stageRef = (0, import_react.useRef)(null);
576
576
  (0, import_react.useEffect)(() => {
577
577
  const stageElement = stageRef.current;
578
578
  if (!stageElement) {
package/dist/react-native-web.js CHANGED
@@ -197,6 +197,7 @@ function OverlappingCardsScroll(props) {
197
197
  }, [itemsProp]);
198
198
  const cardCount = cards.length;
199
199
  const containerRef = useRef(null);
200
+ const stageRef = useRef(null);
200
201
  const scrollRef = useRef(null);
201
202
  const touchStateRef = useRef(null);
202
203
  const snapTimeoutRef = useRef(null);
@@ -223,9 +224,9 @@ function OverlappingCardsScroll(props) {
223
224
  }, [clearFocusTransitionTimeout]);
224
225
  useEffect(() => {
225
226
  var _a;
226
- const containerElement = containerRef.current;
227
+ const stageElement = stageRef.current;
227
228
  const scrollElement = scrollRef.current;
228
- if (!containerElement || !scrollElement) {
229
+ if (!stageElement || !scrollElement) {
229
230
  return void 0;
230
231
  }
231
232
  const syncScroll = () => {
@@ -245,8 +246,8 @@ function OverlappingCardsScroll(props) {
245
246
  applyWidth(width);
246
247
  syncScroll();
247
248
  });
248
- resizeObserver.observe(containerElement);
249
- applyWidth((_a = containerElement.getBoundingClientRect().width) != null ? _a : 0);
249
+ resizeObserver.observe(stageElement);
250
+ applyWidth((_a = stageElement.getBoundingClientRect().width) != null ? _a : 0);
250
251
  syncScroll();
251
252
  scrollElement.addEventListener("scroll", syncScroll, { passive: true });
252
253
  return () => {
@@ -558,7 +559,6 @@ function OverlappingCardsScroll(props) {
558
559
  }
559
560
  touchStateRef.current = null;
560
561
  };
561
- const stageRef = useRef(null);
562
562
  useEffect(() => {
563
563
  const stageElement = stageRef.current;
564
564
  if (!stageElement) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "overlapping-cards-scroll",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "Overlapping cards scroll component for React, React Native, and React Native Web.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/lib/OverlappingCardsScroll.tsx CHANGED
@@ -361,6 +361,7 @@ export function OverlappingCardsScroll(props: OverlappingCardsScrollProps) {
361
361
  const cardCount = cards.length;
362
362
 
363
363
  const containerRef = useRef(null);
364
+ const stageRef = useRef(null);
364
365
  const scrollRef = useRef(null);
365
366
  const touchStateRef = useRef(null);
366
367
  const snapTimeoutRef = useRef(null);
@@ -391,9 +392,9 @@ export function OverlappingCardsScroll(props: OverlappingCardsScrollProps) {
391
392
  }, [clearFocusTransitionTimeout]);
392
393
 
393
394
  useEffect(() => {
394
- const containerElement = containerRef.current;
395
+ const stageElement = stageRef.current;
395
396
  const scrollElement = scrollRef.current;
396
- if (!containerElement || !scrollElement) {
397
+ if (!stageElement || !scrollElement) {
397
398
  return undefined;
398
399
  }
399
400
 
@@ -417,8 +418,8 @@ export function OverlappingCardsScroll(props: OverlappingCardsScrollProps) {
417
418
  syncScroll();
418
419
  });
419
420
 
420
- resizeObserver.observe(containerElement);
421
- applyWidth(containerElement.getBoundingClientRect().width ?? 0);
421
+ resizeObserver.observe(stageElement);
422
+ applyWidth(stageElement.getBoundingClientRect().width ?? 0);
422
423
  syncScroll();
423
424
 
424
425
  scrollElement.addEventListener("scroll", syncScroll, { passive: true });
@@ -803,8 +804,6 @@ export function OverlappingCardsScroll(props: OverlappingCardsScrollProps) {
803
804
  touchStateRef.current = null;
804
805
  };
805
806
 
806
- const stageRef = useRef(null);
807
-
808
807
  useEffect(() => {
809
808
  const stageElement = stageRef.current;
810
809
  if (!stageElement) {
package/src/rn/RNWebDemo.tsx CHANGED
@@ -147,6 +147,34 @@ export function RNWebDemo() {
147
147
  jsx: <RNCard {...card} />,
148
148
  }))}
149
149
  />
150
+
151
+ <View style={styles.divider} />
152
+
153
+ <Text style={styles.sectionTitle}>Wide Cards with Left Tabs</Text>
154
+ <Text style={styles.sectionDesc}>
155
+ cardWidthRatio=0.6, cardHeight=520, basePeek=72, minPeek=18,
156
+ tabsPosition="left-top"
157
+ </Text>
158
+ <OverlappingCardsScrollRN
159
+ cardHeight={520}
160
+ cardWidthRatio={0.6}
161
+ basePeek={72}
162
+ minPeek={18}
163
+ showPageDots
164
+ pageDotsPosition="below"
165
+ pageDotsOffset={10}
166
+ showTabs
167
+ tabsPosition="left-top"
168
+ tabsOffset={8}
169
+ tabsComponent={RNWebTab}
170
+ tabsContainerComponent={RNWebTabsContainer}
171
+ cardContainerStyle={styles.cardContainer}
172
+ items={RN_DEMO_CARDS.map((card) => ({
173
+ id: `wide-${card.id}`,
174
+ name: card.title,
175
+ jsx: <RNCard {...card} />,
176
+ }))}
177
+ />
150
178
  </View>
151
179
  );
152
180
  }
@@ -161,6 +189,23 @@ const styles = StyleSheet.create({
161
189
  fontWeight: "600",
162
190
  marginBottom: 10,
163
191
  },
192
+ divider: {
193
+ height: 1,
194
+ backgroundColor: "rgba(31, 70, 102, 0.12)",
195
+ marginTop: 36,
196
+ marginBottom: 24,
197
+ },
198
+ sectionTitle: {
199
+ color: "#173047",
200
+ fontSize: 18,
201
+ fontWeight: "700",
202
+ marginBottom: 4,
203
+ },
204
+ sectionDesc: {
205
+ color: "#4a6b84",
206
+ fontSize: 14,
207
+ marginBottom: 12,
208
+ },
164
209
  tabsContainer: {
165
210
  flexDirection: "row",
166
211
  justifyContent: "center",