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

package/src/components/TabsComponent.tsx

@@ -0,0 +1,496 @@
+/**
+ * TabsComponent - Interactive tabs for React Native
+ * Uses element:{id}.currentIndex for state tracking (Superwall pattern)
+ * Full property support matching web schema for cross-platform consistency
+ * Phase 2 Enhanced: icon support, alignment, sizing, disabled state, animation duration, overflow
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  LayoutAnimation,
+  Platform,
+  UIManager,
+  ViewStyle,
+  TextStyle,
+  ScrollView,
+} from 'react-native';
+import type { PaywallComponent } from '../types';
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+// Icon mapping for React Native (using basic Unicode symbols as fallback)
+const ICON_MAP: Record<string, string> = {
+  home: '🏠',
+  star: '⭐',
+  settings: '⚙️',
+  person: '👤',
+  favorite: '❤️',
+  heart: '❤️',
+  search: '🔍',
+  check: '✓',
+  close: '✕',
+  add: '+',
+  remove: '-',
+  edit: '✏️',
+  delete: '🗑️',
+  share: '↗️',
+  download: '⬇️',
+  upload: '⬆️',
+  refresh: '🔄',
+  info: 'ℹ️',
+  help: '❓',
+  warning: '⚠️',
+  error: '❌',
+  lock: '🔒',
+  unlock: '🔓',
+  notification: '🔔',
+  email: '✉️',
+  phone: '📞',
+  location: '📍',
+  calendar: '📅',
+  time: '⏰',
+  camera: '📷',
+  photo: '🖼️',
+  video: '🎥',
+  music: '🎵',
+  play: '▶️',
+  pause: '⏸️',
+  stop: '⏹️',
+  crown: '👑',
+  premium: '👑',
+  diamond: '💎',
+  gift: '🎁',
+  cart: '🛒',
+  wallet: '💰',
+  rocket: '🚀',
+  trophy: '🏆',
+  medal: '🏅',
+  badge: '📛',
+  verified: '✅',
+  shield: '🛡️',
+  bolt: '⚡',
+  fire: '🔥',
+  sparkle: '✨',
+  magic: '🪄',
+};
+
+interface TabsComponentProps {
+  component: PaywallComponent;
+  /** Child components to render within the tabs (defaults to component.children) */
+  children?: PaywallComponent[];
+  renderChild: (child: PaywallComponent, index: number) => React.ReactNode;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  onTabChange?: (componentId: string, previousIndex: number, newIndex: number, tabLabel: string) => void;
+}
+
+export const TabsComponent: React.FC<TabsComponentProps> = ({
+  component,
+  renderChild,
+  stateManager,
+  isPreviewMode = false,
+  onTabChange,
+}) => {
+  const props = component.properties || {};
+  
+  // Core Properties
+  const tabCount = (props.tabCount as number) ?? 3;
+  const defaultTab = (props.defaultTab as number) ?? 0;
+  const animated = (props.animated as boolean) ?? true;
+  const variant = (props.variant as string) ?? 'pills';
+  
+  // Phase 2: New Properties
+  const tabAlignment = (props.tabAlignment as string) ?? 'stretch';
+  const tabSizing = (props.tabSizing as string) ?? 'equal';
+  const fixedTabWidth = props.fixedTabWidth as number | undefined;
+  const animationDuration = (props.animationDuration as number) ?? 200;
+  const overflowBehavior = (props.overflowBehavior as string) ?? 'scroll';
+  const tabIconPosition = (props.tabIconPosition as string) ?? 'left';
+  
+  // Styling Properties (matching web schema)
+  const activeTabColor = (props.activeTabColor as string) ?? '#FFFFFF';
+  const inactiveTabColor = (props.inactiveTabColor as string) ?? 'transparent';
+  const activeTextColor = (props.activeTextColor as string) ?? '#000000';
+  const inactiveTextColor = (props.inactiveTextColor as string) ?? '#666666';
+  const tabListBackgroundColor = (props.tabListBackgroundColor as string) ?? '#F5F5F5';
+  const tabFontSize = (props.tabFontSize as number) ?? 14;
+  const tabFontWeight = (props.tabFontWeight as string) ?? '600';
+  const tabBorderRadius = (props.tabBorderRadius as number) ?? 8;
+  const tabListBorderRadius = (props.tabListBorderRadius as number) ?? 10;
+  const tabGap = (props.tabGap as number) ?? 4;
+  const tabPaddingX = (props.tabPaddingX as number) ?? 16;
+  const tabPaddingY = (props.tabPaddingY as number) ?? 10;
+  
+  // Phase 2: Disabled state colors
+  const disabledTextColor = (props.disabledTextColor as string) ?? '#AAAAAA';
+  const disabledTabFill = (props.disabledTabFill as string) ?? '#F0F0F0';
+  
+  const [currentIndex, setCurrentIndex] = useState(defaultTab);
+  
+  // Resolve tab children by role (canonical pattern matching all other renderers)
+  const tabChildren = useMemo(() => {
+    return (component.children || [])
+      .filter(child => /^tab-\d+$/.test(child.role || ''))
+      .sort((a, b) => {
+        const aNum = parseInt(a.role?.replace('tab-', '') || '0');
+        const bNum = parseInt(b.role?.replace('tab-', '') || '0');
+        return aNum - bNum;
+      });
+  }, [component.children]);
+  
+  // Get tab label from child properties (canonical: label → text → name)
+  const getTabLabel = useCallback((index: number): string => {
+    const child = tabChildren[index];
+    if (!child) return `Tab ${index + 1}`;
+    return (child.properties?.label as string)
+      ?? (child.properties?.text as string)
+      ?? (child.name as string)
+      ?? `Tab ${index + 1}`;
+  }, [tabChildren]);
+  
+  // Get tab icon from child properties
+  const getTabIcon = useCallback((index: number): string | undefined => {
+    const child = tabChildren[index];
+    const iconName = child?.properties?.icon as string | undefined;
+    if (iconName && ICON_MAP[iconName.toLowerCase()]) {
+      return ICON_MAP[iconName.toLowerCase()];
+    }
+    return undefined;
+  }, [tabChildren]);
+  
+  // Check if tab is disabled from child properties
+  const isTabDisabled = useCallback((index: number): boolean => {
+    const child = tabChildren[index];
+    return (child?.properties?.disabled as boolean) ?? false;
+  }, [tabChildren]);
+  
+  // Parse children to find content panels - filter by content-panel-X role and sort
+  const contentPanels = useMemo(() => {
+    const children = component.children || [];
+    return children
+      .filter(child => /^content-panel-\d+$/.test(child.role || ''))
+      .sort((a, b) => {
+        const aNum = parseInt(a.role?.replace('content-panel-', '') || '0');
+        const bNum = parseInt(b.role?.replace('content-panel-', '') || '0');
+        return aNum - bNum;
+      });
+  }, [component.children]);
+  
+  // Update state manager
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+    }
+  }, [component.id, currentIndex, stateManager]);
+  
+  // Listen for external state changes
+  useEffect(() => {
+    if (!stateManager) return;
+    
+    const unsubscribe = stateManager.subscribeToState(
+      `element:${component.id}.currentIndex`,
+      (value: number) => {
+        if (typeof value === 'number' && value !== currentIndex) {
+          selectTab(value);
+        }
+      }
+    );
+    
+    return unsubscribe;
+  }, [component.id, currentIndex, stateManager]);
+  
+  const selectTab = useCallback((index: number) => {
+    if (index < 0 || index >= tabCount) return;
+    
+    // Phase 2: Check if tab is disabled
+    if (isTabDisabled(index)) return;
+    
+    const previousIndex = currentIndex;
+    const tabLabel = getTabLabel(index);
+    
+    if (animated) {
+      LayoutAnimation.configureNext({
+        duration: animationDuration,
+        update: { type: LayoutAnimation.Types.easeInEaseOut },
+      });
+    }
+    setCurrentIndex(index);
+    
+    // Phase 2: Fire tab change callback
+    onTabChange?.(component.id, previousIndex, index, tabLabel);
+  }, [animated, animationDuration, tabCount, currentIndex, isTabDisabled, getTabLabel, onTabChange, component.id]);
+  
+  // Content gap from containerLayout (matching web schema)
+  const contentGap = (component.containerLayout?.gap as number) ?? 12;
+  
+  // Phase 2: Get flex justification based on alignment
+  const getJustifyContent = (): ViewStyle['justifyContent'] => {
+    switch (tabAlignment) {
+      case 'start': return 'flex-start';
+      case 'center': return 'center';
+      case 'end': return 'flex-end';
+      case 'stretch':
+      default: return 'flex-start';
+    }
+  };
+  
+  // Variant-specific styles
+  const getTabListStyle = (): ViewStyle => {
+    const baseStyle: ViewStyle = {
+      backgroundColor: tabListBackgroundColor,
+      flexDirection: 'row',
+      padding: 4,
+      marginBottom: contentGap,
+      justifyContent: getJustifyContent(),
+    };
+    
+    switch (variant) {
+      case 'underline':
+        return {
+          ...baseStyle,
+          backgroundColor: 'transparent',
+          borderBottomWidth: 1,
+          borderBottomColor: '#e5e5e5',
+          padding: 0,
+        };
+      case 'boxed':
+        return {
+          ...baseStyle,
+          borderRadius: tabBorderRadius,
+          borderWidth: 1,
+          borderColor: '#e5e5e5',
+          padding: 0,
+        };
+      default: // pills
+        return {
+          ...baseStyle,
+          borderRadius: tabListBorderRadius,
+        };
+    }
+  };
+  
+  const getTabButtonStyle = (isActive: boolean, isDisabled: boolean): ViewStyle => {
+    // Phase 2: Determine width based on sizing mode
+    let widthStyle: ViewStyle = {};
+    if (tabSizing === 'equal' && tabAlignment === 'stretch') {
+      widthStyle = { flex: 1 };
+    } else if (tabSizing === 'fixed' && fixedTabWidth) {
+      widthStyle = { width: fixedTabWidth };
+    }
+    
+    // Phase 2: Determine background color
+    const bgColor = isDisabled
+      ? disabledTabFill
+      : (isActive ? activeTabColor : inactiveTabColor);
+    
+    const baseStyle: ViewStyle = {
+      ...widthStyle,
+      paddingVertical: tabPaddingY,
+      paddingHorizontal: tabPaddingX,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginHorizontal: tabGap / 2,
+      opacity: isDisabled ? 0.5 : 1,
+    };
+    
+    switch (variant) {
+      case 'underline':
+        return {
+          ...baseStyle,
+          marginHorizontal: 0,
+          borderBottomWidth: isActive ? 2 : 0,
+          borderBottomColor: isActive ? activeTextColor : 'transparent',
+        };
+      case 'boxed':
+        return {
+          ...baseStyle,
+          marginHorizontal: 0,
+          backgroundColor: bgColor,
+        };
+      default: // pills
+        return {
+          ...baseStyle,
+          backgroundColor: bgColor,
+          borderRadius: tabBorderRadius,
+        };
+    }
+  };
+  
+  const getTabTextStyle = (isActive: boolean, isDisabled: boolean): TextStyle => {
+    const textColor = isDisabled
+      ? disabledTextColor
+      : (isActive ? activeTextColor : inactiveTextColor);
+    
+    return {
+      fontSize: tabFontSize,
+      fontWeight: isActive ? (tabFontWeight as TextStyle['fontWeight']) : '500',
+      color: textColor,
+    };
+  };
+  
+  // Phase 2: Render tab content with icon
+  const renderTabContent = (index: number, isActive: boolean, isDisabled: boolean) => {
+    const label = getTabLabel(index);
+    const icon = getTabIcon(index);
+    const textStyle = getTabTextStyle(isActive, isDisabled);
+    
+    if (!icon || tabIconPosition === 'only') {
+      if (icon && tabIconPosition === 'only') {
+        return <Text style={[textStyle, { fontSize: tabFontSize + 4 }]}>{icon}</Text>;
+      }
+      return <Text style={textStyle}>{label}</Text>;
+    }
+    
+    const iconElement = <Text style={[textStyle, { fontSize: tabFontSize + 2, marginHorizontal: 4 }]}>{icon}</Text>;
+    const labelElement = <Text style={textStyle}>{label}</Text>;
+    
+    switch (tabIconPosition) {
+      case 'right':
+        return (
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {labelElement}
+            {iconElement}
+          </View>
+        );
+      case 'top':
+        return (
+          <View style={{ alignItems: 'center' }}>
+            {iconElement}
+            {labelElement}
+          </View>
+        );
+      case 'left':
+      default:
+        return (
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {iconElement}
+            {labelElement}
+          </View>
+        );
+    }
+  };
+  
+  // Render tab list
+  const renderTabList = () => {
+    const actualTabCount = tabChildren.length || tabCount;
+    const tabButtons = Array.from({ length: actualTabCount }, (_, index) => {
+      const isActive = index === currentIndex;
+      const disabled = isTabDisabled(index);
+      
+      return (
+        <React.Fragment key={index}>
+          <TouchableOpacity
+            style={getTabButtonStyle(isActive, disabled)}
+            onPress={() => selectTab(index)}
+            activeOpacity={disabled ? 1 : 0.7}
+            disabled={disabled}
+          >
+            {renderTabContent(index, isActive, disabled)}
+          </TouchableOpacity>
+          {variant === 'boxed' && index < actualTabCount - 1 && (
+            <View style={styles.boxedDivider} />
+          )}
+        </React.Fragment>
+      );
+    });
+    
+    const tabListStyle = getTabListStyle();
+    
+    // Phase 2: Handle overflow behavior
+    if (overflowBehavior === 'scroll') {
+      return (
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={tabListStyle}
+        >
+          {tabButtons}
+        </ScrollView>
+      );
+    }
+    
+    return (
+      <View style={tabListStyle}>
+        {tabButtons}
+      </View>
+    );
+  };
+  
+  // Render content panel - no fallback to first panel
+  const renderContentPanel = () => {
+    const panel = contentPanels[currentIndex];
+    
+    if (!panel) {
+      // Empty placeholder matching web style
+      return (
+        <View style={styles.emptyPlaceholder}>
+          <Text style={styles.emptyPlaceholderText}>
+            No content panel for Tab {currentIndex + 1}
+          </Text>
+        </View>
+      );
+    }
+    
+    return (
+      <View style={styles.contentPanel}>
+        {renderChild(panel, currentIndex)}
+      </View>
+    );
+  };
+  
+  if (!component.children?.length) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyText}>Add tabs to the component</Text>
+      </View>
+    );
+  }
+  
+  return (
+    <View style={styles.container}>
+      {renderTabList()}
+      {renderContentPanel()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentPanel: {
+    flex: 1,
+  },
+  boxedDivider: {
+    width: 1,
+    backgroundColor: '#e5e5e5',
+  },
+  emptyContainer: {
+    padding: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    color: '#999',
+    fontSize: 14,
+  },
+  emptyPlaceholder: {
+    minHeight: 100,
+    backgroundColor: 'rgba(128, 128, 128, 0.1)',
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyPlaceholderText: {
+    color: 'rgba(128, 128, 128, 0.6)',
+    fontSize: 14,
+  },
+});