File size: 3,868 Bytes
4b04f2c 3223525 77c7af4 3223525 77c7af4 3223525 a855543 342d4d9 a855543 342d4d9 4b04f2c 425e02a 4b04f2c 425e02a 4b04f2c 3223525 77c7af4 3223525 4b04f2c 2dda34a 4b04f2c 3223525 a231257 342d4d9 a231257 342d4d9 4b04f2c 3223525 6e4a3d0 7cbaa45 342d4d9 6e4a3d0 342d4d9 3223525 342d4d9 4b04f2c 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 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 |
import type { Config, DriveStep, PopoverDOM } from "driver.js";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
type CodeSampleProps = {
heading?: string;
config?: Config;
highlight?: DriveStep;
tour?: DriveStep[];
id?: string;
className?: string;
children?: any;
buttonText?: string;
};
export function removeDummyElement() {
const el = document.querySelector(".dynamic-el");
if (el) {
el.remove();
}
}
export 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);
}
function attachFirstButton(popover: PopoverDOM) {
const firstButton = document.createElement("button");
firstButton.innerText = "Go to First";
popover.footerButtons.appendChild(firstButton);
firstButton.addEventListener("click", () => {
window.driverObj.drive(0);
});
}
export function CodeSample(props: CodeSampleProps) {
const { heading, id, children, buttonText = "Show me an Example", className, config, highlight, tour } = props;
if (id === "demo-hook-theme") {
config!.onPopoverRender = attachFirstButton;
}
function onClick() {
if (highlight) {
const driverObj = driver({
...config,
});
window.driverObj = driverObj;
driverObj.highlight(highlight);
} else if (tour) {
if (id === "confirm-destroy") {
config!.onDestroyStarted = () => {
if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
driverObj.destroy();
}
};
}
if (id === "logger-events") {
config!.onNextClick = () => {
console.log("next clicked");
};
config!.onNextClick = () => {
console.log("Next Button Clicked");
// Implement your own functionality here
driverObj.moveNext();
};
config!.onPrevClick = () => {
console.log("Previous Button Clicked");
// Implement your own functionality here
driverObj.movePrevious();
};
config!.onCloseClick = () => {
console.log("Close Button Clicked");
// Implement your own functionality here
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,
});
window.driverObj = driverObj;
driverObj.drive();
}
}
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>
);
}
|