react-native-lumen 1.0.1 → 1.1.0

package/src/components/TourTooltip.tsx

@@ -13,11 +13,74 @@ import Animated, {
   Extrapolation,
 } from 'react-native-reanimated';
 import { useTour } from '../hooks/useTour';
-import type { CardProps, InternalTourContextType } from '../types';
+import type {
+  CardProps,
+  InternalTourContextType,
+  TooltipStyles,
+} from '../types';
 import { DEFAULT_LABELS } from '../constants/defaults';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
+const getDynamicStyles = (tooltipStyles?: TooltipStyles) => {
+  const defaultStyles = {
+    backgroundColor: tooltipStyles?.backgroundColor || 'white',
+    borderRadius: tooltipStyles?.borderRadius || 12,
+    titleColor: tooltipStyles?.titleColor || '#000',
+    descriptionColor: tooltipStyles?.descriptionColor || '#444',
+    primaryButtonColor: tooltipStyles?.primaryButtonColor || '#007AFF',
+    primaryButtonTextColor: tooltipStyles?.primaryButtonTextColor || '#fff',
+    primaryButtonBorderRadius: tooltipStyles?.primaryButtonBorderRadius || 25,
+    skipButtonTextColor: tooltipStyles?.skipButtonTextColor || '#666',
+  };
+
+  return StyleSheet.create({
+    cardStyle: {
+      backgroundColor: defaultStyles.backgroundColor,
+      borderRadius: defaultStyles.borderRadius,
+      padding: 20,
+      minHeight: 120,
+      ...(tooltipStyles?.containerStyle || {}),
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: defaultStyles.titleColor,
+      flex: 1,
+      ...(tooltipStyles?.titleStyle || {}),
+    },
+    description: {
+      fontSize: 15,
+      color: defaultStyles.descriptionColor,
+      marginBottom: 20,
+      lineHeight: 22,
+      ...(tooltipStyles?.descriptionStyle || {}),
+    },
+    buttonPrimary: {
+      backgroundColor: defaultStyles.primaryButtonColor,
+      paddingVertical: 10,
+      paddingHorizontal: 20,
+      borderRadius: defaultStyles.primaryButtonBorderRadius,
+      ...(tooltipStyles?.primaryButtonStyle || {}),
+    },
+    primaryButtonText: {
+      color: defaultStyles.primaryButtonTextColor,
+      fontWeight: 'bold',
+      fontSize: 14,
+      ...(tooltipStyles?.primaryButtonTextStyle || {}),
+    },
+    skipText: {
+      color: defaultStyles.skipButtonTextColor,
+      fontWeight: '600',
+      ...(tooltipStyles?.skipButtonTextStyle || {}),
+    },
+    buttonText: {
+      padding: 8,
+      ...(tooltipStyles?.skipButtonStyle || {}),
+    },
+  });
+};
+
 export const TourTooltip = memo(() => {
   const {
     targetX,
@@ -31,6 +94,7 @@ export const TourTooltip = memo(() => {
     stop,
     opacity,
     config,
+    orderedStepKeys,
   } = useTour() as InternalTourContextType;
 
   const currentStepData = currentStep ? steps[currentStep] : null;
@@ -38,15 +102,13 @@ export const TourTooltip = memo(() => {
   const tooltipHeight = useSharedValue(150);
   const [tooltipWidth] = useState(280);
 
-  const orderedSteps = useMemo(() => {
-    const keys = Object.keys(steps);
-    if (keys.length > 0) {
-      return keys.sort(
-        (a, b) => (steps[a]?.order ?? 0) - (steps[b]?.order ?? 0)
-      );
-    }
-    return keys;
-  }, [steps]);
+  const dynamicStyles = useMemo(
+    () => getDynamicStyles(config?.tooltipStyles),
+    [config?.tooltipStyles]
+  );
+
+  // Use orderedStepKeys from context (consistent with TourProvider's ordering)
+  const orderedSteps = orderedStepKeys;
 
   const currentIndex = currentStep ? orderedSteps.indexOf(currentStep) : -1;
   const totalSteps = orderedSteps.length;
@@ -93,8 +155,7 @@ export const TourTooltip = memo(() => {
       width: tooltipWidth,
       left: clampedLeft,
       opacity: activeOpacity,
-      // Add explicit background here for Reanimated to treat it as a solid block layer
-      backgroundColor: 'white',
+      backgroundColor: config?.tooltipStyles?.backgroundColor || 'white',
       transform: [{ translateY: interpolate(activeOpacity, [0, 1], [10, 0]) }],
     };
 
@@ -120,19 +181,41 @@ export const TourTooltip = memo(() => {
     }
   };
 
-  // Custom Render
+  // Build card props for custom renders
+  const cardProps: CardProps = {
+    step: currentStepData,
+    currentStepIndex: currentIndex,
+    totalSteps,
+    next,
+    prev,
+    stop,
+    isFirst,
+    isLast,
+    labels: config?.labels,
+    required: currentStepData.required,
+    completed: currentStepData.completed,
+  };
+
+  // Priority: Per-step custom card > Global custom card > Default card
+  // 1. Per-step custom render (highest priority)
+  if (currentStepData.renderCustomCard) {
+    return (
+      <AnimatedView
+        style={[
+          styles.container,
+          tooltipStyle,
+          // Reset styles for custom render so the user has full control
+          styles.resetStyle,
+        ]}
+        onLayout={handleTooltipLayout}
+      >
+        {currentStepData.renderCustomCard(cardProps)}
+      </AnimatedView>
+    );
+  }
+
+  // 2. Global custom render
   if (config?.renderCard) {
-    const cardProps: CardProps = {
-      step: currentStepData,
-      currentStepIndex: currentIndex,
-      totalSteps,
-      next,
-      prev,
-      stop,
-      isFirst,
-      isLast,
-      labels: config.labels,
-    };
     return (
       <AnimatedView
         style={[
@@ -148,35 +231,55 @@ export const TourTooltip = memo(() => {
     );
   }
 
-  // Default Render
+  // 3. Default Render
   const labels = { ...DEFAULT_LABELS, ...config?.labels };
   const labelNext = isLast ? labels.finish : labels.next;
   const labelSkip = labels.skip;
 
+  const isRequired = currentStepData.required === true;
+  const isNextDisabled = currentStepData.completed === false;
+
   return (
     <AnimatedView
-      // Combined styles: Container (Shadows) + CardStyle (White BG) + TooltipStyle (Position/Opacity)
-      style={[styles.container, styles.cardStyle, tooltipStyle]}
+      style={[styles.container, dynamicStyles.cardStyle, tooltipStyle]}
       onLayout={handleTooltipLayout}
     >
       <View style={styles.header}>
-        <Text style={styles.title}>{currentStepData.name || 'Step'}</Text>
+        <Text style={dynamicStyles.title}>
+          {currentStepData.name || 'Step'}
+        </Text>
         <Text style={styles.stepIndicator}>
           {currentIndex + 1} / {totalSteps}
         </Text>
       </View>
-      <Text style={styles.description}>{currentStepData.description}</Text>
+      <Text style={dynamicStyles.description}>
+        {currentStepData.description}
+      </Text>
 
       <View style={styles.footer}>
-        {!isLast && (
-          <TouchableOpacity onPress={stop} style={styles.buttonText}>
-            <Text style={styles.skipText}>{labelSkip}</Text>
+        {!isLast && !isRequired && (
+          <TouchableOpacity onPress={stop} style={dynamicStyles.buttonText}>
+            <Text style={dynamicStyles.skipText}>{labelSkip}</Text>
           </TouchableOpacity>
         )}
-        {isLast && <View style={styles.spacer} />}
+        {(isLast || isRequired) && <View style={styles.spacer} />}
 
-        <TouchableOpacity onPress={next} style={styles.buttonPrimary}>
-          <Text style={styles.primaryButtonText}>{labelNext}</Text>
+        <TouchableOpacity
+          onPress={isNextDisabled ? undefined : next}
+          disabled={isNextDisabled}
+          style={[
+            dynamicStyles.buttonPrimary,
+            isNextDisabled && styles.disabledButton,
+          ]}
+        >
+          <Text
+            style={[
+              dynamicStyles.primaryButtonText,
+              isNextDisabled && styles.disabledButtonText,
+            ]}
+          >
+            {labelNext}
+          </Text>
         </TouchableOpacity>
       </View>
     </AnimatedView>
@@ -193,12 +296,6 @@ const styles = StyleSheet.create({
     elevation: 8,
     zIndex: 999,
   },
-  cardStyle: {
-    backgroundColor: 'white', // Ensure this is solid white
-    borderRadius: 12,
-    padding: 20,
-    minHeight: 120,
-  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -208,41 +305,11 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: '#999',
   },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#000',
-    flex: 1,
-  },
-  description: {
-    fontSize: 15,
-    color: '#444',
-    marginBottom: 20,
-    lineHeight: 22,
-  },
   footer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  buttonText: {
-    padding: 8,
-  },
-  skipText: {
-    color: '#666',
-    fontWeight: '600',
-  },
-  buttonPrimary: {
-    backgroundColor: '#007AFF',
-    paddingVertical: 10,
-    paddingHorizontal: 20,
-    borderRadius: 25,
-  },
-  primaryButtonText: {
-    color: '#fff',
-    fontWeight: 'bold',
-    fontSize: 14,
-  },
   resetStyle: {
     backgroundColor: 'transparent',
     shadowOpacity: 0,
@@ -253,4 +320,10 @@ const styles = StyleSheet.create({
   spacer: {
     width: 10,
   },
+  disabledButton: {
+    opacity: 0.4,
+  },
+  disabledButtonText: {
+    opacity: 0.7,
+  },
 });