react-native-lumen 1.0.1 → 1.1.1

package/lib/module/components/TourOverlay.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
 import { useTour } from "../hooks/useTour.js";
+import { DEFAULT_ZONE_STYLE } from "../constants/defaults.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   width: SCREEN_WIDTH,
@@ -13,15 +14,11 @@ const {
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 const AnimatedView = Animated.View;
 
-// Helper to create rounded rect path
-// x,y are top-left coordinates
+// SVG rounded-rect path with a cutout hole (fillRule="evenodd")
 const createRoundedRectPath = (x, y, w, h, r) => {
   'worklet';
 
-  // Ensure radius doesn't exceed dimensions
   const radius = Math.min(r, w / 2, h / 2);
-
-  // Standard SVG Path command for rounded rect
   return `
     M ${x + radius}, ${y}
     H ${x + w - radius}
@@ -43,15 +40,21 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
     targetHeight,
     targetRadius,
     opacity,
+    zoneBorderWidth,
     config,
     currentStep,
-    steps
+    steps,
+    currentZoneStyle
   } = useTour();
+  const zoneStyle = useMemo(() => {
+    return {
+      ...DEFAULT_ZONE_STYLE,
+      ...config?.zoneStyle,
+      ...currentZoneStyle
+    };
+  }, [config?.zoneStyle, currentZoneStyle]);
 
-  // Create the d string for the mask
-  // Outer rectangle covers the whole screen
-  // Inner shape is the "hole"
-  // fillRule="evenodd" makes the intersection transparent
+  // Backdrop SVG: full-screen rect minus the highlight cutout
   const animatedProps = useAnimatedProps(() => {
     const holePath = createRoundedRectPath(targetX.value, targetY.value, targetWidth.value, targetHeight.value, targetRadius.value);
     const path = `
@@ -70,33 +73,10 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
   const step = currentStep ? steps[currentStep] : null;
   const isClickable = step?.clickable ?? false;
 
-  // Interaction Logic:
-  // 1. preventInteraction = true:
-  //    - Wrapper pointerEvents = 'box-none' (pass through) BUT SVG is auto?
-  //    - Actually, if we want to block OUTSIDE but allow INSIDE:
-  //      - SVG path normally blocks where it draws (the dark part).
-  //      - The 'hole' is empty, so touches pass through the hole to the app?
-  //      - YES, with fillRule="evenodd", the hole effectively has no fill.
-  //      - So if SVG is 'auto', touching the dark mask is blocked (if we consume touch).
-  //      - Touching the hole goes through to the app (GOOD for clickable).
-  //    - IF we want to BLOCK the hole (clickable=false):
-  //      - We need a transparent view covering the hole that consumes touches.
-  //
-  // 2. preventInteraction = false (default):
-  //    - Overlay shouldn't block anything?
-  //    - pointerEvents='none' on the whole container.
-
-  const shouldBlockOutside = config?.preventInteraction ?? false;
-
-  // If we don't want to block outside, we just let everything pass.
-  // But wait, if we let everything pass, we can't implement 'clickable=false' strictness?
-  // Usually preventInteraction=false means "just show the highlighter, let user do whatever".
-
+  // When preventInteraction is true, the SVG blocks touches outside the hole.
+  // A transparent view covers the hole to block touches inside it when clickable=false.
+  const shouldBlockOutside = step?.preventInteraction ?? config?.preventInteraction ?? false;
   const containerPointerEvents = shouldBlockOutside && currentStep ? 'box-none' : 'none';
-
-  // If blocking outside, the SVG (which is absolute fill) needs to catch touches on the dark part.
-
-  // Blocker style for the hole (only if NOT clickable)
   const blockerStyle = useAnimatedStyle(() => {
     return {
       position: 'absolute',
@@ -104,10 +84,31 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
       top: targetY.value,
       width: targetWidth.value,
       height: targetHeight.value,
-      // We can match radius too if needed, but rect is fine for touch area usually
       borderRadius: targetRadius.value
     };
   });
+
+  // Border/glow ring tracks the highlight and fades with the backdrop
+  const zoneBorderStyle = useAnimatedStyle(() => {
+    const isGlowEnabled = config?.enableGlow === true;
+    const borderW = zoneBorderWidth?.value ?? zoneStyle.borderWidth;
+    return {
+      position: 'absolute',
+      left: targetX.value,
+      top: targetY.value,
+      width: targetWidth.value,
+      height: targetHeight.value,
+      borderRadius: targetRadius.value,
+      borderWidth: borderW,
+      borderColor: zoneStyle.borderColor,
+      backgroundColor: 'transparent',
+      opacity: opacity.value,
+      ...(isGlowEnabled && {
+        boxShadow: `${zoneStyle.glowOffsetX}px ${zoneStyle.glowOffsetY}px ${zoneStyle.glowRadius}px ${zoneStyle.glowSpread}px ${zoneStyle.glowColor}`
+      })
+    };
+  });
+  const showBorder = config?.enableGlow === true || zoneStyle.borderWidth > 0;
   return /*#__PURE__*/_jsxs(AnimatedView, {
     pointerEvents: containerPointerEvents,
     style: StyleSheet.absoluteFill,
@@ -117,17 +118,16 @@ export const TourOverlay = /*#__PURE__*/memo(() => {
       style: StyleSheet.absoluteFill,
       children: /*#__PURE__*/_jsx(AnimatedPath, {
         animatedProps: animatedProps,
-        fill: "black" // The backdrop color
-        ,
+        fill: "black",
         fillRule: "evenodd",
-        onPress: () => {
-          // Consume touch on the backdrop?
-        }
+        onPress: () => {}
       })
     }), shouldBlockOutside && !isClickable && currentStep && /*#__PURE__*/_jsx(AnimatedView, {
       style: blockerStyle,
-      pointerEvents: "auto" // Catch touches
-      // backgroundColor="transparent" // Default
+      pointerEvents: "auto"
+    }), showBorder && currentStep && /*#__PURE__*/_jsx(AnimatedView, {
+      style: zoneBorderStyle,
+      pointerEvents: "none"
     })]
   });
 });

package/lib/module/components/TourOverlay.js.map

@@ -1 +1 @@
-{"version":3,"names":["memo","StyleSheet","Dimensions","Svg","Path","Animated","useAnimatedProps","useAnimatedStyle","useTour","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","height","SCREEN_HEIGHT","get","AnimatedPath","createAnimatedComponent","AnimatedView","View","createRoundedRectPath","x","y","w","h","r","radius","Math","min","TourOverlay","targetX","targetY","targetWidth","targetHeight","targetRadius","opacity","config","currentStep","steps","animatedProps","holePath","value","path","d","fillOpacity","step","isClickable","clickable","shouldBlockOutside","preventInteraction","containerPointerEvents","blockerStyle","position","left","top","borderRadius","pointerEvents","style","absoluteFill","children","fill","fillRule","onPress"],"sourceRoot":"..\\..\\..\\src","sources":["components/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["memo","useMemo","StyleSheet","Dimensions","Svg","Path","Animated","useAnimatedProps","useAnimatedStyle","useTour","DEFAULT_ZONE_STYLE","jsx","_jsx","jsxs","_jsxs","width","SCREEN_WIDTH","height","SCREEN_HEIGHT","get","AnimatedPath","createAnimatedComponent","AnimatedView","View","createRoundedRectPath","x","y","w","h","r","radius","Math","min","TourOverlay","targetX","targetY","targetWidth","targetHeight","targetRadius","opacity","zoneBorderWidth","config","currentStep","steps","currentZoneStyle","zoneStyle","animatedProps","holePath","value","path","d","fillOpacity","step","isClickable","clickable","shouldBlockOutside","preventInteraction","containerPointerEvents","blockerStyle","position","left","top","borderRadius","zoneBorderStyle","isGlowEnabled","enableGlow","borderW","borderWidth","borderColor","backgroundColor","boxShadow","glowOffsetX","glowOffsetY","glowRadius","glowSpread","glowColor","showBorder","pointerEvents","style","absoluteFill","children","fill","fillRule","onPress"],"sourceRoot":"..\\..\\..\\src","sources":["components/TourOverlay.tsx"],"mappings":"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","ignoreList":[]}