File size: 2,872 Bytes
3223525 342d4d9 3223525 77c7af4 3223525 77c7af4 3223525 342d4d9 3223525 342d4d9 77c7af4 3223525 a231257 342d4d9 a231257 3223525 342d4d9 3223525 6e4a3d0 342d4d9 6e4a3d0 342d4d9 3223525 342d4d9 3223525 342d4d9 3223525 77c7af4 3223525 77c7af4 3223525 |
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 |
import type { Config, DriveStep } from "driver.js";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { useState } from "react";
type CodeSampleProps = {
heading?: string;
config?: Config;
highlight?: DriveStep;
tour?: DriveStep[];
id?: string;
className?: string;
children?: any;
buttonText?: string;
};
function removeDummyElement() {
const el = document.querySelector(".dynamic-el");
if (el) {
el.remove();
}
}
function mountDummyElement() {
const newDiv = (document.querySelector(".dynamic-el") || document.createElement("div")) as HTMLElement;
newDiv.innerHTML = "This is a new Element";
newDiv.style.display = "block";
newDiv.style.padding = "20px";
newDiv.style.backgroundColor = "black";
newDiv.style.color = "white";
newDiv.style.fontSize = "14px";
newDiv.style.position = "fixed";
newDiv.style.top = `${Math.random() * (500 - 30) + 30}px`;
newDiv.style.left = `${Math.random() * (500 - 30) + 30}px`;
newDiv.className = "dynamic-el";
document.body.appendChild(newDiv);
}
export function CodeSample(props: CodeSampleProps) {
const [driverObj, setDriverObj] = useState<any>(null);
const { heading, id, children, buttonText = "Show me an Example", className, config, highlight, tour } = props;
function onClick() {
if (highlight) {
const driverObj = driver({
...config,
});
driverObj.highlight(highlight);
setDriverObj(driverObj);
} else if (tour) {
if (id === "confirm-destroy") {
config!.onDestroyStarted = () => {
if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
driverObj.destroy();
}
};
}
if (tour?.[2]?.popover?.title === "Next Step is Async") {
tour[2].popover.onNextClick = () => {
mountDummyElement();
driverObj.moveNext();
};
if (tour?.[3]?.element === ".dynamic-el") {
tour[3].onDeselected = () => {
removeDummyElement();
};
// @ts-ignore
tour[4].popover.onPrevClick = () => {
mountDummyElement();
driverObj.movePrevious();
};
// @ts-ignore
tour[3].popover.onPrevClick = () => {
removeDummyElement();
driverObj.movePrevious();
};
}
}
const driverObj = driver({
...config,
steps: tour,
});
driverObj.drive();
setDriverObj(driverObj);
}
}
return (
<div id={id} className={className}>
{heading && <p className="text-lg -mt-0 font-medium text-black -mb-3 rounded-md">{heading}</p>}
{children && <div className="-mb-4">{children}</div>}
<button onClick={onClick} className="w-full rounded-md bg-black p-2 text-white">
{buttonText}
</button>
</div>
);
}
|