diff --git a/package/src/lib/components/attach-step/AttachStep.component.tsx b/package/src/lib/components/attach-step/AttachStep.component.tsx index b6d59e1..5749082 100644 --- a/package/src/lib/components/attach-step/AttachStep.component.tsx +++ b/package/src/lib/components/attach-step/AttachStep.component.tsx @@ -40,8 +40,9 @@ export interface AttachStepProps { fill?: boolean; /** * The index of the `steps` array to which the step is attached to. + * It can be a single index or multiple ones. */ - index: number; + index: number | Array; } /** @@ -57,12 +58,12 @@ export function AttachStep({ children, fill = false, index }: AttachStepProps const childRef = useRef(null); useEffect(() => { - if (current === index) { + if (checkIndex(index, current)) { childRef.current?.measureInWindow((x, y, width, height) => { changeSpot({ height, width, x, y }); }); } - }, [changeSpot, current, index]); + }, [changeSpot, current, index.toString()]); if (typeof children.type === "function") { const { style, ...rest } = children.props; @@ -91,3 +92,15 @@ export function AttachStep({ children, fill = false, index }: AttachStepProps children.props?.children, ); } + +function checkIndex(index: AttachStepProps["index"], current: number | undefined): boolean { + if (current === undefined) { + return false; + } + + if (Array.isArray(index)) { + return index.includes(current); + } + + return current === index; +} diff --git a/package/test/integration/lib/tour-overlay/TourOverlay.component.test.tsx b/package/test/integration/lib/tour-overlay/TourOverlay.component.test.tsx index aadd56c..27eef99 100644 --- a/package/test/integration/lib/tour-overlay/TourOverlay.component.test.tsx +++ b/package/test/integration/lib/tour-overlay/TourOverlay.component.test.tsx @@ -24,7 +24,7 @@ function TestScreen(): React.ReactElement { {"Test Tour 1"} - + {"Test Tour 2"} @@ -267,4 +267,47 @@ describe("[Integration] TourOverlay.component.test.tsx", () => { }); }); }); + + context("when an AttachStep has multiple indexes", () => { + it("renders all the steps correctly", async() => { + const spy = Sinon.spy<(values: StopParams) => void>(() => undefined); + + function TestView(): React.ReactElement { + const { start } = useSpotlightTour(); + + useEffect(() => { + start(); + }, []); + + return + + {"Test Tour"} + + ; + } + + const { getByText } = render( + + + , + ); + + await waitFor(() => getByText("Step 1")); + + fireEvent.press(getByText("Next")); + + await waitFor(() => getByText("Step 2")); + + fireEvent.press(getByText("Next")); + + await waitFor(() => getByText("Step 3")); + + fireEvent.press(getByText("Stop")); + + Sinon.assert.calledOnceWithExactly(spy, { + index: 2, + isLast: true, + }); + }); + }); });