Skip to content

Commit aa64368

Browse files
Merge pull request #58 from linked-planet/dev
Dev
2 parents 3903a19 + 29552a6 commit aa64368

File tree

4 files changed

+85
-65
lines changed

4 files changed

+85
-65
lines changed

library/src/components/tour/TourWrapper.tsx

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,40 @@ import { useCallback, useMemo, useRef, useState } from "react"
99
import { showErrorFlag, showInformationFlag } from "../ToastFlag"
1010
import { flushSync } from "react-dom"
1111

12-
export abstract class TourStep {
13-
step: Step
14-
15-
constructor() {
16-
this.step = {
17-
content: <>Step should be overwritten.</>,
18-
target: "body",
19-
}
12+
export type TourStepProps = Step
13+
14+
export class TourStep {
15+
private _step: Step
16+
private contentClassname = "text-start text-base" as const
17+
18+
constructor({
19+
step,
20+
onPrepare,
21+
onInit,
22+
onExit,
23+
}: {
24+
step: TourStepProps
25+
onPrepare?: () => void
26+
onInit?: () => void
27+
onExit?: () => void
28+
}) {
29+
const content = (
30+
<div className={this.contentClassname}>{step.content}</div>
31+
)
32+
this._step = { ...step, content }
33+
this.onInit = onInit
34+
this.onPrepare = onPrepare
35+
this.onExit = onExit
36+
}
37+
38+
set step(step: Step) {
39+
const content = (
40+
<div className={this.contentClassname}>{step.content}</div>
41+
)
42+
this._step = { ...step, content }
43+
}
44+
get step(): Step {
45+
return this._step
2046
}
2147

2248
onInit?(): void
@@ -113,7 +139,6 @@ export function Tour({
113139
const callback = useCallback(
114140
(joyrideState: CallBackProps) => {
115141
const { action, index, lifecycle, type, step } = joyrideState
116-
console.log("ACTION", action, "TYPE", type, "INDEX", index)
117142

118143
switch (type) {
119144
case "tour:start":
Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
import { Tour, TourStep, type TourProps } from "./TourWrapper"
1+
import {
2+
Tour,
3+
TourStep,
4+
type TourProps,
5+
type TourStepProps,
6+
} from "./TourWrapper"
27

3-
export { Tour, TourStep, type TourProps }
8+
export { Tour, TourStep, type TourProps, type TourStepProps }

showcase/public/showcase-sources.txt

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9098,7 +9098,6 @@ import { useMemo, useState } from "react"
90989098
import ShowcaseWrapperItem, {
90999099
type ShowcaseProps,
91009100
} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
9101-
import type { Step } from "react-joyride"
91029101

91039102
//#region tour
91049103
const defaultLocale = {
@@ -9115,8 +9114,8 @@ function TourExample() {
91159114
const [popup, setPopup] = useState(false)
91169115

91179116
const steps = useMemo(() => {
9118-
const InitStep = new (class extends TourStep {
9119-
step: Step = {
9117+
const InitStep = new TourStep({
9118+
step: {
91209119
title: "Tour starten",
91219120
target: "#tour-start",
91229121
disableBeacon: true,
@@ -9128,11 +9127,11 @@ function TourExample() {
91289127
The first step selects the tour start to start the tour.
91299128
</span>
91309129
),
9131-
}
9132-
})()
9130+
},
9131+
})
91339132

9134-
const SecondStep = new (class extends TourStep {
9135-
step: Step = {
9133+
const SecondStep = new TourStep({
9134+
step: {
91369135
title: "Button",
91379136
target: "#joyride-first",
91389137
disableBeacon: true,
@@ -9144,11 +9143,11 @@ function TourExample() {
91449143
This step selects the popup which would open the popup.
91459144
</span>
91469145
),
9147-
}
9148-
})()
9146+
},
9147+
})
91499148

9150-
const ThirdPopupStep = new (class extends TourStep {
9151-
step: Step = {
9149+
const ThirdPopupStep = new TourStep({
9150+
step: {
91529151
title: "Popup",
91539152
target: "#test-select",
91549153
disableBeacon: true,
@@ -9161,23 +9160,20 @@ function TourExample() {
91619160
it.
91629161
</span>
91639162
),
9164-
}
9165-
9166-
onInit() {
9163+
},
9164+
onInit: () => {
91679165
setPopup(true)
9168-
}
9169-
9170-
onPrepare() {
9166+
},
9167+
onPrepare: () => {
91719168
console.log("prepare message")
9172-
}
9173-
9174-
onExit() {
9169+
},
9170+
onExit: () => {
91759171
setPopup(false)
9176-
}
9177-
})()
9172+
},
9173+
})
91789174

9179-
const FourthStep = new (class extends TourStep {
9180-
step: Step = {
9175+
const FourthStep = new TourStep({
9176+
step: {
91819177
title: "Weiterer Button",
91829178
target: "#joyride-second",
91839179
disableBeacon: true,
@@ -9190,8 +9186,8 @@ function TourExample() {
91909186
button.
91919187
</span>
91929188
),
9193-
}
9194-
})()
9189+
},
9190+
})
91959191
return [InitStep, SecondStep, ThirdPopupStep, FourthStep]
91969192
}, [])
91979193

@@ -9238,7 +9234,6 @@ function TourExample() {
92389234
open={popup}
92399235
//defaultOpen={true}
92409236
onOpenChange={(opened) => {
9241-
console.log("OOPEN POPUP CHANGE", popup, opened)
92429237
if (!opened) setPopup(false)
92439238
}}
92449239
//shouldCloseOnEscapePress={false}

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

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { useMemo, useState } from "react"
1111
import ShowcaseWrapperItem, {
1212
type ShowcaseProps,
1313
} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
14-
import type { Step } from "react-joyride"
1514

1615
//#region tour
1716
const defaultLocale = {
@@ -28,8 +27,8 @@ function TourExample() {
2827
const [popup, setPopup] = useState(false)
2928

3029
const steps = useMemo(() => {
31-
const InitStep = new (class extends TourStep {
32-
step: Step = {
30+
const InitStep = new TourStep({
31+
step: {
3332
title: "Tour starten",
3433
target: "#tour-start",
3534
disableBeacon: true,
@@ -41,11 +40,11 @@ function TourExample() {
4140
The first step selects the tour start to start the tour.
4241
</span>
4342
),
44-
}
45-
})()
43+
},
44+
})
4645

47-
const SecondStep = new (class extends TourStep {
48-
step: Step = {
46+
const SecondStep = new TourStep({
47+
step: {
4948
title: "Button",
5049
target: "#joyride-first",
5150
disableBeacon: true,
@@ -57,11 +56,11 @@ function TourExample() {
5756
This step selects the popup which would open the popup.
5857
</span>
5958
),
60-
}
61-
})()
59+
},
60+
})
6261

63-
const ThirdPopupStep = new (class extends TourStep {
64-
step: Step = {
62+
const ThirdPopupStep = new TourStep({
63+
step: {
6564
title: "Popup",
6665
target: "#test-select",
6766
disableBeacon: true,
@@ -74,23 +73,20 @@ function TourExample() {
7473
it.
7574
</span>
7675
),
77-
}
78-
79-
onInit() {
76+
},
77+
onInit: () => {
8078
setPopup(true)
81-
}
82-
83-
onPrepare() {
79+
},
80+
onPrepare: () => {
8481
console.log("prepare message")
85-
}
86-
87-
onExit() {
82+
},
83+
onExit: () => {
8884
setPopup(false)
89-
}
90-
})()
85+
},
86+
})
9187

92-
const FourthStep = new (class extends TourStep {
93-
step: Step = {
88+
const FourthStep = new TourStep({
89+
step: {
9490
title: "Weiterer Button",
9591
target: "#joyride-second",
9692
disableBeacon: true,
@@ -103,8 +99,8 @@ function TourExample() {
10399
button.
104100
</span>
105101
),
106-
}
107-
})()
102+
},
103+
})
108104
return [InitStep, SecondStep, ThirdPopupStep, FourthStep]
109105
}, [])
110106

@@ -151,7 +147,6 @@ function TourExample() {
151147
open={popup}
152148
//defaultOpen={true}
153149
onOpenChange={(opened) => {
154-
console.log("OOPEN POPUP CHANGE", popup, opened)
155150
if (!opened) setPopup(false)
156151
}}
157152
//shouldCloseOnEscapePress={false}

0 commit comments

Comments
 (0)