@billdog.io/react-native 1.0.0-beta.2

package/src/components/CarouselComponent.tsx

@@ -0,0 +1,615 @@
+/**
+ * Native React Native Carousel with swipe, pagination, and axis support
+ * Supports horizontal, vertical, and layered modes
+ */
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  ViewStyle,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  Text,
+  Pressable,
+} from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+import { ComponentRenderer } from '../ComponentRenderer';
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+type CarouselAxis = 'horizontal' | 'vertical' | 'layered';
+
+interface StateManager {
+  setState: (key: string, value: any) => void;
+  getState: (key: string) => any;
+  subscribe: (key: string, callback: (value: any) => void) => () => void;
+}
+
+interface CarouselComponentProps {
+  component: PaywallComponent;
+  configuration: PaywallConfiguration;
+  style?: ViewStyle;
+  onButtonPress?: (componentId: string, action: string) => void;
+  onPageChange?: (page: number) => void;
+  stateManager?: StateManager;
+  renderChild?: (child: PaywallComponent) => React.ReactNode;
+}
+
+export const CarouselComponent: React.FC<CarouselComponentProps> = ({
+  component,
+  configuration,
+  style,
+  onButtonPress,
+  onPageChange,
+  stateManager,
+  renderChild,
+}) => {
+  const props = component.properties as Record<string, any> || {};
+  const containerLayout = (component as any).containerLayout;
+  
+  // Properties
+  const showPagination = props.showPagination !== false;
+  const showArrows = props.showArrows === true;
+  const loop = props.loop === true;
+  const dragEnabled = props.dragEnabled !== false;
+  const animated = props.animated !== false;
+  const defaultIndex = props.defaultIndex ?? 0;
+  const paginationColor = props.paginationColor || '#007AFF';
+  const paginationInactiveColor = props.paginationInactiveColor || '#CCCCCC';
+  
+  // Slide display settings
+  const slideDisplay = props.slideDisplay || 'full'; // 'full' | 'peek'
+  const peekAmount = props.peekAmount ?? 15; // percentage 5-40
+  
+  // Transition settings (new)
+  const transition = props.transition || 'scroll'; // 'scroll' | 'fade' | 'slide' | 'push' | 'none'
+  const transitionDuration = props.transitionDuration ?? 300; // milliseconds
+  const keyboardEnabled = props.keyboardEnabled !== false; // keyboard navigation
+  
+  // Auto scroll settings
+  const autoScrollEnabled = props.autoScrollEnabled === true;
+  const autoScrollInterval = props.autoScrollInterval ?? 3000;
+  const autoScrollDirection = props.autoScrollDirection || 'forward';
+  const pauseOnTouch = props.pauseOnHover !== false; // pauseOnHover maps to touch on mobile
+  
+  // Axis support: horizontal (default), vertical, or layered
+  const axis: CarouselAxis = containerLayout?.axis || props.axis || 'horizontal';
+  
+  const children = component.children || [];
+  const itemCount = children.length;
+  
+  const [currentIndex, setCurrentIndex] = useState(
+    Math.min(defaultIndex, Math.max(0, itemCount - 1))
+  );
+  const [containerWidth, setContainerWidth] = useState(Dimensions.get('window').width);
+  const [containerHeight, setContainerHeight] = useState(200);
+  const scrollViewRef = useRef<ScrollView>(null);
+  const isInitialized = useRef(false);
+  const isDragging = useRef(false);
+  const autoScrollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  
+  // Calculate slide width for peek mode
+  const slideWidth = slideDisplay === 'peek' 
+    ? containerWidth * (1 - peekAmount / 100) 
+    : containerWidth;
+  
+  // Initialize scroll position on mount
+  useEffect(() => {
+    if (scrollViewRef.current && !isInitialized.current && axis !== 'layered') {
+      isInitialized.current = true;
+      const offset = axis === 'vertical' 
+        ? { x: 0, y: currentIndex * containerHeight }
+        : { x: currentIndex * slideWidth, y: 0 };
+      
+      setTimeout(() => {
+        scrollViewRef.current?.scrollTo({ ...offset, animated: false });
+      }, 100);
+    }
+  }, [containerWidth, containerHeight, currentIndex, axis, slideWidth]);
+  
+  // Auto scroll effect
+  useEffect(() => {
+    if (!autoScrollEnabled || itemCount <= 1) {
+      return;
+    }
+    
+    const startAutoScroll = () => {
+      if (autoScrollTimerRef.current) {
+        clearInterval(autoScrollTimerRef.current);
+      }
+      
+      autoScrollTimerRef.current = setInterval(() => {
+        if (isDragging.current && pauseOnTouch) {
+          return;
+        }
+        
+        setCurrentIndex((prevIndex) => {
+          let nextIndex: number;
+          if (autoScrollDirection === 'reverse') {
+            nextIndex = prevIndex - 1;
+            if (nextIndex < 0) {
+              nextIndex = loop ? itemCount - 1 : 0;
+            }
+          } else {
+            nextIndex = prevIndex + 1;
+            if (nextIndex >= itemCount) {
+              nextIndex = loop ? 0 : itemCount - 1;
+            }
+          }
+          return nextIndex;
+        });
+      }, autoScrollInterval);
+    };
+    
+    startAutoScroll();
+    
+    return () => {
+      if (autoScrollTimerRef.current) {
+        clearInterval(autoScrollTimerRef.current);
+      }
+    };
+  }, [autoScrollEnabled, autoScrollInterval, autoScrollDirection, loop, itemCount, pauseOnTouch]);
+  
+  // Update state manager when index changes (SDK parity)
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.setState(`element:${component.id}.currentIndex`, currentIndex);
+      stateManager.setState(`element:${component.id}.totalPages`, itemCount);
+    }
+  }, [stateManager, component.id, currentIndex, itemCount]);
+  
+  // Create custom LayoutAnimation based on transition type and duration
+  const getTransitionAnimation = useCallback(() => {
+    if (transition === 'none' || !animated) {
+      return null;
+    }
+    
+    const duration = transitionDuration;
+    
+    switch (transition) {
+      case 'fade':
+        return LayoutAnimation.create(
+          duration,
+          LayoutAnimation.Types.easeInEaseOut,
+          LayoutAnimation.Properties.opacity
+        );
+      case 'slide':
+      case 'push':
+        return LayoutAnimation.create(
+          duration,
+          LayoutAnimation.Types.easeInEaseOut,
+          LayoutAnimation.Properties.scaleXY
+        );
+      case 'scroll':
+      default:
+        return LayoutAnimation.create(
+          duration,
+          LayoutAnimation.Types.easeInEaseOut,
+          LayoutAnimation.Properties.opacity
+        );
+    }
+  }, [transition, transitionDuration, animated]);
+  
+  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const offset = axis === 'vertical' 
+      ? event.nativeEvent.contentOffset.y
+      : event.nativeEvent.contentOffset.x;
+    const size = axis === 'vertical' ? containerHeight : slideWidth;
+    const newIndex = Math.round(offset / size);
+    
+    if (newIndex !== currentIndex && newIndex >= 0 && newIndex < itemCount) {
+      const transitionAnim = getTransitionAnimation();
+      if (transitionAnim) {
+        LayoutAnimation.configureNext(transitionAnim);
+      }
+      setCurrentIndex(newIndex);
+      onPageChange?.(newIndex);
+      onButtonPress?.(component.id, `page_changed:${newIndex}`);
+    }
+  }, [axis, slideWidth, containerHeight, currentIndex, itemCount, onPageChange, onButtonPress, component.id, getTransitionAnimation]);
+  
+  const handleScrollBeginDrag = useCallback(() => {
+    isDragging.current = true;
+  }, []);
+  
+  const handleScrollEndDrag = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  
+  const scrollToIndex = useCallback((index: number) => {
+    let targetIndex = index;
+    
+    if (loop) {
+      if (index < 0) {
+        targetIndex = itemCount - 1;
+      } else if (index >= itemCount) {
+        targetIndex = 0;
+      }
+    } else {
+      targetIndex = Math.max(0, Math.min(itemCount - 1, index));
+    }
+    
+    if (axis === 'layered') {
+      // For layered, just update the index with transition animation
+      const transitionAnim = getTransitionAnimation();
+      if (transitionAnim) {
+        LayoutAnimation.configureNext(transitionAnim);
+      }
+      setCurrentIndex(targetIndex);
+    } else {
+      const offset = axis === 'vertical'
+        ? { x: 0, y: targetIndex * containerHeight }
+        : { x: targetIndex * slideWidth, y: 0 };
+      
+      // Use animated based on transition type
+      const shouldAnimate = transition !== 'none' && animated;
+      scrollViewRef.current?.scrollTo({
+        ...offset,
+        animated: shouldAnimate,
+      });
+    }
+    
+    onPageChange?.(targetIndex);
+    onButtonPress?.(component.id, `page_changed:${targetIndex}`);
+  }, [loop, itemCount, axis, slideWidth, containerHeight, animated, transition, onPageChange, onButtonPress, component.id, getTransitionAnimation]);
+  
+  // Listen for external state changes via state manager (placed after scrollToIndex)
+  useEffect(() => {
+    if (!stateManager) return;
+    
+    const unsubscribe = stateManager.subscribe(`element:${component.id}.currentIndex`, (value: number) => {
+      if (typeof value === 'number' && value !== currentIndex && value >= 0 && value < itemCount) {
+        scrollToIndex(value);
+      }
+    });
+    
+    return unsubscribe;
+  }, [stateManager, component.id, currentIndex, itemCount, scrollToIndex]);
+
+  const goToPrevious = useCallback(() => {
+    scrollToIndex(currentIndex - 1);
+  }, [currentIndex, scrollToIndex]);
+  
+  const goToNext = useCallback(() => {
+    scrollToIndex(currentIndex + 1);
+  }, [currentIndex, scrollToIndex]);
+  
+  // Keyboard navigation for web platform
+  const handleKeyDown = useCallback((event: any) => {
+    if (!keyboardEnabled || itemCount <= 1) return;
+    
+    const key = event.nativeEvent?.key || event.key;
+    const isVertical = axis === 'vertical';
+    
+    if (isVertical) {
+      if (key === 'ArrowUp') {
+        event.preventDefault?.();
+        goToPrevious();
+      } else if (key === 'ArrowDown') {
+        event.preventDefault?.();
+        goToNext();
+      }
+    } else {
+      if (key === 'ArrowLeft') {
+        event.preventDefault?.();
+        goToPrevious();
+      } else if (key === 'ArrowRight') {
+        event.preventDefault?.();
+        goToNext();
+      }
+    }
+  }, [keyboardEnabled, itemCount, axis, goToPrevious, goToNext]);
+  
+  // Empty placeholder
+  if (itemCount === 0) {
+    return (
+      <View style={[styles.emptyContainer, style]}>
+        <Text style={styles.emptyText}>Add slides to the carousel</Text>
+      </View>
+    );
+  }
+  
+  const isVertical = axis === 'vertical';
+  const isLayered = axis === 'layered';
+  
+  // Render layered carousel
+  if (isLayered) {
+    // Web keyboard props
+    const webKeyboardProps = Platform.OS === 'web' && keyboardEnabled ? {
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      style: { outline: 'none' },
+    } : {};
+    
+    return (
+      <Pressable
+        style={[styles.container, style]}
+        onLayout={(e) => {
+          setContainerWidth(e.nativeEvent.layout.width);
+          setContainerHeight(e.nativeEvent.layout.height);
+        }}
+        {...webKeyboardProps as any}
+      >
+        <View style={styles.layeredContainer}>
+          {children.map((child, index) => (
+            <View
+              key={child.id}
+              style={[
+                styles.layeredItem,
+                { opacity: index === currentIndex ? 1 : 0 },
+              ]}
+            >
+              {renderChild ? renderChild(child) : (
+                <ComponentRenderer
+                  component={child}
+                  configuration={configuration}
+                  onButtonPress={onButtonPress}
+                  stateManager={stateManager}
+                />
+              )}
+            </View>
+          ))}
+        </View>
+        
+        {showPagination && itemCount > 1 && (
+          <View style={styles.pagination}>
+            {children.map((_, index) => (
+              <TouchableOpacity key={index} onPress={() => scrollToIndex(index)}>
+                <View
+                  style={[
+                    styles.dot,
+                    {
+                      backgroundColor: index === currentIndex ? paginationColor : paginationInactiveColor,
+                      transform: [{ scale: index === currentIndex ? 1.2 : 1 }],
+                    },
+                  ]}
+                />
+              </TouchableOpacity>
+            ))}
+          </View>
+        )}
+      </Pressable>
+    );
+  }
+  
+  // Web keyboard props for horizontal/vertical carousels
+  const webKeyboardProps = Platform.OS === 'web' && keyboardEnabled ? {
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    style: { outline: 'none' },
+  } : {};
+  
+  return (
+    <Pressable
+      style={[styles.container, style]}
+      onLayout={(e) => {
+        setContainerWidth(e.nativeEvent.layout.width);
+        setContainerHeight(e.nativeEvent.layout.height);
+      }}
+      {...webKeyboardProps as any}
+    >
+      {/* Carousel content */}
+      <View style={styles.carouselContainer}>
+        <ScrollView
+          ref={scrollViewRef}
+          horizontal={!isVertical}
+          pagingEnabled={slideDisplay !== 'peek'}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          onMomentumScrollEnd={handleScroll}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onScrollEndDrag={handleScrollEndDrag}
+          scrollEventThrottle={16}
+          decelerationRate="fast"
+          bounces={false}
+          scrollEnabled={dragEnabled}
+          snapToInterval={slideDisplay === 'peek' ? slideWidth : undefined}
+          snapToAlignment={slideDisplay === 'peek' ? 'start' : undefined}
+        >
+          {children.map((child) => (
+            <View 
+              key={child.id} 
+              style={isVertical 
+                ? { height: containerHeight, width: containerWidth } 
+                : { width: slideWidth }
+              }
+            >
+              {renderChild ? renderChild(child) : (
+                <ComponentRenderer
+                  component={child}
+                  configuration={configuration}
+                  onButtonPress={onButtonPress}
+                  stateManager={stateManager}
+                />
+              )}
+            </View>
+          ))}
+        </ScrollView>
+        
+        {/* Navigation arrows */}
+        {showArrows && itemCount > 1 && (
+          <>
+            <TouchableOpacity
+              style={[
+                styles.arrow,
+                isVertical ? styles.topArrow : styles.leftArrow,
+              ]}
+              onPress={goToPrevious}
+              disabled={!loop && currentIndex === 0}
+            >
+              <View style={[
+                styles.arrowButton,
+                { opacity: (!loop && currentIndex === 0) ? 0.3 : 1 }
+              ]}>
+                <View style={[
+                  styles.arrowIcon, 
+                  isVertical ? styles.upArrowIcon : styles.leftArrowIcon
+                ]} />
+              </View>
+            </TouchableOpacity>
+            
+            <TouchableOpacity
+              style={[
+                styles.arrow,
+                isVertical ? styles.bottomArrow : styles.rightArrow,
+              ]}
+              onPress={goToNext}
+              disabled={!loop && currentIndex === itemCount - 1}
+            >
+              <View style={[
+                styles.arrowButton,
+                { opacity: (!loop && currentIndex === itemCount - 1) ? 0.3 : 1 }
+              ]}>
+                <View style={[
+                  styles.arrowIcon,
+                  isVertical ? styles.downArrowIcon : styles.rightArrowIcon
+                ]} />
+              </View>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+      
+      {/* Pagination dots */}
+      {showPagination && itemCount > 1 && (
+        <View style={[
+          styles.pagination,
+          isVertical && styles.verticalPagination,
+        ]}>
+          {children.map((_, index) => (
+            <TouchableOpacity
+              key={index}
+              onPress={() => scrollToIndex(index)}
+            >
+              <View
+                style={[
+                  styles.dot,
+                  {
+                    backgroundColor: index === currentIndex 
+                      ? paginationColor 
+                      : paginationInactiveColor,
+                    transform: [{ scale: index === currentIndex ? 1.2 : 1 }],
+                  },
+                ]}
+              />
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  carouselContainer: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  emptyContainer: {
+    height: 100,
+    backgroundColor: 'rgba(128, 128, 128, 0.1)',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: 'rgba(128, 128, 128, 0.3)',
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    color: '#888',
+    fontSize: 12,
+  },
+  layeredContainer: {
+    position: 'relative',
+  },
+  layeredItem: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  pagination: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 12,
+    gap: 8,
+  },
+  verticalPagination: {
+    position: 'absolute',
+    right: 8,
+    top: '50%',
+    flexDirection: 'column',
+    paddingVertical: 0,
+    paddingHorizontal: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  arrow: {
+    position: 'absolute',
+    zIndex: 10,
+  },
+  leftArrow: {
+    left: 8,
+    top: '50%',
+    marginTop: -20,
+  },
+  rightArrow: {
+    right: 8,
+    top: '50%',
+    marginTop: -20,
+  },
+  topArrow: {
+    top: 8,
+    left: '50%',
+    marginLeft: -20,
+  },
+  bottomArrow: {
+    bottom: 8,
+    left: '50%',
+    marginLeft: -20,
+  },
+  arrowButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowIcon: {
+    width: 12,
+    height: 12,
+    borderTopWidth: 2,
+    borderRightWidth: 2,
+    borderColor: '#FFFFFF',
+  },
+  leftArrowIcon: {
+    transform: [{ rotate: '-135deg' }, { translateX: 2 }],
+  },
+  rightArrowIcon: {
+    transform: [{ rotate: '45deg' }, { translateX: -2 }],
+  },
+  upArrowIcon: {
+    transform: [{ rotate: '-45deg' }, { translateY: 2 }],
+  },
+  downArrowIcon: {
+    transform: [{ rotate: '135deg' }, { translateY: -2 }],
+  },
+});