Merge branch 'release/0.7.0'

EitanElbaz · Oct 25, 2021 · 1c7f77f · 1c7f77f
2 parents cd7b304 + 896d761
commit 1c7f77f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-grand-tour",
-    "version": "0.6.1",
+    "version": "0.7.0",
     "description": "",
     "main": "./build/index.js",
     "typings": "./typings/index.d.ts",

diff --git a/src/ReactGrandTour.tsx b/src/ReactGrandTour.tsx
@@ -33,6 +33,7 @@ const ReactGrandTour: React.FC<Props> = ({
     open: defaultOpen = false,
     onClose,
     onOpen,
+    onStepChange,
     steps: defaultSteps = [],
     openAt = 0,
     scrollIntoViewOptions = { behavior: 'smooth', block: 'center' },
@@ -95,11 +96,23 @@ const ReactGrandTour: React.FC<Props> = ({
 
     const changeStep = useCallback(
         (step: number) => {
-            if (step >= 0 && step < allSteps.length) {
-                setCurrentIndex(step);
+            if (steps) {
+                const currentStep = Number(currentIndex);
+                if (step >= 0 && step < steps.length) {
+                    setCurrentIndex(step);
+                    if (onStepChange) {
+                        onStepChange({
+                            fromStepIndex: currentStep,
+                            toStepIndex: step,
+                            totalSteps: steps.length,
+                            fromStep: steps[currentStep],
+                            toStep: steps[step],
+                        });
+                    }
+                }
             }
         },
-        [allSteps.length],
+        [steps, onStepChange, currentIndex],
     );
     const openTour = useCallback(
         (atStep = 0, withSteps?: ReactGrandTourStep[]) => {

diff --git a/src/types.ts b/src/types.ts
@@ -4,6 +4,7 @@ export type ReactGrandTourProps = {
     open?: boolean;
     onOpen?: () => void;
     onClose?: (reason: ReactGrandTourCloseReason) => void;
+    onStepChange?: (props: OnStepChangeProps) => void;
     openAt?: number;
     steps?: ReactGrandTourStep[];
     scrollIntoViewOptions?: ScrollIntoViewOptions;
@@ -60,6 +61,15 @@ export type ReactGrandTourShortcuts = {
     prevStep?: string[];
 };
 
+export type OnStepChangeProps = {
+    fromStepIndex: number;
+    toStepIndex: number;
+    totalSteps: number;
+
+    fromStep: ReactGrandTourStep;
+    toStep: ReactGrandTourStep;
+};
+
 export type ReactGrandTourCloseReason = 'backdrop' | 'close-btn' | 'escape';
 
 export type ReactGrandTourContextType = {