Merge pull request #80 from HiDeoo/hd-onbeforechange-targetelement

Add `nextElement` to `onBeforeChange` callback

Author: HiDeoo

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Unreleased
 
+* The `onBeforeChange` callback now receives the `nextElement` as second parameter.
 * Add missing `updateStepElement()` to the TypeScript type declarations.
 
 ## 0.5.0

README.md

@@ -75,7 +75,7 @@ import { Steps, Hints } from 'intro.js-react';
 | `onBeforeExit` | Callback called before exiting the intro. <br> *If you want to prevent exiting the intro, you can return `false` in this callback (available since intro.js 0.2.7).* | Function <br> *(stepIndex)* |  |
 | `onStart` | Callback called when the steps are enabled. | Function <br> *(stepIndex)* |  |
 | `onChange` | Callback called when the current step is changed. | Function <br> *(nextStepIndex, nextElement)*  |  |
-| `onBeforeChange` | Callback called before changing the current step. <br> *If you want to prevent the transition to the next / previous step, you can return `false` in this callback (available since intro.js 2.8.0).* | Function <br> *(nextStepIndex)* |  |
+| `onBeforeChange` | Callback called before changing the current step. <br> *If you want to prevent the transition to the next / previous step, you can return `false` in this callback (available since intro.js 2.8.0).* | Function <br> *(nextStepIndex, nextElement)* |  |
 | `onAfterChange` | Callback called after changing the current step. | Function <br> *(newStepIndex, newElement)* |  |
 | `onPreventChange` | Callback called if you prevented transitioning to a new step by returning `false` in `onBeforeChange`. | Function <br> *(stepIndex)* |  |
 | `onComplete` | Callback called when all the steps are completed. | Function <br> *()* |  |

index.d.ts

@@ -78,7 +78,7 @@ declare module 'intro.js-react' {
      * If you want to prevent the transition to the next / previous step, you can return false in this callback
      * (available since intro.js 2.8.0).
      */
-    onBeforeChange?(nextStepIndex: number): void | false;
+    onBeforeChange?(nextStepIndex: number, nextElement: Element): void | false;
     /**
      * Callback called after changing the current step.
      */

src/components/Steps/index.js

@@ -134,15 +134,15 @@ export default class Steps extends Component {
    * Triggered before changing step.
    * @return {Boolean} Returning `false` will prevent the step transition.
    */
-  onBeforeChange = () => {
+  onBeforeChange = nextElement => {
     if (!this.isVisible) {
       return true;
     }
 
     const { onBeforeChange, onPreventChange } = this.props;
 
     if (onBeforeChange) {
-      const continueStep = onBeforeChange(this.introJs._currentStep);
+      const continueStep = onBeforeChange(this.introJs._currentStep, nextElement);
 
       if (continueStep === false && onPreventChange) {
         setTimeout(() => {

src/components/Steps/index.test.js

@@ -256,15 +256,15 @@ describe('Steps', () => {
     expect(onBeforeChange).toHaveBeenCalledTimes(1);
   });
 
-  test('should call the onBeforeChange callback with the step number', () => {
+  test('should call the onBeforeChange callback with the step number and the new element', () => {
     const onBeforeChange = jest.fn();
 
     const wrapper = shallow(<Steps initialStep={0} steps={steps} onExit={() => {}} onBeforeChange={onBeforeChange} />, {
       lifecycleExperimental: true,
     });
     wrapper.setProps({ enabled: true });
 
-    expect(onBeforeChange).toHaveBeenCalledWith(1);
+    expect(onBeforeChange).toHaveBeenCalledWith(1, null);
   });
 
   test('should call the onPreventChange callback if onBeforeChange returned false to prevent transition', () => {