Add optional "data" to step

gilbarbara · Apr 9, 2024 · 7bff2a8 · 7bff2a8
1 parent 59d4a9b
commit 7bff2a8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/types/components.ts b/src/types/components.ts
@@ -222,6 +222,10 @@ export type Step = Simplify<
      * The tooltip's body.
      */
     content: ReactNode;
+    /**
+     * Additional data you can set to the step.
+     */
+    data?: any;
     /**
      * Don't show the Beacon before the tooltip.
      * @default false

diff --git a/test/__fixtures__/CustomOptions.tsx b/test/__fixtures__/CustomOptions.tsx
@@ -2,10 +2,12 @@ import { useReducer } from 'react';
 
 import { standardSteps } from './steps';
 
-import Joyride, { STATUS, Status } from '../../src';
+import Joyride, { LIFECYCLE, STATUS, Status } from '../../src';
 import { CallBackProps, Props, Step } from '../../src/types';
 
-interface CustomOptionsProps extends Omit<Props, 'run' | 'steps'> {}
+interface CustomOptionsProps extends Omit<Props, 'run' | 'steps'> {
+  finishedCallback: () => void;
+}
 
 interface State {
   index: number;
@@ -28,11 +30,14 @@ const tourSteps = [
     target: '.outro h2 span',
     placement: 'top' as const,
     content: "Text only steps — Because sometimes you don't really need a proper heading",
+    data: {
+      last: true,
+    },
   },
 ];
 
-export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 'steps'>) {
-  const { callback, ...rest } = props;
+export default function CustomOptions(props: Omit<CustomOptionsProps, 'run' | 'steps'>) {
+  const { callback, finishedCallback, ...rest } = props;
   const [{ run, steps }, setState] = useReducer(
     (previousState: State, nextState: Partial<State>) => ({
       ...previousState,
@@ -50,7 +55,7 @@ export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 's
   };
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const { status } = data;
+    const { lifecycle, status, step } = data;
 
     if (([STATUS.FINISHED, STATUS.SKIPPED] as Array<Status>).includes(status)) {
       setState({ run: false });
@@ -59,6 +64,10 @@ export default function CutomOptionss(props: Omit<CustomOptionsProps, 'run' | 's
     setState({ index: data.index });
 
     callback?.(data);
+
+    if (lifecycle === LIFECYCLE.COMPLETE && step.data?.last) {
+      finishedCallback();
+    }
   };
 
   return (

diff --git a/test/tours/custom-options.spec.tsx b/test/tours/custom-options.spec.tsx
@@ -9,12 +9,14 @@ import { cleanup, fireEvent, render, screen, waitFor } from '../__fixtures__/tes
 const getCallbackResponse = callbackResponseFactory({ size: 4 });
 
 const mockCallback = vi.fn();
+const mockFinishedCallback = vi.fn();
 const mockGetPopper = vi.fn();
 
 describe('Joyride > Custom Options', () => {
   render(
     <Customized
       callback={mockCallback}
+      finishedCallback={mockFinishedCallback}
       floaterProps={{
         getPopper: (popper, type) => {
           mockGetPopper(popper, type);
@@ -147,5 +149,6 @@ describe('Joyride > Custom Options', () => {
     );
 
     expect(mockGetPopper).toHaveBeenCalledTimes(8);
+    expect(mockFinishedCallback).toHaveBeenCalledTimes(1);
   });
 });