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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 | 21x 21x 21x 21x 21x 21x 7x 7x 21x 14x 21x 21x 21x 21x 21x 21x 17x 17x 17x 12x 12x 21x 17x 17x 17x 17x 17x 12x 12x 12x 21x 2x 21x 2x 21x 3x 3x 21x 4x 4x 21x 21x 3x 3x 1x 2x 21x 21x 16x 21x | import { useState, useRef, useEffect } from "react";
import debounce from "../../libs/debounce";
import TourStepCard from "./tourStepCard";
import TourOverlayMask from "./tourOverlayMask";
import { tourFinished, tourSkipped } from "./metricsEvents";
import { getMaskFromElements, prepareSteps } from "./helpers";
import {
SCROLL_MARGIN,
SCROLL_OFFSET_TOP,
SCROLL_OFFSET_BOTTOM,
} from "./constants";
import { animateScrollTo } from "../../public/scroll-to";
import type { Step } from "../listing/types";
export default function TourOverlay({
steps,
hideTour,
currentStepIndex = 0,
}: {
steps: Step[];
hideTour: () => void;
currentStepIndex?: number;
}) {
steps = prepareSteps(steps);
let setCurrentStepIndex: Function;
[currentStepIndex, setCurrentStepIndex] = useState(currentStepIndex);
const step = steps[currentStepIndex];
// when current step changes, scroll step element into view
useEffect(
() => {
const scrollTop =
window.pageYOffset || document.documentElement.scrollTop;
// when tooltip is on top of the mask, scroll into view aligning to bottom
if (step.position && step.position.indexOf("top") === 0) {
// scroll element into view aligning it to bottom
// only if it's below the bottom border of the screen
// or it's in the top half of the screen
Eif (
mask.bottom > scrollTop + window.innerHeight ||
mask.top < SCROLL_MARGIN + scrollTop
) {
animateScrollTo(
// we scroll relative to top of the screen, but we want to stick to bottom
// so we need to substract the window height
mask.bottom - window.innerHeight,
-SCROLL_OFFSET_BOTTOM,
);
}
}
// when tooltip is on the bottom of the mask, scroll aligning to top
if (step.position && step.position.indexOf("bottom") === 0) {
// scroll element into view, but only if it's higher on page than top offset
// or it is in the bottom half of screen
Iif (
mask.top < SCROLL_OFFSET_TOP + scrollTop ||
mask.bottom > SCROLL_MARGIN + scrollTop
) {
animateScrollTo(mask.top, SCROLL_OFFSET_TOP);
}
}
},
[currentStepIndex], // refresh effect on step changes, to scroll to correct step
);
const overlayEl = useRef(null);
const mask = getMaskFromElements(step.elements || []);
// rerender on resize or scroll
// it is an unusual use of useState to force rerender, but on resize or scroll
// the state of component doesn't change, it's the position of elements
// in DOM that changes and component needs to rerender to adapt
const [, forceUpdate] = useState<object>();
const rerender = () => forceUpdate({});
const [isResizing, setIsResizing] = useState(false);
// rerender after scroll (to adjust to fixed elements that might have moved)
useEffect(
() => {
const afterScroll = debounce(() => rerender(), 200);
window.addEventListener("scroll", afterScroll);
return () => {
afterScroll.clear();
window.removeEventListener("scroll", afterScroll);
};
},
[], // don't refresh the effect on every render
);
// rerender after resize (to adjust to new positions of elements)
// and hide mask during resize to avoid misalign of mask and tooltip
useEffect(
() => {
const onResize = () => {
setIsResizing(true);
};
const afterResize = debounce(() => {
setIsResizing(false);
rerender();
}, 1000);
window.addEventListener("resize", onResize);
window.addEventListener("resize", afterResize);
return () => {
afterResize.clear();
window.removeEventListener("resize", onResize);
window.removeEventListener("resize", afterResize);
};
},
[], // don't refresh the effect on every render
);
const onNextClick = () =>
setCurrentStepIndex((currentStepIndex + 1) % steps.length);
const onPrevClick = () =>
setCurrentStepIndex((currentStepIndex - 1) % steps.length);
const onFinishClick = () => {
tourFinished(step.id);
hideTour();
};
const onSkipClick = () => {
tourSkipped(step.id);
hideTour();
};
// close tour on ESC
// treat as 'finished' on last step and as 'skipped' on any other step
useEffect(
() => {
const escClick = (event: { keyCode: number }) => {
Eif (event.keyCode === 27) {
if (currentStepIndex === steps.length - 1) {
onFinishClick();
} else {
onSkipClick();
}
}
};
window.addEventListener("keyup", escClick);
return () => {
window.removeEventListener("keyup", escClick);
};
},
[currentStepIndex], // refresh effect when step changes, to pass correct step id into skip metrics
);
return (
<div className="p-tour-overlay" ref={overlayEl}>
<TourOverlayMask mask={isResizing ? null : mask} />
<TourStepCard
steps={steps}
currentStepIndex={currentStepIndex}
mask={mask}
onFinishClick={onFinishClick}
onSkipClick={onSkipClick}
onNextClick={onNextClick}
onPrevClick={onPrevClick}
/>
</div>
);
}
|