forked from zhongyidian/robot-shanghai
57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
import { useCallback } from "react";
|
|
import { getAppPortalRoot, useCourseCanvas } from "@/course/canvas";
|
|
import { GuideSpotlight as RegistryGuideSpotlight } from "@/course/interactions/guide-spotlight";
|
|
import { useSpotlightStore } from "@/stores";
|
|
import type { GuideSpotlightProps } from "./GuideSpotlight.types";
|
|
|
|
export function GuideSpotlight({
|
|
children,
|
|
onFinish,
|
|
onSkip,
|
|
container = getAppPortalRoot,
|
|
viewport,
|
|
...props
|
|
}: GuideSpotlightProps) {
|
|
const {
|
|
open,
|
|
steps,
|
|
current,
|
|
nextStep,
|
|
prevStep,
|
|
finishSpotlight,
|
|
skipSpotlight,
|
|
} = useSpotlightStore();
|
|
const { viewport: canvasViewport } = useCourseCanvas();
|
|
|
|
const finish = useCallback(() => {
|
|
finishSpotlight();
|
|
onFinish?.();
|
|
}, [finishSpotlight, onFinish]);
|
|
|
|
const skip = useCallback(() => {
|
|
skipSpotlight();
|
|
onSkip?.();
|
|
}, [onSkip, skipSpotlight]);
|
|
|
|
return (
|
|
<RegistryGuideSpotlight
|
|
state={{
|
|
open,
|
|
steps,
|
|
current,
|
|
}}
|
|
actions={{
|
|
next: nextStep,
|
|
prev: prevStep,
|
|
skip,
|
|
finish,
|
|
}}
|
|
container={container}
|
|
viewport={viewport ?? canvasViewport}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</RegistryGuideSpotlight>
|
|
);
|
|
}
|