Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 15x 13x 9x 15x 15x 15x 15x 15x 11x 15x 4x 15x | import { useState, useEffect, ReactNode } from "react";
import TourOverlay from "./tourOverlay";
import TourBar from "./tourBar";
import { tourStartedAutomatically } from "./metricsEvents";
import type { Step } from "../listing/types";
type Props = {
steps: Step[];
startTour: boolean;
onTourStarted: () => void;
onTourClosed: () => void;
};
export default function Tour({
steps,
onTourStarted,
onTourClosed,
startTour = false,
}: Props): ReactNode {
// send metrics event if tour started automatically
useEffect(() => {
if (startTour) {
tourStartedAutomatically();
}
}, [startTour]);
const [isTourOpen, setIsTourOpen] = useState(startTour);
const showTour = () => setIsTourOpen(true);
const hideTour = () => setIsTourOpen(false);
// trigger callbacks when tour is started or finished
useEffect(() => {
if (isTourOpen && onTourStarted) {
onTourStarted();
}
if (!isTourOpen && onTourClosed) {
onTourClosed();
}
}, [isTourOpen]);
return (
<>
<TourBar showTour={showTour} />
{isTourOpen && <TourOverlay steps={steps} hideTour={hideTour} />}
</>
);
}
|