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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 13x 13x 13x 13x 1x 13x 1x 1x 1x 1x 13x | import { useState } from "react";
import Joyride, { STATUS } from "react-joyride";
import { Button, Icon } from "@canonical/react-components";
import TourStep from "./TourStep";
import type { CallBackProps } from "react-joyride";
type Props = {
steps: {
target: string;
title: string;
content: React.JSX.Element;
disableBeacon?: boolean;
}[];
};
function Tour({ steps }: Props): React.JSX.Element {
const firstVisit = !localStorage.getItem("tourSeen");
const [run, setRun] = useState<boolean>(firstVisit);
const handleClickStart = (): void => {
setRun(true);
};
if (firstVisit) {
localStorage.setItem("tourSeen", "true");
}
const handleJoyrideCallback = (data: CallBackProps): void => {
const { status, action } = data;
Iif (action === "close") {
setRun(false);
}
const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
Iif (finishedStatuses.includes(status)) {
setRun(false);
}
};
return (
<>
<Button
type="button"
onClick={handleClickStart}
style={{
position: "fixed",
bottom: "1rem",
right: "2rem",
zIndex: 100,
}}
>
<Icon name="question" />
<span className="u-off-screen">Start tour</span>
</Button>
<Joyride
run={run}
callback={handleJoyrideCallback}
tooltipComponent={TourStep}
continuous={true}
disableCloseOnEsc={true}
disableOverlayClose={true}
scrollOffset={80}
showProgress={true}
steps={steps}
/>
</>
);
}
export default Tour;
|