File size: 3,549 Bytes
3223525 342d4d9 3223525 77c7af4 3223525 77c7af4 3223525 342d4d9 3223525 342d4d9 77c7af4 3223525 a231257 342d4d9 a231257 3223525 342d4d9 3223525 6e4a3d0 7cbaa45 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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
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 (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,
});
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>
);
}
|