react-native-lumen 1.1.0 → 1.1.1
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.
- package/README.md +12 -5
- package/lib/module/components/TourOverlay.js +9 -49
- package/lib/module/components/TourOverlay.js.map +1 -1
- package/lib/module/components/TourProvider.js +37 -29
- package/lib/module/components/TourProvider.js.map +1 -1
- package/lib/module/components/TourZone.js +66 -29
- package/lib/module/components/TourZone.js.map +1 -1
- package/lib/module/hooks/useTourScrollView.js +6 -3
- package/lib/module/hooks/useTourScrollView.js.map +1 -1
- package/lib/typescript/src/components/TourOverlay.d.ts.map +1 -1
- package/lib/typescript/src/components/TourProvider.d.ts.map +1 -1
- package/lib/typescript/src/components/TourZone.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useTourScrollView.d.ts +12 -1
- package/lib/typescript/src/hooks/useTourScrollView.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +20 -0
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/package.json +1 -5
- package/src/components/TourOverlay.tsx +0 -196
- package/src/components/TourProvider.tsx +0 -713
- package/src/components/TourTooltip.tsx +0 -329
- package/src/components/TourZone.tsx +0 -469
- package/src/constants/animations.ts +0 -71
- package/src/constants/defaults.ts +0 -66
- package/src/context/TourContext.ts +0 -4
- package/src/hooks/useTour.ts +0 -10
- package/src/hooks/useTourScrollView.ts +0 -111
- package/src/index.tsx +0 -35
- package/src/types/index.ts +0 -447
- package/src/utils/storage.ts +0 -226
|
@@ -34,7 +34,8 @@ export function useTourScrollView(options = {}) {
|
|
|
34
34
|
const tour = useTour();
|
|
35
35
|
const {
|
|
36
36
|
scrollViewRef,
|
|
37
|
-
currentStep
|
|
37
|
+
currentStep,
|
|
38
|
+
triggerScrollEnd
|
|
38
39
|
} = tour;
|
|
39
40
|
const isTourActive = currentStep !== null;
|
|
40
41
|
const scrollEnabled = disableScrollDuringTour ? !isTourActive : true;
|
|
@@ -53,18 +54,20 @@ export function useTourScrollView(options = {}) {
|
|
|
53
54
|
}, [scrollViewRef]);
|
|
54
55
|
const scrollViewProps = useMemo(() => {
|
|
55
56
|
const props = {
|
|
56
|
-
ref: scrollViewRef
|
|
57
|
+
ref: scrollViewRef,
|
|
58
|
+
onMomentumScrollEnd: triggerScrollEnd
|
|
57
59
|
};
|
|
58
60
|
if (disableScrollDuringTour) {
|
|
59
61
|
props.scrollEnabled = scrollEnabled;
|
|
60
62
|
}
|
|
61
63
|
return props;
|
|
62
|
-
}, [scrollViewRef, disableScrollDuringTour, scrollEnabled]);
|
|
64
|
+
}, [scrollViewRef, triggerScrollEnd, disableScrollDuringTour, scrollEnabled]);
|
|
63
65
|
return {
|
|
64
66
|
scrollViewRef,
|
|
65
67
|
isTourActive,
|
|
66
68
|
scrollEnabled,
|
|
67
69
|
scrollTo,
|
|
70
|
+
onMomentumScrollEnd: triggerScrollEnd,
|
|
68
71
|
scrollViewProps
|
|
69
72
|
};
|
|
70
73
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useMemo","useTour","useTourScrollView","options","disableScrollDuringTour","tour","scrollViewRef","currentStep","isTourActive","scrollEnabled","scrollTo","opts","current","x","y","animated","scrollViewProps","props","ref"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useTourScrollView.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,OAAO,QAAQ,cAAW;
|
|
1
|
+
{"version":3,"names":["useCallback","useMemo","useTour","useTourScrollView","options","disableScrollDuringTour","tour","scrollViewRef","currentStep","triggerScrollEnd","isTourActive","scrollEnabled","scrollTo","opts","current","x","y","animated","scrollViewProps","props","ref","onMomentumScrollEnd"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useTourScrollView.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,OAAO,QAAQ,cAAW;AAmDnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAC/BC,OAA8B,GAAG,CAAC,CAAC,EACb;EACtB,MAAM;IAAEC,uBAAuB,GAAG;EAAM,CAAC,GAAGD,OAAO;;EAEnD;EACA,MAAME,IAAI,GAAGJ,OAAO,CAAC,CAAC;EACtB,MAAM;IAAEK,aAAa;IAAEC,WAAW;IAAEC;EAAiB,CAAC,GAAGH,IAAW;EAEpE,MAAMI,YAAY,GAAGF,WAAW,KAAK,IAAI;EACzC,MAAMG,aAAa,GAAGN,uBAAuB,GAAG,CAACK,YAAY,GAAG,IAAI;EAEpE,MAAME,QAAQ,GAAGZ,WAAW,CACzBa,IAAoD,IAAK;IACxD,IAAI;MACF,IAAIN,aAAa,EAAEO,OAAO,EAAEF,QAAQ,EAAE;QACpCL,aAAa,CAACO,OAAO,CAACF,QAAQ,CAAC;UAC7BG,CAAC,EAAEF,IAAI,CAACE,CAAC,IAAI,CAAC;UACdC,CAAC,EAAEH,IAAI,CAACG,CAAC,IAAI,CAAC;UACdC,QAAQ,EAAEJ,IAAI,CAACI,QAAQ,KAAK;QAC9B,CAAC,CAAC;MACJ;IACF,CAAC,CAAC,MAAM;MACN;IAAA;EAEJ,CAAC,EACD,CAACV,aAAa,CAChB,CAAC;EAED,MAAMW,eAAe,GAAGjB,OAAO,CAAC,MAAM;IACpC,MAAMkB,KAIL,GAAG;MACFC,GAAG,EAAEb,aAAa;MAClBc,mBAAmB,EAAEZ;IACvB,CAAC;IACD,IAAIJ,uBAAuB,EAAE;MAC3Bc,KAAK,CAACR,aAAa,GAAGA,aAAa;IACrC;IACA,OAAOQ,KAAK;EACd,CAAC,EAAE,CAACZ,aAAa,EAAEE,gBAAgB,EAAEJ,uBAAuB,EAAEM,aAAa,CAAC,CAAC;EAE7E,OAAO;IACLJ,aAAa;IACbG,YAAY;IACZC,aAAa;IACbC,QAAQ;IACRS,mBAAmB,EAAEZ,gBAAgB;IACrCS;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TourOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/TourOverlay.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TourOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/TourOverlay.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,WAAW,oFAmHtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TourProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TourProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAGV,UAAU,EAIV,UAAU,EACX,MAAM,UAAU,CAAC;AA6FlB,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"TourProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TourProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAGV,UAAU,EAIV,UAAU,EACX,MAAM,UAAU,CAAC;AA6FlB,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqjBpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TourZone.d.ts","sourceRoot":"","sources":["../../../../src/components/TourZone.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TourZone.d.ts","sourceRoot":"","sources":["../../../../src/components/TourZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAazD,OAAO,KAAK,EAEV,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,UAAU,CAAC;AAMlB,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1D;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuc5C,CAAC"}
|
|
@@ -29,12 +29,23 @@ export interface TourScrollViewResult {
|
|
|
29
29
|
y?: number;
|
|
30
30
|
animated?: boolean;
|
|
31
31
|
}) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Pass this to your ScrollView's onMomentumScrollEnd prop so the tour
|
|
34
|
+
* library knows exactly when a programmatic scroll has finished, allowing
|
|
35
|
+
* it to immediately re-measure the highlighted element instead of waiting
|
|
36
|
+
* for a fixed-duration timeout.
|
|
37
|
+
*
|
|
38
|
+
* Already included in scrollViewProps — only needed if you build your own
|
|
39
|
+
* scroll props manually.
|
|
40
|
+
*/
|
|
41
|
+
onMomentumScrollEnd: () => void;
|
|
32
42
|
/**
|
|
33
43
|
* Props to spread onto your ScrollView for full tour integration.
|
|
34
|
-
* Includes ref and scrollEnabled (if disableScrollDuringTour is true).
|
|
44
|
+
* Includes ref, onMomentumScrollEnd, and scrollEnabled (if disableScrollDuringTour is true).
|
|
35
45
|
*/
|
|
36
46
|
scrollViewProps: {
|
|
37
47
|
ref: React.RefObject<any>;
|
|
48
|
+
onMomentumScrollEnd: () => void;
|
|
38
49
|
scrollEnabled?: boolean;
|
|
39
50
|
};
|
|
40
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTourScrollView.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTourScrollView.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E;;;OAGG;IACH,eAAe,EAAE;QACf,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"useTourScrollView.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTourScrollView.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,OAAO,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E;;;;;;;;OAQG;IACH,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC;;;OAGG;IACH,eAAe,EAAE;QACf,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,mBAAmB,EAAE,MAAM,IAAI,CAAC;QAChC,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CAkDtB"}
|
|
@@ -411,6 +411,12 @@ export interface TourContextType {
|
|
|
411
411
|
* Includes all steps across all screens (for multi-screen tours).
|
|
412
412
|
*/
|
|
413
413
|
orderedStepKeys: string[];
|
|
414
|
+
/**
|
|
415
|
+
* Call this from the ScrollView's onMomentumScrollEnd event to signal that
|
|
416
|
+
* a programmatic scroll has finished. The library uses this to fire the
|
|
417
|
+
* final accurate measurement instead of relying on a fixed-duration timeout.
|
|
418
|
+
*/
|
|
419
|
+
triggerScrollEnd: () => void;
|
|
414
420
|
}
|
|
415
421
|
export interface InternalTourContextType extends TourContextType {
|
|
416
422
|
targetX: SharedValue<number>;
|
|
@@ -426,5 +432,19 @@ export interface InternalTourContextType extends TourContextType {
|
|
|
426
432
|
setScrollViewRef: (ref: any) => void;
|
|
427
433
|
/** Resolved zone style for the current step */
|
|
428
434
|
currentZoneStyle: ZoneStyle | null;
|
|
435
|
+
/**
|
|
436
|
+
* Registers a one-shot callback that fires once when triggerScrollEnd is called.
|
|
437
|
+
* TourZone uses this to know when the programmatic scroll animation has settled.
|
|
438
|
+
*/
|
|
439
|
+
registerScrollEndCallback: (cb: () => void) => void;
|
|
440
|
+
/** Clears any pending scroll-end callback (called on effect cleanup). */
|
|
441
|
+
unregisterScrollEndCallback: () => void;
|
|
442
|
+
/** Fires the registered scroll-end callback (if any) and clears it. */
|
|
443
|
+
triggerScrollEnd: () => void;
|
|
444
|
+
/**
|
|
445
|
+
* The configured backdrop opacity (0–1). TourZone reads this so it can
|
|
446
|
+
* fade the overlay back to the correct level after a scroll-induced fade-out.
|
|
447
|
+
*/
|
|
448
|
+
backdropOpacity: number;
|
|
429
449
|
}
|
|
430
450
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-lumen",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A customizable app tour library for React Native",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -13,11 +13,7 @@
|
|
|
13
13
|
"./package.json": "./package.json"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
|
-
"src",
|
|
17
16
|
"lib",
|
|
18
|
-
"android",
|
|
19
|
-
"ios",
|
|
20
|
-
"cpp",
|
|
21
17
|
"*.podspec",
|
|
22
18
|
"react-native.config.js",
|
|
23
19
|
"!ios/build",
|
|
@@ -1,196 +0,0 @@
|
|
|
1
|
-
import { memo, type ComponentType, useMemo } from 'react';
|
|
2
|
-
import { StyleSheet, Dimensions } from 'react-native';
|
|
3
|
-
import Svg, { Path } from 'react-native-svg';
|
|
4
|
-
import Animated, {
|
|
5
|
-
useAnimatedProps,
|
|
6
|
-
useAnimatedStyle,
|
|
7
|
-
} from 'react-native-reanimated';
|
|
8
|
-
import { useTour } from '../hooks/useTour';
|
|
9
|
-
import type { InternalTourContextType } from '../types';
|
|
10
|
-
import { DEFAULT_ZONE_STYLE } from '../constants/defaults';
|
|
11
|
-
|
|
12
|
-
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
|
|
13
|
-
|
|
14
|
-
const AnimatedPath = Animated.createAnimatedComponent(Path);
|
|
15
|
-
const AnimatedView = Animated.View as unknown as ComponentType<any>;
|
|
16
|
-
|
|
17
|
-
// Helper to create rounded rect path
|
|
18
|
-
// x,y are top-left coordinates
|
|
19
|
-
const createRoundedRectPath = (
|
|
20
|
-
x: number,
|
|
21
|
-
y: number,
|
|
22
|
-
w: number,
|
|
23
|
-
h: number,
|
|
24
|
-
r: number
|
|
25
|
-
) => {
|
|
26
|
-
'worklet';
|
|
27
|
-
// Ensure radius doesn't exceed dimensions
|
|
28
|
-
const radius = Math.min(r, w / 2, h / 2);
|
|
29
|
-
|
|
30
|
-
// Standard SVG Path command for rounded rect
|
|
31
|
-
return `
|
|
32
|
-
M ${x + radius}, ${y}
|
|
33
|
-
H ${x + w - radius}
|
|
34
|
-
A ${radius} ${radius} 0 0 1 ${x + w}, ${y + radius}
|
|
35
|
-
V ${y + h - radius}
|
|
36
|
-
A ${radius} ${radius} 0 0 1 ${x + w - radius}, ${y + h}
|
|
37
|
-
H ${x + radius}
|
|
38
|
-
A ${radius} ${radius} 0 0 1 ${x}, ${y + h - radius}
|
|
39
|
-
V ${y + radius}
|
|
40
|
-
A ${radius} ${radius} 0 0 1 ${x + radius}, ${y}
|
|
41
|
-
Z
|
|
42
|
-
`;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export const TourOverlay = memo(() => {
|
|
46
|
-
const {
|
|
47
|
-
targetX,
|
|
48
|
-
targetY,
|
|
49
|
-
targetWidth,
|
|
50
|
-
targetHeight,
|
|
51
|
-
targetRadius,
|
|
52
|
-
opacity,
|
|
53
|
-
zoneBorderWidth,
|
|
54
|
-
config,
|
|
55
|
-
currentStep,
|
|
56
|
-
steps,
|
|
57
|
-
currentZoneStyle,
|
|
58
|
-
} = useTour() as InternalTourContextType;
|
|
59
|
-
|
|
60
|
-
// Get resolved zone style for styling the glow/border
|
|
61
|
-
const zoneStyle = useMemo(() => {
|
|
62
|
-
return {
|
|
63
|
-
...DEFAULT_ZONE_STYLE,
|
|
64
|
-
...config?.zoneStyle,
|
|
65
|
-
...currentZoneStyle,
|
|
66
|
-
};
|
|
67
|
-
}, [config?.zoneStyle, currentZoneStyle]);
|
|
68
|
-
|
|
69
|
-
// Create the d string for the mask
|
|
70
|
-
// Outer rectangle covers the whole screen
|
|
71
|
-
// Inner shape is the "hole"
|
|
72
|
-
// fillRule="evenodd" makes the intersection transparent
|
|
73
|
-
const animatedProps = useAnimatedProps(() => {
|
|
74
|
-
const holePath = createRoundedRectPath(
|
|
75
|
-
targetX.value,
|
|
76
|
-
targetY.value,
|
|
77
|
-
targetWidth.value,
|
|
78
|
-
targetHeight.value,
|
|
79
|
-
targetRadius.value
|
|
80
|
-
);
|
|
81
|
-
|
|
82
|
-
const path = `
|
|
83
|
-
M 0,0
|
|
84
|
-
H ${SCREEN_WIDTH}
|
|
85
|
-
V ${SCREEN_HEIGHT}
|
|
86
|
-
H 0
|
|
87
|
-
Z
|
|
88
|
-
${holePath}
|
|
89
|
-
`;
|
|
90
|
-
|
|
91
|
-
return {
|
|
92
|
-
d: path,
|
|
93
|
-
fillOpacity: opacity.value,
|
|
94
|
-
};
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
const step = currentStep ? steps[currentStep] : null;
|
|
98
|
-
const isClickable = step?.clickable ?? false;
|
|
99
|
-
|
|
100
|
-
// Interaction Logic:
|
|
101
|
-
// 1. preventInteraction = true:
|
|
102
|
-
// - Wrapper pointerEvents = 'box-none' (pass through) BUT SVG is auto?
|
|
103
|
-
// - Actually, if we want to block OUTSIDE but allow INSIDE:
|
|
104
|
-
// - SVG path normally blocks where it draws (the dark part).
|
|
105
|
-
// - The 'hole' is empty, so touches pass through the hole to the app?
|
|
106
|
-
// - YES, with fillRule="evenodd", the hole effectively has no fill.
|
|
107
|
-
// - So if SVG is 'auto', touching the dark mask is blocked (if we consume touch).
|
|
108
|
-
// - Touching the hole goes through to the app (GOOD for clickable).
|
|
109
|
-
// - IF we want to BLOCK the hole (clickable=false):
|
|
110
|
-
// - We need a transparent view covering the hole that consumes touches.
|
|
111
|
-
//
|
|
112
|
-
// 2. preventInteraction = false (default):
|
|
113
|
-
// - Overlay shouldn't block anything?
|
|
114
|
-
// - pointerEvents='none' on the whole container.
|
|
115
|
-
|
|
116
|
-
// Check per-step preventInteraction first, then fall back to global config
|
|
117
|
-
const shouldBlockOutside =
|
|
118
|
-
step?.preventInteraction ?? config?.preventInteraction ?? false;
|
|
119
|
-
|
|
120
|
-
// If we don't want to block outside, we just let everything pass.
|
|
121
|
-
// But wait, if we let everything pass, we can't implement 'clickable=false' strictness?
|
|
122
|
-
// Usually preventInteraction=false means "just show the highlighter, let user do whatever".
|
|
123
|
-
|
|
124
|
-
const containerPointerEvents =
|
|
125
|
-
shouldBlockOutside && currentStep ? 'box-none' : 'none';
|
|
126
|
-
|
|
127
|
-
// If blocking outside, the SVG (which is absolute fill) needs to catch touches on the dark part.
|
|
128
|
-
|
|
129
|
-
// Blocker style for the hole (only if NOT clickable)
|
|
130
|
-
const blockerStyle = useAnimatedStyle(() => {
|
|
131
|
-
return {
|
|
132
|
-
position: 'absolute',
|
|
133
|
-
left: targetX.value,
|
|
134
|
-
top: targetY.value,
|
|
135
|
-
width: targetWidth.value,
|
|
136
|
-
height: targetHeight.value,
|
|
137
|
-
// We can match radius too if needed, but rect is fine for touch area usually
|
|
138
|
-
borderRadius: targetRadius.value,
|
|
139
|
-
};
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
// Animated style for the zone border/glow ring
|
|
143
|
-
const zoneBorderStyle = useAnimatedStyle(() => {
|
|
144
|
-
const isGlowEnabled = config?.enableGlow === true;
|
|
145
|
-
const borderW = zoneBorderWidth?.value ?? zoneStyle.borderWidth;
|
|
146
|
-
|
|
147
|
-
return {
|
|
148
|
-
position: 'absolute' as const,
|
|
149
|
-
left: targetX.value,
|
|
150
|
-
top: targetY.value,
|
|
151
|
-
width: targetWidth.value,
|
|
152
|
-
height: targetHeight.value,
|
|
153
|
-
borderRadius: targetRadius.value,
|
|
154
|
-
borderWidth: borderW,
|
|
155
|
-
borderColor: zoneStyle.borderColor,
|
|
156
|
-
backgroundColor: 'transparent',
|
|
157
|
-
...(isGlowEnabled && {
|
|
158
|
-
// Glow effect using React Native 0.76+ boxShadow API
|
|
159
|
-
boxShadow: `${zoneStyle.glowOffsetX}px ${zoneStyle.glowOffsetY}px ${zoneStyle.glowRadius}px ${zoneStyle.glowSpread}px ${zoneStyle.glowColor}`,
|
|
160
|
-
}),
|
|
161
|
-
};
|
|
162
|
-
});
|
|
163
|
-
|
|
164
|
-
// Determine if we should show the border/glow
|
|
165
|
-
const showBorder = config?.enableGlow === true || zoneStyle.borderWidth > 0;
|
|
166
|
-
|
|
167
|
-
return (
|
|
168
|
-
<AnimatedView
|
|
169
|
-
pointerEvents={containerPointerEvents}
|
|
170
|
-
style={StyleSheet.absoluteFill}
|
|
171
|
-
>
|
|
172
|
-
<Svg height="100%" width="100%" style={StyleSheet.absoluteFill}>
|
|
173
|
-
<AnimatedPath
|
|
174
|
-
animatedProps={animatedProps as any}
|
|
175
|
-
fill="black" // The backdrop color
|
|
176
|
-
fillRule="evenodd"
|
|
177
|
-
onPress={() => {
|
|
178
|
-
// Consume touch on the backdrop?
|
|
179
|
-
}}
|
|
180
|
-
/>
|
|
181
|
-
</Svg>
|
|
182
|
-
{/* If strictly blocking interaction AND current step is NOT clickable, we cover the hole */}
|
|
183
|
-
{shouldBlockOutside && !isClickable && currentStep && (
|
|
184
|
-
<AnimatedView
|
|
185
|
-
style={blockerStyle}
|
|
186
|
-
pointerEvents="auto" // Catch touches
|
|
187
|
-
// backgroundColor="transparent" // Default
|
|
188
|
-
/>
|
|
189
|
-
)}
|
|
190
|
-
{/* Border/Glow ring around the zone */}
|
|
191
|
-
{showBorder && currentStep && (
|
|
192
|
-
<AnimatedView style={zoneBorderStyle} pointerEvents="none" />
|
|
193
|
-
)}
|
|
194
|
-
</AnimatedView>
|
|
195
|
-
);
|
|
196
|
-
});
|