@robertlinde/react-tour-kit 0.5.10 → 0.6.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 +130 -15
- package/dist/react-native-platform/components/tour-overlay.js +33 -1
- package/dist/react-native-platform/components/tour-overlay.js.map +1 -1
- package/dist/react-native-platform/components/tour-tooltip.js +23 -5
- package/dist/react-native-platform/components/tour-tooltip.js.map +1 -1
- package/dist/react-native-platform/tour-provider.js +32 -14
- package/dist/react-native-platform/tour-provider.js.map +1 -1
- package/dist/react-native-platform/types/tour-provider.props.type.d.ts +2 -2
- package/dist/react-native.d.ts +1 -1
- package/dist/react-native.js.map +1 -1
- package/dist/react-platform/components/tour-tooltip.js +28 -8
- package/dist/react-platform/components/tour-tooltip.js.map +1 -1
- package/dist/react-platform/tour-provider.js +32 -14
- package/dist/react-platform/tour-provider.js.map +1 -1
- package/dist/react-platform/types/tour-provider.props.type.d.ts +2 -2
- package/dist/react.d.ts +1 -1
- package/dist/react.js.map +1 -1
- package/dist/shared/index.d.ts +1 -1
- package/dist/shared/index.js.map +1 -1
- package/dist/shared/types/index.d.ts +1 -0
- package/dist/shared/types/tour-context.type.d.ts +2 -1
- package/dist/shared/types/tour-end-info.type.d.ts +12 -0
- package/dist/shared/types/tour-end-info.type.js +2 -0
- package/dist/shared/types/tour-end-info.type.js.map +1 -0
- package/dist/shared/utils/get-truncated-dots.util.d.ts +11 -0
- package/dist/shared/utils/get-truncated-dots.util.js +37 -0
- package/dist/shared/utils/get-truncated-dots.util.js.map +1 -0
- package/dist/shared/utils/index.d.ts +2 -0
- package/dist/shared/utils/index.js +1 -0
- package/dist/shared/utils/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@ Cross-platform guided tour library for React and React Native. Build interactive
|
|
|
11
11
|
- **Smart Positioning**: Automatic tooltip positioning with viewport boundary detection
|
|
12
12
|
- **Keyboard Navigation**: Arrow keys and Escape (web) or hardware back button (Android)
|
|
13
13
|
- **Async Step Actions**: Run async code before each step (e.g., navigate, switch tabs, open dialogs)
|
|
14
|
+
- **Rich End Callbacks**: Know _why_ a tour ended (`completed`, `closed`, `blur`, `escape`, `target-missing`) with global and per-tour handlers
|
|
14
15
|
- **TypeScript First**: Full TypeScript support
|
|
15
16
|
|
|
16
17
|
## Installation
|
|
@@ -396,9 +397,10 @@ import {TourProvider} from '@robertlinde/react-tour-kit/react';
|
|
|
396
397
|
TooltipComponent={CustomTooltip} // Optional: custom tooltip component
|
|
397
398
|
OverlayComponent={CustomOverlay} // Optional: custom overlay component
|
|
398
399
|
theme={theme} // Optional: theme configuration
|
|
399
|
-
onTourEnd={(tourId) => {
|
|
400
|
+
onTourEnd={(tourId, info) => {
|
|
400
401
|
// Optional: callback when tour ends
|
|
401
|
-
|
|
402
|
+
// info.reason is one of: 'completed' | 'closed' | 'blur' | 'escape' | 'target-missing'
|
|
403
|
+
console.log(`Tour ${tourId} ended: ${info.reason} at step ${info.stepIndex + 1}/${info.totalSteps}`);
|
|
402
404
|
}}
|
|
403
405
|
>
|
|
404
406
|
{children}
|
|
@@ -407,14 +409,14 @@ import {TourProvider} from '@robertlinde/react-tour-kit/react';
|
|
|
407
409
|
|
|
408
410
|
#### Props
|
|
409
411
|
|
|
410
|
-
| Prop | Type | Description
|
|
411
|
-
| ------------------ | --------------------------------------------- |
|
|
412
|
-
| `children` | `ReactNode` | Your application content
|
|
413
|
-
| `theme` | `TourTheme` | Theme configuration for colors (see Theming section)
|
|
414
|
-
| `i18n` | `TourI18n` | Internationalization options for labels (see i18n section)
|
|
415
|
-
| `TooltipComponent` | `ForwardRefExoticComponent<TourTooltipProps>` | Custom tooltip component (must use forwardRef)
|
|
416
|
-
| `OverlayComponent` | `ComponentType<TourOverlayProps>` | Custom overlay component
|
|
417
|
-
| `onTourEnd` | `
|
|
412
|
+
| Prop | Type | Description |
|
|
413
|
+
| ------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
414
|
+
| `children` | `ReactNode` | Your application content |
|
|
415
|
+
| `theme` | `TourTheme` | Theme configuration for colors (see Theming section) |
|
|
416
|
+
| `i18n` | `TourI18n` | Internationalization options for labels (see i18n section) |
|
|
417
|
+
| `TooltipComponent` | `ForwardRefExoticComponent<TourTooltipProps>` | Custom tooltip component (must use forwardRef) |
|
|
418
|
+
| `OverlayComponent` | `ComponentType<TourOverlayProps>` | Custom overlay component |
|
|
419
|
+
| `onTourEnd` | `TourEndCallback` | Callback fired when any tour ends. Receives `(tourId, info)` with the reason and step context (see [Tour End Callbacks](#tour-end-callbacks)) |
|
|
418
420
|
|
|
419
421
|
### useTour Hook
|
|
420
422
|
|
|
@@ -429,7 +431,7 @@ function MyComponent() {
|
|
|
429
431
|
currentStep, // number: current step index (0-based)
|
|
430
432
|
steps, // TourStep[]: all steps in current tour
|
|
431
433
|
currentTourId, // string | null: ID of current tour
|
|
432
|
-
startTour, // (steps: TourStep[], tourId?: string) => void
|
|
434
|
+
startTour, // (steps: TourStep[], tourId?: string, options?: StartTourOptions) => void
|
|
433
435
|
endTour, // () => void
|
|
434
436
|
nextStep, // () => void
|
|
435
437
|
prevStep, // () => void
|
|
@@ -457,6 +459,113 @@ type TourStep = {
|
|
|
457
459
|
type TourTarget = string | RefObject<unknown>;
|
|
458
460
|
```
|
|
459
461
|
|
|
462
|
+
### Tour End Callbacks
|
|
463
|
+
|
|
464
|
+
Tours can end in several ways, and callbacks receive context about **why** and **where**. You can register an end handler at two levels: globally on the provider, or per-tour via `startTour`.
|
|
465
|
+
|
|
466
|
+
#### Callback signature
|
|
467
|
+
|
|
468
|
+
```tsx
|
|
469
|
+
type TourEndReason =
|
|
470
|
+
| 'completed' // User clicked Finish on the last step
|
|
471
|
+
| 'closed' // User clicked the close (✕) button, or `endTour()` was called programmatically
|
|
472
|
+
| 'blur' // User clicked/tapped the overlay outside the highlighted element
|
|
473
|
+
| 'escape' // User pressed Escape (web only)
|
|
474
|
+
| 'target-missing'; // The step's target element could not be found and the tour had to end
|
|
475
|
+
|
|
476
|
+
type TourEndInfo = {
|
|
477
|
+
reason: TourEndReason;
|
|
478
|
+
stepIndex: number; // Zero-based index of the step the user was on
|
|
479
|
+
step: TourStep; // The step object the user was on
|
|
480
|
+
totalSteps: number; // Total number of steps in the tour
|
|
481
|
+
};
|
|
482
|
+
|
|
483
|
+
type TourEndCallback = (tourId: string | undefined, info: TourEndInfo) => void;
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
> **Note (React Native):** the `'escape'` reason only fires on web. On Android, the hardware back button is reported as `'closed'`.
|
|
487
|
+
|
|
488
|
+
#### Provider-level callback
|
|
489
|
+
|
|
490
|
+
Use the provider-level `onTourEnd` for cross-cutting concerns that should run for every tour — analytics, logging, etc.
|
|
491
|
+
|
|
492
|
+
```tsx
|
|
493
|
+
<TourProvider
|
|
494
|
+
onTourEnd={(tourId, info) => {
|
|
495
|
+
analytics.track('tour_ended', {
|
|
496
|
+
tourId,
|
|
497
|
+
reason: info.reason,
|
|
498
|
+
lastStep: info.stepIndex + 1,
|
|
499
|
+
totalSteps: info.totalSteps,
|
|
500
|
+
});
|
|
501
|
+
}}
|
|
502
|
+
>
|
|
503
|
+
<App />
|
|
504
|
+
</TourProvider>
|
|
505
|
+
```
|
|
506
|
+
|
|
507
|
+
#### Per-tour callback
|
|
508
|
+
|
|
509
|
+
Pass an `onTourEnd` in the options argument to `startTour` when you need tour-specific end logic. This keeps the logic colocated with the tour that owns it, instead of dispatching on `tourId` in the provider callback.
|
|
510
|
+
|
|
511
|
+
```tsx
|
|
512
|
+
function WelcomeButton() {
|
|
513
|
+
const {startTour} = useTour();
|
|
514
|
+
|
|
515
|
+
const handleStart = () => {
|
|
516
|
+
startTour(onboardingSteps, 'onboarding', {
|
|
517
|
+
onTourEnd: (tourId, info) => {
|
|
518
|
+
if (info.reason === 'completed') {
|
|
519
|
+
markOnboardingComplete();
|
|
520
|
+
}
|
|
521
|
+
},
|
|
522
|
+
});
|
|
523
|
+
};
|
|
524
|
+
|
|
525
|
+
return <button onClick={handleStart}>Start Onboarding</button>;
|
|
526
|
+
}
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
#### Precedence
|
|
530
|
+
|
|
531
|
+
When both a provider-level and a per-tour callback are defined, **the per-tour callback fires first**, then the provider-level callback. Both always run on every end — the per-tour callback does not suppress the provider-level one.
|
|
532
|
+
|
|
533
|
+
```tsx
|
|
534
|
+
// Provider:
|
|
535
|
+
onTourEnd = (id, info) => console.log('provider', id, info.reason);
|
|
536
|
+
|
|
537
|
+
// Tour:
|
|
538
|
+
startTour(steps, 'onboarding', {
|
|
539
|
+
onTourEnd: (id, info) => console.log('tour', id, info.reason),
|
|
540
|
+
});
|
|
541
|
+
|
|
542
|
+
// On end, logs in order:
|
|
543
|
+
// 'tour' 'onboarding' 'completed'
|
|
544
|
+
// 'provider' 'onboarding' 'completed'
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
#### Reacting to specific reasons
|
|
548
|
+
|
|
549
|
+
Branch on `info.reason` to distinguish outcomes:
|
|
550
|
+
|
|
551
|
+
```tsx
|
|
552
|
+
onTourEnd={(tourId, info) => {
|
|
553
|
+
switch (info.reason) {
|
|
554
|
+
case 'completed':
|
|
555
|
+
markComplete(tourId);
|
|
556
|
+
break;
|
|
557
|
+
case 'blur':
|
|
558
|
+
case 'closed':
|
|
559
|
+
case 'escape':
|
|
560
|
+
trackDismissal(tourId, info.reason, info.stepIndex);
|
|
561
|
+
break;
|
|
562
|
+
case 'target-missing':
|
|
563
|
+
reportBug(`Tour ${tourId} broke at step ${info.stepIndex}: ${info.step.target}`);
|
|
564
|
+
break;
|
|
565
|
+
}
|
|
566
|
+
}}
|
|
567
|
+
```
|
|
568
|
+
|
|
460
569
|
## Theming
|
|
461
570
|
|
|
462
571
|
Customize the look of the default tooltip and overlay without building custom components.
|
|
@@ -821,14 +930,14 @@ function App() {
|
|
|
821
930
|
|
|
822
931
|
### Persisting Tour Completion
|
|
823
932
|
|
|
824
|
-
Track which tours users have completed
|
|
933
|
+
Track which tours users have fully completed. Only persist on `'completed'` so dismissed or interrupted tours aren't marked done.
|
|
825
934
|
|
|
826
935
|
```tsx
|
|
827
|
-
import {TourProvider} from '@robertlinde/react-tour-kit/react';
|
|
936
|
+
import {TourProvider, type TourEndCallback} from '@robertlinde/react-tour-kit/react';
|
|
828
937
|
|
|
829
938
|
function App() {
|
|
830
|
-
const handleTourEnd = async (tourId
|
|
831
|
-
if (tourId) {
|
|
939
|
+
const handleTourEnd: TourEndCallback = async (tourId, info) => {
|
|
940
|
+
if (tourId && info.reason === 'completed') {
|
|
832
941
|
// Save to your backend
|
|
833
942
|
await fetch('/api/users/me/completed-tours/' + tourId, {
|
|
834
943
|
method: 'POST',
|
|
@@ -844,6 +953,8 @@ function App() {
|
|
|
844
953
|
}
|
|
845
954
|
```
|
|
846
955
|
|
|
956
|
+
See [Tour End Callbacks](#tour-end-callbacks) for the full list of end reasons and how to register per-tour end handlers.
|
|
957
|
+
|
|
847
958
|
### Conditional Tour Start
|
|
848
959
|
|
|
849
960
|
Start tours based on user state:
|
|
@@ -899,6 +1010,10 @@ import type {
|
|
|
899
1010
|
TourOverlayProps,
|
|
900
1011
|
TourTheme,
|
|
901
1012
|
TourI18n,
|
|
1013
|
+
TourEndCallback,
|
|
1014
|
+
TourEndInfo,
|
|
1015
|
+
TourEndReason,
|
|
1016
|
+
StartTourOptions,
|
|
902
1017
|
} from '@robertlinde/react-tour-kit/react';
|
|
903
1018
|
```
|
|
904
1019
|
|
|
@@ -52,7 +52,28 @@ export function TourOverlay({ highlightRect, onClose, theme }) {
|
|
|
52
52
|
right: 0,
|
|
53
53
|
bottom: 0,
|
|
54
54
|
},
|
|
55
|
-
] }),
|
|
55
|
+
] }), [
|
|
56
|
+
{
|
|
57
|
+
top: cutoutTop,
|
|
58
|
+
left: cutoutLeft,
|
|
59
|
+
childStyle: { bottom: 0, right: 0, borderBottomRightRadius: highlightBorderRadius },
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
top: cutoutTop,
|
|
63
|
+
left: cutoutLeft + cutoutWidth - highlightBorderRadius,
|
|
64
|
+
childStyle: { bottom: 0, left: 0, borderBottomLeftRadius: highlightBorderRadius },
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
top: cutoutTop + cutoutHeight - highlightBorderRadius,
|
|
68
|
+
left: cutoutLeft,
|
|
69
|
+
childStyle: { top: 0, right: 0, borderTopRightRadius: highlightBorderRadius },
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
top: cutoutTop + cutoutHeight - highlightBorderRadius,
|
|
73
|
+
left: cutoutLeft + cutoutWidth - highlightBorderRadius,
|
|
74
|
+
childStyle: { top: 0, left: 0, borderTopLeftRadius: highlightBorderRadius },
|
|
75
|
+
},
|
|
76
|
+
].map((corner, i) => (_jsx(View, { style: [styles.cornerPatch, { top: corner.top, left: corner.left }], children: _jsx(View, { style: [styles.cornerFill, themedStyles.overlay, corner.childStyle] }) }, i))), _jsx(View, { style: [
|
|
56
77
|
styles.highlightBorder,
|
|
57
78
|
themedStyles.highlightBorder,
|
|
58
79
|
{
|
|
@@ -76,5 +97,16 @@ const styles = StyleSheet.create({
|
|
|
76
97
|
borderWidth: 2,
|
|
77
98
|
backgroundColor: 'transparent',
|
|
78
99
|
},
|
|
100
|
+
cornerPatch: {
|
|
101
|
+
position: 'absolute',
|
|
102
|
+
width: highlightBorderRadius,
|
|
103
|
+
height: highlightBorderRadius,
|
|
104
|
+
overflow: 'hidden',
|
|
105
|
+
},
|
|
106
|
+
cornerFill: {
|
|
107
|
+
position: 'absolute',
|
|
108
|
+
width: highlightBorderRadius * 2,
|
|
109
|
+
height: highlightBorderRadius * 2,
|
|
110
|
+
},
|
|
79
111
|
});
|
|
80
112
|
//# sourceMappingURL=tour-overlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-overlay.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-overlay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,OAAO,EAAC,MAAM,OAAO,CAAC;AAI9C,MAAM,EAAC,IAAI,EAAE,UAAU,EAAE,wBAAwB,EAAC,GAAG,OAAO,CAAC,cAAc,CAAkC,CAAC;AAE9G,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAC3B,MAAM,qBAAqB,GAAG,CAAC,CAAC;AAMhC,MAAM,UAAU,WAAW,CAAC,EAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAmB;IAC3E,MAAM,SAAS,GAAG,aAAa,CAAC,GAAG,GAAG,gBAAgB,CAAC;IACvD,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,GAAG,gBAAgB,CAAC;IACzD,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,GAAG,gBAAgB,GAAG,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,GAAG,gBAAgB,GAAG,CAAC,CAAC;IAEjE,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAqD,EAAE,CAAC,CAAC;QACvD,OAAO,EAAE;YACP,eAAe,EAAE,KAAK,CAAC,YAAY;SACpC;QACD,eAAe,EAAE;YACf,WAAW,EAAE,KAAK,CAAC,YAAY;SAChC;KACF,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,KAAC,wBAAwB,IAAC,OAAO,EAAE,OAAO,YACxC,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,aAE3B,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,MAAM,CAAC,OAAO;wBACd,YAAY,CAAC,OAAO;wBACpB;4BACE,GAAG,EAAE,CAAC;4BACN,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,SAAS;yBAClB;qBACF,GACD,EAGF,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,MAAM,CAAC,OAAO;wBACd,YAAY,CAAC,OAAO;wBACpB;4BACE,GAAG,EAAE,SAAS;4BACd,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,UAAU;4BACjB,MAAM,EAAE,YAAY;yBACrB;qBACF,GACD,EAGF,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,MAAM,CAAC,OAAO;wBACd,YAAY,CAAC,OAAO;wBACpB;4BACE,GAAG,EAAE,SAAS;4BACd,IAAI,EAAE,UAAU,GAAG,WAAW;4BAC9B,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,YAAY;yBACrB;qBACF,GACD,EAGF,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,MAAM,CAAC,OAAO;wBACd,YAAY,CAAC,OAAO;wBACpB;4BACE,GAAG,EAAE,SAAS,GAAG,YAAY;4BAC7B,IAAI,EAAE,CAAC;4BACP,KAAK,EAAE,CAAC;4BACR,MAAM,EAAE,CAAC;yBACV;qBACF,GACD,EAGF,KAAC,IAAI,IACH,KAAK,EAAE;wBACL,MAAM,CAAC,eAAe;wBACtB,YAAY,CAAC,eAAe;wBAC5B;4BACE,GAAG,EAAE,SAAS;4BACd,IAAI,EAAE,UAAU;4BAChB,KAAK,EAAE,WAAW;4BAClB,MAAM,EAAE,YAAY;4BACpB,YAAY,EAAE,qBAAqB;yBACpC;qBACF,GACD,IACG,GACkB,CAC5B,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,GAAG,UAAU,CAAC,YAAY;KAC3B;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;KACrB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"tour-overlay.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-overlay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useMemo } from 'react';
|
|
3
|
+
import { getTruncatedDots, DOTS_CONTAINER_WIDTH, DOT_SIZE, DOT_GAP } from '../../shared/utils';
|
|
3
4
|
const { View, Text, TouchableOpacity, StyleSheet } = require('react-native');
|
|
4
5
|
const defaultI18n = {
|
|
5
6
|
nextLabel: 'Next',
|
|
@@ -42,7 +43,7 @@ export const TourTooltip = forwardRef(function TourTooltip({ title, content, cur
|
|
|
42
43
|
left: position.left,
|
|
43
44
|
opacity: isPositioned ? 1 : 0,
|
|
44
45
|
},
|
|
45
|
-
], children: [_jsxs(View, { style: styles.header, children: [_jsx(View, { style: [styles.stepBadge, themedStyles.stepBadge], children: _jsx(Text, { style: styles.stepBadgeText, children: stepCounterTemplate.replace('{current}', String(currentStep + 1)).replace('{total}', String(totalSteps)) }) }), _jsx(TouchableOpacity, { style: styles.closeButton, onPress: onClose, children: _jsx(Text, { style: [styles.closeButtonText, themedStyles.closeButtonText], children: "\u00D7" }) })] }), _jsxs(View, { style: styles.body, children: [_jsx(Text, { style: [styles.title, themedStyles.title], children: title }), _jsx(Text, { style: [styles.content, themedStyles.content], children: content })] }), _jsxs(View, { style: styles.footer, children: [_jsx(TouchableOpacity, { disabled: isFirstStep, style: [styles.navButton, styles.prevButton, isFirstStep && styles.buttonDisabled], onPress: onPrev, children: _jsx(Text, { style: [styles.prevButtonText, isFirstStep && styles.buttonTextDisabled], children: prevLabel }) }), _jsx(View, { style: styles.dots, children:
|
|
46
|
+
], children: [_jsxs(View, { style: styles.header, children: [_jsx(View, { style: [styles.stepBadge, themedStyles.stepBadge], children: _jsx(Text, { style: styles.stepBadgeText, children: stepCounterTemplate.replace('{current}', String(currentStep + 1)).replace('{total}', String(totalSteps)) }) }), _jsx(TouchableOpacity, { style: styles.closeButton, onPress: onClose, children: _jsx(Text, { style: [styles.closeButtonText, themedStyles.closeButtonText], children: "\u00D7" }) })] }), _jsxs(View, { style: styles.body, children: [_jsx(Text, { style: [styles.title, themedStyles.title], children: title }), _jsx(Text, { style: [styles.content, themedStyles.content], children: content })] }), _jsxs(View, { style: styles.footer, children: [_jsx(TouchableOpacity, { disabled: isFirstStep, style: [styles.navButton, styles.prevButton, isFirstStep && styles.buttonDisabled], onPress: onPrev, children: _jsx(Text, { style: [styles.prevButtonText, isFirstStep && styles.buttonTextDisabled], children: prevLabel }) }), _jsx(View, { style: styles.dots, children: getTruncatedDots(currentStep, totalSteps).map((item, i) => item.type === 'ellipsis' ? (_jsxs(View, { style: styles.ellipsis, children: [_jsx(View, { style: styles.ellipsisDot }), _jsx(View, { style: styles.ellipsisDot })] }, `ellipsis-${i}`)) : (_jsx(View, { style: [styles.dot, item.index === currentStep && themedStyles.dotActive] }, item.index))) }), _jsx(TouchableOpacity, { style: [styles.navButton, themedStyles.nextButton], onPress: onNext, children: _jsx(Text, { style: styles.nextButtonText, children: isLastStep ? finishLabel : nextLabel }) })] })] }));
|
|
46
47
|
});
|
|
47
48
|
const styles = StyleSheet.create({
|
|
48
49
|
container: {
|
|
@@ -130,12 +131,29 @@ const styles = StyleSheet.create({
|
|
|
130
131
|
},
|
|
131
132
|
dots: {
|
|
132
133
|
flexDirection: 'row',
|
|
133
|
-
gap:
|
|
134
|
+
gap: DOT_GAP,
|
|
135
|
+
width: DOTS_CONTAINER_WIDTH,
|
|
136
|
+
justifyContent: 'center',
|
|
137
|
+
alignItems: 'center',
|
|
134
138
|
},
|
|
135
139
|
dot: {
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
138
|
-
borderRadius:
|
|
140
|
+
width: DOT_SIZE,
|
|
141
|
+
height: DOT_SIZE,
|
|
142
|
+
borderRadius: DOT_SIZE / 2,
|
|
143
|
+
backgroundColor: '#d1d5db',
|
|
144
|
+
},
|
|
145
|
+
ellipsis: {
|
|
146
|
+
width: DOT_SIZE,
|
|
147
|
+
height: DOT_SIZE,
|
|
148
|
+
flexDirection: 'row',
|
|
149
|
+
alignItems: 'center',
|
|
150
|
+
justifyContent: 'center',
|
|
151
|
+
gap: 2,
|
|
152
|
+
},
|
|
153
|
+
ellipsisDot: {
|
|
154
|
+
width: 3,
|
|
155
|
+
height: 3,
|
|
156
|
+
borderRadius: 1.5,
|
|
139
157
|
backgroundColor: '#d1d5db',
|
|
140
158
|
},
|
|
141
159
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-tooltip.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAAqB,OAAO,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tour-tooltip.js","sourceRoot":"","sources":["../../../src/react-native-platform/components/tour-tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,20 +21,31 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
21
21
|
const [highlightRect, setHighlightRect] = useState(undefined);
|
|
22
22
|
const tooltipRef = useRef(null);
|
|
23
23
|
const [positionKey, setPositionKey] = useState(0);
|
|
24
|
+
const tourOnEndRef = useRef(undefined);
|
|
24
25
|
const Tooltip = TooltipComponent ?? DefaultTourTooltip;
|
|
25
26
|
const Overlay = OverlayComponent ?? DefaultTourOverlay;
|
|
26
|
-
const startTour = useCallback((tourSteps, tourId) => {
|
|
27
|
+
const startTour = useCallback((tourSteps, tourId, options) => {
|
|
27
28
|
if (tourSteps.length > 0) {
|
|
28
29
|
setSteps(tourSteps);
|
|
29
30
|
setCurrentStep(0);
|
|
30
31
|
setCurrentTourId(tourId);
|
|
32
|
+
tourOnEndRef.current = options?.onTourEnd;
|
|
31
33
|
setIsActive(true);
|
|
32
34
|
}
|
|
33
35
|
}, []);
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
const finishTour = useCallback((reason) => {
|
|
37
|
+
const stepAtEnd = steps[currentStep] ?? steps.at(-1);
|
|
38
|
+
if (stepAtEnd) {
|
|
39
|
+
const info = {
|
|
40
|
+
reason,
|
|
41
|
+
stepIndex: currentStep,
|
|
42
|
+
step: stepAtEnd,
|
|
43
|
+
totalSteps: steps.length,
|
|
44
|
+
};
|
|
45
|
+
tourOnEndRef.current?.(currentTourId, info);
|
|
46
|
+
onTourEnd?.(currentTourId, info);
|
|
37
47
|
}
|
|
48
|
+
tourOnEndRef.current = undefined;
|
|
38
49
|
setIsActive(false);
|
|
39
50
|
setCurrentStep(0);
|
|
40
51
|
setSteps([]);
|
|
@@ -42,15 +53,18 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
42
53
|
setHighlightRect(undefined);
|
|
43
54
|
setTooltipPosition({ top: 0, left: 0 });
|
|
44
55
|
setIsPositioned(false);
|
|
45
|
-
}, [currentTourId, onTourEnd]);
|
|
56
|
+
}, [currentTourId, currentStep, steps, onTourEnd]);
|
|
57
|
+
const endTour = useCallback(() => {
|
|
58
|
+
finishTour('closed');
|
|
59
|
+
}, [finishTour]);
|
|
46
60
|
const nextStep = useCallback(() => {
|
|
47
61
|
if (currentStep < steps.length - 1) {
|
|
48
62
|
setCurrentStep((previous) => previous + 1);
|
|
49
63
|
}
|
|
50
64
|
else {
|
|
51
|
-
|
|
65
|
+
finishTour('completed');
|
|
52
66
|
}
|
|
53
|
-
}, [currentStep, steps.length,
|
|
67
|
+
}, [currentStep, steps.length, finishTour]);
|
|
54
68
|
const previousStep = useCallback(() => {
|
|
55
69
|
if (currentStep > 0) {
|
|
56
70
|
setCurrentStep((previous) => previous - 1);
|
|
@@ -76,7 +90,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
76
90
|
setCurrentStep((previous) => previous + 1);
|
|
77
91
|
}
|
|
78
92
|
else {
|
|
79
|
-
|
|
93
|
+
finishTour('target-missing');
|
|
80
94
|
}
|
|
81
95
|
return;
|
|
82
96
|
}
|
|
@@ -88,7 +102,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
88
102
|
setTooltipPosition(position);
|
|
89
103
|
setIsPositioned(true);
|
|
90
104
|
})();
|
|
91
|
-
}, [isActive, currentStep, steps,
|
|
105
|
+
}, [isActive, currentStep, steps, finishTour, platform]);
|
|
92
106
|
useEffect(() => {
|
|
93
107
|
if (!isActive || steps.length === 0) {
|
|
94
108
|
return;
|
|
@@ -110,7 +124,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
110
124
|
setCurrentStep((previous) => previous + 1);
|
|
111
125
|
}
|
|
112
126
|
else {
|
|
113
|
-
|
|
127
|
+
finishTour('target-missing');
|
|
114
128
|
}
|
|
115
129
|
return;
|
|
116
130
|
}
|
|
@@ -121,7 +135,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
121
135
|
}, initialPositionDelayMs);
|
|
122
136
|
};
|
|
123
137
|
void runStep();
|
|
124
|
-
}, [isActive, currentStep, steps,
|
|
138
|
+
}, [isActive, currentStep, steps, finishTour, platform]);
|
|
125
139
|
useEffect(() => {
|
|
126
140
|
if (!isActive || !highlightRect || steps.length === 0) {
|
|
127
141
|
return;
|
|
@@ -168,11 +182,13 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
168
182
|
return;
|
|
169
183
|
}
|
|
170
184
|
return platform.subscribeToKeyboard({
|
|
171
|
-
onEscape
|
|
185
|
+
onEscape() {
|
|
186
|
+
finishTour('closed');
|
|
187
|
+
},
|
|
172
188
|
onNext: nextStep,
|
|
173
189
|
onPrev: previousStep,
|
|
174
190
|
});
|
|
175
|
-
}, [isActive,
|
|
191
|
+
}, [isActive, finishTour, nextStep, previousStep, platform]);
|
|
176
192
|
useEffect(() => {
|
|
177
193
|
if (!isActive) {
|
|
178
194
|
return;
|
|
@@ -191,6 +207,8 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
191
207
|
prevStep: previousStep,
|
|
192
208
|
goToStep,
|
|
193
209
|
}), [isActive, currentStep, steps, currentTourId, startTour, endTour, nextStep, previousStep, goToStep]);
|
|
194
|
-
return (_jsxs(TourContext, { value: contextValue, children: [children, _jsx(Modal, { transparent: true, visible: Boolean(isActive && highlightRect), animationType: "fade", children: highlightRect ? (_jsxs(_Fragment, { children: [_jsx(Overlay, { highlightRect: highlightRect, theme: resolvedTheme, onClose:
|
|
210
|
+
return (_jsxs(TourContext, { value: contextValue, children: [children, _jsx(Modal, { transparent: true, visible: Boolean(isActive && highlightRect), animationType: "fade", children: highlightRect ? (_jsxs(_Fragment, { children: [_jsx(Overlay, { highlightRect: highlightRect, theme: resolvedTheme, onClose: () => {
|
|
211
|
+
finishTour('blur');
|
|
212
|
+
} }), currentTourStep ? (_jsx(Tooltip, { ref: tooltipRef, content: currentTourStep.content, currentStep: currentStep, i18n: i18n, isPositioned: isPositioned, position: tooltipPosition, theme: resolvedTheme, title: currentTourStep.title, totalSteps: steps.length, onClose: endTour, onGoToStep: goToStep, onNext: nextStep, onPrev: previousStep })) : null] })) : null })] }));
|
|
195
213
|
}
|
|
196
214
|
//# sourceMappingURL=tour-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-provider.js","sourceRoot":"","sources":["../../src/react-native-platform/tour-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAElF,OAAO,
|
|
1
|
+
{"version":3,"file":"tour-provider.js","sourceRoot":"","sources":["../../src/react-native-platform/tour-provider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type ComponentType, type ReactNode } from 'react';
|
|
2
|
-
import { type PlatformAdapter, type TourI18n, type TourOverlayProps, type TourTheme, type TourTooltipProps } from '../../shared';
|
|
2
|
+
import { type PlatformAdapter, type TourEndCallback, type TourI18n, type TourOverlayProps, type TourTheme, type TourTooltipProps } from '../../shared';
|
|
3
3
|
export type TourProviderProps = {
|
|
4
4
|
readonly children: ReactNode;
|
|
5
5
|
readonly TooltipComponent?: ComponentType<TourTooltipProps>;
|
|
6
6
|
readonly OverlayComponent?: ComponentType<TourOverlayProps>;
|
|
7
|
-
readonly onTourEnd?:
|
|
7
|
+
readonly onTourEnd?: TourEndCallback;
|
|
8
8
|
readonly theme?: TourTheme;
|
|
9
9
|
readonly platform?: PlatformAdapter;
|
|
10
10
|
readonly i18n?: TourI18n;
|
package/dist/react-native.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { TourProvider, type TourProviderProps } from './react-native-platform';
|
|
|
2
2
|
export { TourContext, useTour } from './shared';
|
|
3
3
|
export { useTourTarget } from './react-native-platform';
|
|
4
4
|
export { TourOverlay, TourTooltip } from './react-native-platform';
|
|
5
|
-
export type { TourStep, TourContextType, TourTooltipProps, TourOverlayProps, TourTheme, TourI18n } from './shared';
|
|
5
|
+
export type { TourStep, TourContextType, TourTooltipProps, TourOverlayProps, TourTheme, TourI18n, TourEndReason, TourEndInfo, TourEndCallback, StartTourOptions, } from './shared';
|
|
6
6
|
export type { Rect, TourTarget } from './shared';
|
|
7
7
|
export { calculateTooltipPosition } from './shared';
|
|
8
8
|
export { nativePlatformAdapter, targetRegistry } from './react-native-platform';
|
package/dist/react-native.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-native.js","sourceRoot":"","sources":["../src/react-native.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,YAAY,EAAyB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AAItD,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"react-native.js","sourceRoot":"","sources":["../src/react-native.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,YAAY,EAAyB,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AAItD,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAqBjE,OAAO,EAAC,wBAAwB,EAAC,MAAM,UAAU,CAAC;AAIlD,OAAO,EAAC,qBAAqB,EAAE,cAAc,EAAC,MAAM,yBAAyB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
+
import { getTruncatedDots, DOTS_CONTAINER_WIDTH, DOT_SIZE, DOT_GAP } from '../../shared/utils';
|
|
4
5
|
const defaultI18n = {
|
|
5
6
|
nextLabel: 'Next',
|
|
6
7
|
prevLabel: 'Back',
|
|
@@ -98,15 +99,19 @@ function TourTooltipComponent({ title, content, currentStep, totalSteps, positio
|
|
|
98
99
|
},
|
|
99
100
|
dotsContainer: {
|
|
100
101
|
display: 'flex',
|
|
101
|
-
gap:
|
|
102
|
+
gap: `${DOT_GAP}px`,
|
|
103
|
+
width: `${DOTS_CONTAINER_WIDTH}px`,
|
|
104
|
+
justifyContent: 'center',
|
|
105
|
+
alignItems: 'center',
|
|
102
106
|
},
|
|
103
107
|
dot: {
|
|
104
|
-
width:
|
|
105
|
-
height:
|
|
108
|
+
width: `${DOT_SIZE}px`,
|
|
109
|
+
height: `${DOT_SIZE}px`,
|
|
106
110
|
borderRadius: '50%',
|
|
107
111
|
border: 'none',
|
|
108
112
|
cursor: 'pointer',
|
|
109
113
|
padding: 0,
|
|
114
|
+
flexShrink: 0,
|
|
110
115
|
},
|
|
111
116
|
dotActive: {
|
|
112
117
|
backgroundColor: theme.primaryColor,
|
|
@@ -114,6 +119,21 @@ function TourTooltipComponent({ title, content, currentStep, totalSteps, positio
|
|
|
114
119
|
dotInactive: {
|
|
115
120
|
backgroundColor: '#d1d5db',
|
|
116
121
|
},
|
|
122
|
+
ellipsis: {
|
|
123
|
+
width: `${DOT_SIZE}px`,
|
|
124
|
+
height: `${DOT_SIZE}px`,
|
|
125
|
+
display: 'flex',
|
|
126
|
+
alignItems: 'center',
|
|
127
|
+
justifyContent: 'center',
|
|
128
|
+
gap: '2px',
|
|
129
|
+
flexShrink: 0,
|
|
130
|
+
},
|
|
131
|
+
ellipsisDot: {
|
|
132
|
+
width: '3px',
|
|
133
|
+
height: '3px',
|
|
134
|
+
borderRadius: '50%',
|
|
135
|
+
backgroundColor: '#d1d5db',
|
|
136
|
+
},
|
|
117
137
|
};
|
|
118
138
|
return (_jsx("div", { ref: ref, style: {
|
|
119
139
|
...styles.container,
|
|
@@ -124,12 +144,12 @@ function TourTooltipComponent({ title, content, currentStep, totalSteps, positio
|
|
|
124
144
|
}, children: _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("span", { style: styles.stepTag, children: stepCounterTemplate.replace('{current}', String(currentStep + 1)).replace('{total}', String(totalSteps)) }), _jsx("button", { type: "button", style: styles.closeButton, "aria-label": closeAriaLabel, onClick: onClose, children: "\u2715" })] }), _jsxs("div", { style: styles.body, children: [_jsx("h3", { style: styles.title, children: title }), _jsx("p", { style: styles.content, children: content })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { type: "button", style: {
|
|
125
145
|
...styles.navButton,
|
|
126
146
|
...(isFirstStep ? styles.navButtonDisabled : {}),
|
|
127
|
-
}, disabled: isFirstStep, onClick: onPrev, children: prevLabel }), _jsx("div", { style: styles.dotsContainer, children:
|
|
147
|
+
}, disabled: isFirstStep, onClick: onPrev, children: prevLabel }), _jsx("div", { style: styles.dotsContainer, children: getTruncatedDots(currentStep, totalSteps).map((item, i) => item.type === 'ellipsis' ? (_jsxs("span", { style: styles.ellipsis, children: [_jsx("span", { style: styles.ellipsisDot }), _jsx("span", { style: styles.ellipsisDot })] }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", style: {
|
|
128
148
|
...styles.dot,
|
|
129
|
-
...(index === currentStep ? styles.dotActive : styles.dotInactive),
|
|
130
|
-
}, "aria-label": dotAriaLabelTemplate.replace('{step}', String(index + 1)), onClick: () => {
|
|
131
|
-
onGoToStep(index);
|
|
132
|
-
} }, `step-${index}`))) }), _jsx("button", { type: "button", style: styles.nextButton, onClick: onNext, children: isLastStep ? finishLabel : nextLabel })] })] }) }));
|
|
149
|
+
...(item.index === currentStep ? styles.dotActive : styles.dotInactive),
|
|
150
|
+
}, "aria-label": dotAriaLabelTemplate.replace('{step}', String(item.index + 1)), onClick: () => {
|
|
151
|
+
onGoToStep(item.index);
|
|
152
|
+
} }, `step-${item.index}`))) }), _jsx("button", { type: "button", style: styles.nextButton, onClick: onNext, children: isLastStep ? finishLabel : nextLabel })] })] }) }));
|
|
133
153
|
}
|
|
134
154
|
export const TourTooltip = forwardRef(TourTooltipComponent);
|
|
135
155
|
//# sourceMappingURL=tour-tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-tooltip.js","sourceRoot":"","sources":["../../../src/react-platform/components/tour-tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAA8B,UAAU,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tour-tooltip.js","sourceRoot":"","sources":["../../../src/react-platform/components/tour-tooltip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,23 +23,34 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
23
23
|
const tooltipRef = useRef(null);
|
|
24
24
|
const [positionKey, setPositionKey] = useState(0);
|
|
25
25
|
const [isMounted, setIsMounted] = useState(false);
|
|
26
|
+
const tourOnEndRef = useRef(undefined);
|
|
26
27
|
const Tooltip = TooltipComponent ?? DefaultTourTooltip;
|
|
27
28
|
const Overlay = OverlayComponent ?? DefaultTourOverlay;
|
|
28
29
|
useEffect(() => {
|
|
29
30
|
setIsMounted(true);
|
|
30
31
|
}, []);
|
|
31
|
-
const startTour = useCallback((tourSteps, tourId) => {
|
|
32
|
+
const startTour = useCallback((tourSteps, tourId, options) => {
|
|
32
33
|
if (tourSteps.length > 0) {
|
|
33
34
|
setSteps(tourSteps);
|
|
34
35
|
setCurrentStep(0);
|
|
35
36
|
setCurrentTourId(tourId);
|
|
37
|
+
tourOnEndRef.current = options?.onTourEnd;
|
|
36
38
|
setIsActive(true);
|
|
37
39
|
}
|
|
38
40
|
}, []);
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
const finishTour = useCallback((reason) => {
|
|
42
|
+
const stepAtEnd = steps[currentStep] ?? steps.at(-1);
|
|
43
|
+
if (stepAtEnd) {
|
|
44
|
+
const info = {
|
|
45
|
+
reason,
|
|
46
|
+
stepIndex: currentStep,
|
|
47
|
+
step: stepAtEnd,
|
|
48
|
+
totalSteps: steps.length,
|
|
49
|
+
};
|
|
50
|
+
tourOnEndRef.current?.(currentTourId, info);
|
|
51
|
+
onTourEnd?.(currentTourId, info);
|
|
42
52
|
}
|
|
53
|
+
tourOnEndRef.current = undefined;
|
|
43
54
|
setIsActive(false);
|
|
44
55
|
setCurrentStep(0);
|
|
45
56
|
setSteps([]);
|
|
@@ -47,15 +58,18 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
47
58
|
setHighlightRect(undefined);
|
|
48
59
|
setTooltipPosition({ top: 0, left: 0 });
|
|
49
60
|
setIsPositioned(false);
|
|
50
|
-
}, [currentTourId, onTourEnd]);
|
|
61
|
+
}, [currentTourId, currentStep, steps, onTourEnd]);
|
|
62
|
+
const endTour = useCallback(() => {
|
|
63
|
+
finishTour('closed');
|
|
64
|
+
}, [finishTour]);
|
|
51
65
|
const nextStep = useCallback(() => {
|
|
52
66
|
if (currentStep < steps.length - 1) {
|
|
53
67
|
setCurrentStep((previous) => previous + 1);
|
|
54
68
|
}
|
|
55
69
|
else {
|
|
56
|
-
|
|
70
|
+
finishTour('completed');
|
|
57
71
|
}
|
|
58
|
-
}, [currentStep, steps.length,
|
|
72
|
+
}, [currentStep, steps.length, finishTour]);
|
|
59
73
|
const previousStep = useCallback(() => {
|
|
60
74
|
if (currentStep > 0) {
|
|
61
75
|
setCurrentStep((previous) => previous - 1);
|
|
@@ -81,7 +95,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
81
95
|
setCurrentStep((previous) => previous + 1);
|
|
82
96
|
}
|
|
83
97
|
else {
|
|
84
|
-
|
|
98
|
+
finishTour('target-missing');
|
|
85
99
|
}
|
|
86
100
|
return;
|
|
87
101
|
}
|
|
@@ -93,7 +107,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
93
107
|
setTooltipPosition(position);
|
|
94
108
|
setIsPositioned(true);
|
|
95
109
|
})();
|
|
96
|
-
}, [isActive, currentStep, steps,
|
|
110
|
+
}, [isActive, currentStep, steps, finishTour, platform]);
|
|
97
111
|
useEffect(() => {
|
|
98
112
|
if (!isActive || steps.length === 0) {
|
|
99
113
|
return;
|
|
@@ -115,7 +129,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
115
129
|
setCurrentStep((previous) => previous + 1);
|
|
116
130
|
}
|
|
117
131
|
else {
|
|
118
|
-
|
|
132
|
+
finishTour('target-missing');
|
|
119
133
|
}
|
|
120
134
|
return;
|
|
121
135
|
}
|
|
@@ -126,7 +140,7 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
126
140
|
}, initialPositionDelayMs);
|
|
127
141
|
};
|
|
128
142
|
void runStep();
|
|
129
|
-
}, [isActive, currentStep, steps,
|
|
143
|
+
}, [isActive, currentStep, steps, finishTour, platform]);
|
|
130
144
|
useEffect(() => {
|
|
131
145
|
if (!isActive || !highlightRect || steps.length === 0) {
|
|
132
146
|
return;
|
|
@@ -173,11 +187,13 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
173
187
|
return;
|
|
174
188
|
}
|
|
175
189
|
return platform.subscribeToKeyboard({
|
|
176
|
-
onEscape
|
|
190
|
+
onEscape() {
|
|
191
|
+
finishTour('escape');
|
|
192
|
+
},
|
|
177
193
|
onNext: nextStep,
|
|
178
194
|
onPrev: previousStep,
|
|
179
195
|
});
|
|
180
|
-
}, [isActive,
|
|
196
|
+
}, [isActive, finishTour, nextStep, previousStep, platform]);
|
|
181
197
|
useEffect(() => {
|
|
182
198
|
if (!isActive) {
|
|
183
199
|
return;
|
|
@@ -197,7 +213,9 @@ export function TourProvider({ children, TooltipComponent, OverlayComponent, onT
|
|
|
197
213
|
goToStep,
|
|
198
214
|
}), [isActive, currentStep, steps, currentTourId, startTour, endTour, nextStep, previousStep, goToStep]);
|
|
199
215
|
return (_jsxs(TourContext, { value: contextValue, children: [children, isActive && highlightRect && isMounted
|
|
200
|
-
? createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { highlightRect: highlightRect, theme: resolvedTheme, onClose:
|
|
216
|
+
? createPortal(_jsxs(_Fragment, { children: [_jsx(Overlay, { highlightRect: highlightRect, theme: resolvedTheme, onClose: () => {
|
|
217
|
+
finishTour('blur');
|
|
218
|
+
} }), currentTourStep ? (_jsx(Tooltip, { ref: tooltipRef, content: currentTourStep.content, currentStep: currentStep, i18n: i18n, isPositioned: isPositioned, position: tooltipPosition, theme: resolvedTheme, title: currentTourStep.title, totalSteps: steps.length, onClose: endTour, onGoToStep: goToStep, onNext: nextStep, onPrev: previousStep })) : null] }), document.body)
|
|
201
219
|
: null] }));
|
|
202
220
|
}
|
|
203
221
|
//# sourceMappingURL=tour-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-provider.js","sourceRoot":"","sources":["../../src/react-platform/tour-provider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAClF,OAAO,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AACvC,OAAO,
|
|
1
|
+
{"version":3,"file":"tour-provider.js","sourceRoot":"","sources":["../../src/react-platform/tour-provider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type ComponentType, type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from 'react';
|
|
2
|
-
import { type PlatformAdapter, type TourI18n, type TourOverlayProps, type TourTheme, type TourTooltipProps } from '../../shared';
|
|
2
|
+
import { type PlatformAdapter, type TourEndCallback, type TourI18n, type TourOverlayProps, type TourTheme, type TourTooltipProps } from '../../shared';
|
|
3
3
|
export type TourProviderProps = {
|
|
4
4
|
readonly children: ReactNode;
|
|
5
5
|
readonly TooltipComponent?: ForwardRefExoticComponent<TourTooltipProps & RefAttributes<HTMLDivElement>>;
|
|
6
6
|
readonly OverlayComponent?: ComponentType<TourOverlayProps>;
|
|
7
|
-
readonly onTourEnd?:
|
|
7
|
+
readonly onTourEnd?: TourEndCallback;
|
|
8
8
|
readonly theme?: TourTheme;
|
|
9
9
|
readonly platform?: PlatformAdapter;
|
|
10
10
|
readonly i18n?: TourI18n;
|
package/dist/react.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { TourProvider, type TourProviderProps } from './react-platform';
|
|
2
2
|
export { TourContext, useTour } from './shared';
|
|
3
3
|
export { TourOverlay, TourTooltip } from './react-platform';
|
|
4
|
-
export type { TourStep, TourContextType, TourTooltipProps, TourOverlayProps, TourTheme, TourI18n } from './shared';
|
|
4
|
+
export type { TourStep, TourContextType, TourTooltipProps, TourOverlayProps, TourTheme, TourI18n, TourEndReason, TourEndInfo, TourEndCallback, StartTourOptions, } from './shared';
|
|
5
5
|
export type { Rect, TourTarget } from './shared';
|
|
6
6
|
export { calculateTooltipPosition } from './shared';
|
|
7
7
|
export { findVisibleElement } from './react-platform';
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,YAAY,EAAyB,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAI9C,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,YAAY,EAAyB,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,UAAU,CAAC;AAI9C,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAqB1D,OAAO,EAAC,wBAAwB,EAAC,MAAM,UAAU,CAAC;AAElD,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAIpD,OAAO,EAAC,kBAAkB,EAAC,MAAM,kBAAkB,CAAC"}
|
package/dist/shared/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type { Rect, TourTarget, Placement, PlatformAdapter, KeyboardHandlers, TourTheme, TourStep, TourContextType, TourOverlayProps, TourTooltipProps, TourI18n, } from './types';
|
|
1
|
+
export type { Rect, TourTarget, Placement, PlatformAdapter, KeyboardHandlers, TourTheme, TourStep, TourContextType, TourOverlayProps, TourTooltipProps, TourI18n, TourEndReason, TourEndInfo, TourEndCallback, StartTourOptions, } from './types';
|
|
2
2
|
export { defaultTheme, resolveTheme } from './types';
|
|
3
3
|
export { TourContext, defaultTourContext } from './context';
|
|
4
4
|
export { useTour } from './hooks';
|
package/dist/shared/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAInD,OAAO,EAAC,WAAW,EAAE,kBAAkB,EAAC,MAAM,WAAW,CAAC;AAI1D,OAAO,EAAC,OAAO,EAAC,MAAM,SAAS,CAAC;AAIhC,OAAO,EAAC,wBAAwB,EAAC,MAAM,SAAS,CAAC"}
|
|
@@ -7,3 +7,4 @@ export type { TourContextType } from './tour-context.type';
|
|
|
7
7
|
export type { TourOverlayProps } from './tour-overlay-props.type';
|
|
8
8
|
export type { TourTooltipProps } from './tour-tooltip-props.type';
|
|
9
9
|
export type { TourI18n } from './tour-i18n.type';
|
|
10
|
+
export type { TourEndReason, TourEndInfo, TourEndCallback, StartTourOptions } from './tour-end-info.type';
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { type StartTourOptions } from './tour-end-info.type';
|
|
1
2
|
import { type TourStep } from './tour-step.type';
|
|
2
3
|
export type TourContextType = {
|
|
3
4
|
isActive: boolean;
|
|
4
5
|
currentStep: number;
|
|
5
6
|
steps: TourStep[];
|
|
6
7
|
currentTourId: string | undefined;
|
|
7
|
-
startTour: (steps: TourStep[], tourId?: string) => void;
|
|
8
|
+
startTour: (steps: TourStep[], tourId?: string, options?: StartTourOptions) => void;
|
|
8
9
|
endTour: () => void;
|
|
9
10
|
nextStep: () => void;
|
|
10
11
|
prevStep: () => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type TourStep } from './tour-step.type';
|
|
2
|
+
export type TourEndReason = 'completed' | 'closed' | 'blur' | 'escape' | 'target-missing';
|
|
3
|
+
export type TourEndInfo = {
|
|
4
|
+
readonly reason: TourEndReason;
|
|
5
|
+
readonly stepIndex: number;
|
|
6
|
+
readonly step: TourStep;
|
|
7
|
+
readonly totalSteps: number;
|
|
8
|
+
};
|
|
9
|
+
export type TourEndCallback = (tourId: string | undefined, info: TourEndInfo) => void;
|
|
10
|
+
export type StartTourOptions = {
|
|
11
|
+
readonly onTourEnd?: TourEndCallback;
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tour-end-info.type.js","sourceRoot":"","sources":["../../../src/shared/types/tour-end-info.type.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const MAX_VISIBLE_DOTS = 7;
|
|
2
|
+
export declare const DOT_SIZE = 8;
|
|
3
|
+
export declare const DOT_GAP = 6;
|
|
4
|
+
export declare const DOTS_CONTAINER_WIDTH: number;
|
|
5
|
+
export type DotItem = {
|
|
6
|
+
type: 'dot';
|
|
7
|
+
index: number;
|
|
8
|
+
} | {
|
|
9
|
+
type: 'ellipsis';
|
|
10
|
+
};
|
|
11
|
+
export declare function getTruncatedDots(currentStep: number, totalSteps: number): DotItem[];
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export const MAX_VISIBLE_DOTS = 7;
|
|
2
|
+
export const DOT_SIZE = 8;
|
|
3
|
+
export const DOT_GAP = 6;
|
|
4
|
+
export const DOTS_CONTAINER_WIDTH = MAX_VISIBLE_DOTS * DOT_SIZE + (MAX_VISIBLE_DOTS - 1) * DOT_GAP;
|
|
5
|
+
export function getTruncatedDots(currentStep, totalSteps) {
|
|
6
|
+
if (totalSteps <= MAX_VISIBLE_DOTS) {
|
|
7
|
+
return Array.from({ length: totalSteps }, (_, i) => ({ type: 'dot', index: i }));
|
|
8
|
+
}
|
|
9
|
+
const dots = [];
|
|
10
|
+
const indices = new Set([0, totalSteps - 1, currentStep]);
|
|
11
|
+
for (let offset = 1; indices.size < MAX_VISIBLE_DOTS - countGaps(indices); offset++) {
|
|
12
|
+
if (currentStep - offset >= 0)
|
|
13
|
+
indices.add(currentStep - offset);
|
|
14
|
+
if (currentStep + offset < totalSteps)
|
|
15
|
+
indices.add(currentStep + offset);
|
|
16
|
+
if (offset > totalSteps)
|
|
17
|
+
break;
|
|
18
|
+
}
|
|
19
|
+
const sorted = [...indices].toSorted((a, b) => a - b);
|
|
20
|
+
for (let i = 0; i < sorted.length; i++) {
|
|
21
|
+
if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
|
|
22
|
+
dots.push({ type: 'ellipsis' });
|
|
23
|
+
}
|
|
24
|
+
dots.push({ type: 'dot', index: sorted[i] });
|
|
25
|
+
}
|
|
26
|
+
return dots;
|
|
27
|
+
}
|
|
28
|
+
function countGaps(indices) {
|
|
29
|
+
const sorted = [...indices].toSorted((a, b) => a - b);
|
|
30
|
+
let gaps = 0;
|
|
31
|
+
for (let i = 1; i < sorted.length; i++) {
|
|
32
|
+
if (sorted[i] - sorted[i - 1] > 1)
|
|
33
|
+
gaps++;
|
|
34
|
+
}
|
|
35
|
+
return gaps;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=get-truncated-dots.util.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-truncated-dots.util.js","sourceRoot":"","sources":["../../../src/shared/utils/get-truncated-dots.util.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAClC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC;AAC1B,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC;AAInG,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,UAAkB;IACtE,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,UAAU,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAc,EAAE,KAAK,EAAE,CAAC,EAAC,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,MAAM,IAAI,GAAc,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAS,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IAIlE,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,OAAO,CAAC,IAAI,GAAG,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;QACpF,IAAI,WAAW,GAAG,MAAM,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QACjE,IAAI,WAAW,GAAG,MAAM,GAAG,UAAU;YAAE,OAAO,CAAC,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QACzE,IAAI,MAAM,GAAG,UAAU;YAAE,MAAM;IACjC,CAAC;IAED,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEtD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,SAAS,CAAC,OAAoB;IACrC,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;YAAE,IAAI,EAAE,CAAC;IAC5C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shared/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/shared/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,gBAAgB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,OAAO,EAAE,oBAAoB,EAAC,MAAM,2BAA2B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@robertlinde/react-tour-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Cross-platform guided tour library for React and React Native. Build interactive onboarding experiences with customizable tooltips, smart positioning, cross-page navigation, and async step actions. Fully themeable with TypeScript support.",
|
|
6
6
|
"author": "Robert Linde",
|
|
@@ -69,9 +69,9 @@
|
|
|
69
69
|
"@types/react-native": "0.73.0",
|
|
70
70
|
"husky": "9.1.7",
|
|
71
71
|
"lint-staged": "16.4.0",
|
|
72
|
-
"prettier": "3.8.
|
|
73
|
-
"react": "19.2.
|
|
74
|
-
"react-dom": "19.2.
|
|
72
|
+
"prettier": "3.8.2",
|
|
73
|
+
"react": "19.2.5",
|
|
74
|
+
"react-dom": "19.2.5",
|
|
75
75
|
"typescript": "6.0.2",
|
|
76
76
|
"xo": "2.0.2"
|
|
77
77
|
},
|