Merge pull request #58 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/tour/TourWrapper.tsx

@@ -9,14 +9,40 @@ import { useCallback, useMemo, useRef, useState } from "react"
 import { showErrorFlag, showInformationFlag } from "../ToastFlag"
 import { flushSync } from "react-dom"
 
-export abstract class TourStep {
-	step: Step
-
-	constructor() {
-		this.step = {
-			content: <>Step should be overwritten.</>,
-			target: "body",
-		}
+export type TourStepProps = Step
+
+export class TourStep {
+	private _step: Step
+	private contentClassname = "text-start text-base" as const
+
+	constructor({
+		step,
+		onPrepare,
+		onInit,
+		onExit,
+	}: {
+		step: TourStepProps
+		onPrepare?: () => void
+		onInit?: () => void
+		onExit?: () => void
+	}) {
+		const content = (
+			<div className={this.contentClassname}>{step.content}</div>
+		)
+		this._step = { ...step, content }
+		this.onInit = onInit
+		this.onPrepare = onPrepare
+		this.onExit = onExit
+	}
+
+	set step(step: Step) {
+		const content = (
+			<div className={this.contentClassname}>{step.content}</div>
+		)
+		this._step = { ...step, content }
+	}
+	get step(): Step {
+		return this._step
 	}
 
 	onInit?(): void
@@ -113,7 +139,6 @@ export function Tour({
 	const callback = useCallback(
 		(joyrideState: CallBackProps) => {
 			const { action, index, lifecycle, type, step } = joyrideState
-			console.log("ACTION", action, "TYPE", type, "INDEX", index)
 
 			switch (type) {
 				case "tour:start":

library/src/components/tour/index.ts

@@ -1,3 +1,8 @@
-import { Tour, TourStep, type TourProps } from "./TourWrapper"
+import {
+	Tour,
+	TourStep,
+	type TourProps,
+	type TourStepProps,
+} from "./TourWrapper"
 
-export { Tour, TourStep, type TourProps }
+export { Tour, TourStep, type TourProps, type TourStepProps }

showcase/public/showcase-sources.txt

@@ -9098,7 +9098,6 @@ import { useMemo, useState } from "react"
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
-import type { Step } from "react-joyride"
 
 //#region tour
 const defaultLocale = {
@@ -9115,8 +9114,8 @@ function TourExample() {
 	const [popup, setPopup] = useState(false)
 
 	const steps = useMemo(() => {
-		const InitStep = new (class extends TourStep {
-			step: Step = {
+		const InitStep = new TourStep({
+			step: {
 				title: "Tour starten",
 				target: "#tour-start",
 				disableBeacon: true,
@@ -9128,11 +9127,11 @@ function TourExample() {
 						The first step selects the tour start to start the tour.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 
-		const SecondStep = new (class extends TourStep {
-			step: Step = {
+		const SecondStep = new TourStep({
+			step: {
 				title: "Button",
 				target: "#joyride-first",
 				disableBeacon: true,
@@ -9144,11 +9143,11 @@ function TourExample() {
 						This step selects the popup which would open the popup.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 
-		const ThirdPopupStep = new (class extends TourStep {
-			step: Step = {
+		const ThirdPopupStep = new TourStep({
+			step: {
 				title: "Popup",
 				target: "#test-select",
 				disableBeacon: true,
@@ -9161,23 +9160,20 @@ function TourExample() {
 						it.
 					</span>
 				),
-			}
-
-			onInit() {
+			},
+			onInit: () => {
 				setPopup(true)
-			}
-
-			onPrepare() {
+			},
+			onPrepare: () => {
 				console.log("prepare message")
-			}
-
-			onExit() {
+			},
+			onExit: () => {
 				setPopup(false)
-			}
-		})()
+			},
+		})
 
-		const FourthStep = new (class extends TourStep {
-			step: Step = {
+		const FourthStep = new TourStep({
+			step: {
 				title: "Weiterer Button",
 				target: "#joyride-second",
 				disableBeacon: true,
@@ -9190,8 +9186,8 @@ function TourExample() {
 						button.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 		return [InitStep, SecondStep, ThirdPopupStep, FourthStep]
 	}, [])
 
@@ -9238,7 +9234,6 @@ function TourExample() {
 				open={popup}
 				//defaultOpen={true}
 				onOpenChange={(opened) => {
-					console.log("OOPEN POPUP CHANGE", popup, opened)
 					if (!opened) setPopup(false)
 				}}
 				//shouldCloseOnEscapePress={false}

showcase/src/components/showcase/wrapper/TourShowcase.tsx

@@ -11,7 +11,6 @@ import { useMemo, useState } from "react"
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
-import type { Step } from "react-joyride"
 
 //#region tour
 const defaultLocale = {
@@ -28,8 +27,8 @@ function TourExample() {
 	const [popup, setPopup] = useState(false)
 
 	const steps = useMemo(() => {
-		const InitStep = new (class extends TourStep {
-			step: Step = {
+		const InitStep = new TourStep({
+			step: {
 				title: "Tour starten",
 				target: "#tour-start",
 				disableBeacon: true,
@@ -41,11 +40,11 @@ function TourExample() {
 						The first step selects the tour start to start the tour.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 
-		const SecondStep = new (class extends TourStep {
-			step: Step = {
+		const SecondStep = new TourStep({
+			step: {
 				title: "Button",
 				target: "#joyride-first",
 				disableBeacon: true,
@@ -57,11 +56,11 @@ function TourExample() {
 						This step selects the popup which would open the popup.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 
-		const ThirdPopupStep = new (class extends TourStep {
-			step: Step = {
+		const ThirdPopupStep = new TourStep({
+			step: {
 				title: "Popup",
 				target: "#test-select",
 				disableBeacon: true,
@@ -74,23 +73,20 @@ function TourExample() {
 						it.
 					</span>
 				),
-			}
-
-			onInit() {
+			},
+			onInit: () => {
 				setPopup(true)
-			}
-
-			onPrepare() {
+			},
+			onPrepare: () => {
 				console.log("prepare message")
-			}
-
-			onExit() {
+			},
+			onExit: () => {
 				setPopup(false)
-			}
-		})()
+			},
+		})
 
-		const FourthStep = new (class extends TourStep {
-			step: Step = {
+		const FourthStep = new TourStep({
+			step: {
 				title: "Weiterer Button",
 				target: "#joyride-second",
 				disableBeacon: true,
@@ -103,8 +99,8 @@ function TourExample() {
 						button.
 					</span>
 				),
-			}
-		})()
+			},
+		})
 		return [InitStep, SecondStep, ThirdPopupStep, FourthStep]
 	}, [])
 
@@ -151,7 +147,6 @@ function TourExample() {
 				open={popup}
 				//defaultOpen={true}
 				onOpenChange={(opened) => {
-					console.log("OOPEN POPUP CHANGE", popup, opened)
 					if (!opened) setPopup(false)
 				}}
 				//shouldCloseOnEscapePress={false}