Merge pull request HiDeoo#12 from Vivalldi/feature/onBeforeExit

Add `onBeforeExit` callback

Author: HiDeoo

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Add React 16 support.
 * If at least intro.js 2.8.0 is used, `false` can be returned in `onBeforeChange` to prevent transitioning to the next / previous step.
 * Add the `onPreventChange` callback called when a transition is prevented by returning `false` in `onBeforeChange`.
+* Add the `onBeforeExit` callback to prevent exiting the intro.
 
 ## 0.1.5
 

README.md

@@ -72,6 +72,7 @@ import { Steps, Hints } from 'intro.js-react';
 | `initialStep` | Step index to start with when showing the steps. | Number | ✅ |
 | `steps` | All the steps. | [Step[]](#step) | ✅ |
 | `onExit` | Callback called when the steps are disabled <br> *Required to force keeping track of the state when the steps are dismissed with an Intro.js event and not the `enabled` prop.* | Function <br> *(stepIndex)* | ✅ |
+| `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)* |  |

__mocks__/intro.js.js

@@ -9,7 +9,17 @@ class IntroJsMock {
     }
   }
 
+  onbeforeexit(fn) {
+    if (fn) {
+      this.onBeforeExitFn = fn;
+    }
+  }
+
   exit() {
+    if (this.onBeforeExitFn) {
+      this.onBeforeExitFn();
+    }
+
     if (this.exitFn) {
       this.exitFn();
     }

src/components/Steps/index.js

@@ -27,6 +27,7 @@ export default class Steps extends Component {
     ).isRequired,
     onStart: PropTypes.func,
     onExit: PropTypes.func.isRequired,
+    onBeforeExit: PropTypes.func,
     onBeforeChange: PropTypes.func,
     onAfterChange: PropTypes.func,
     onChange: PropTypes.func,
@@ -42,6 +43,7 @@ export default class Steps extends Component {
   static defaultProps = {
     enabled: false,
     onStart: null,
+    onBeforeExit: null,
     onBeforeChange: null,
     onAfterChange: null,
     onChange: null,
@@ -113,6 +115,20 @@ export default class Steps extends Component {
     onExit(this.introJs._currentStep);
   };
 
+  /**
+   * Triggered before exiting the intro.
+   * @return {Boolean} Returning `false` will prevent exiting the intro.
+   */
+  onBeforeExit = () => {
+    const { onBeforeExit } = this.props;
+
+    if (onBeforeExit) {
+      return onBeforeExit(this.introJs._currentStep);
+    }
+
+    return true;
+  };
+
   /**
    * Triggered before changing step.
    * @return {Boolean} Returning `false` will prevent the step transition.
@@ -203,6 +219,7 @@ export default class Steps extends Component {
     this.introJs = introJs();
 
     this.introJs.onexit(this.onExit);
+    this.introJs.onbeforeexit(this.onBeforeExit);
     this.introJs.onbeforechange(this.onBeforeChange);
     this.introJs.onafterchange(this.onAfterChange);
     this.introJs.onchange(this.onChange);

src/components/Steps/index.test.js

@@ -177,6 +177,49 @@ describe('Steps', () => {
     expect(onChange).toHaveBeenCalledWith(1, null);
   });
 
+  test('should not call the onBeforeExit callback when disabled', () => {
+    const onBeforeExit = jest.fn();
+
+    renderer.create(<Steps initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />);
+
+    expect(onBeforeExit).not.toHaveBeenCalled();
+  });
+
+  test('should call the onBeforeExit callback when disabling', () => {
+    const onBeforeExit = jest.fn();
+
+    const wrapper = shallow(
+      <Steps enabled initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />,
+      {
+        lifecycleExperimental: true,
+      }
+    );
+    wrapper.setProps({ enabled: false });
+
+    expect(onBeforeExit).toHaveBeenCalledTimes(1);
+  });
+
+  test('should call the onBeforeExit callback with the step number', () => {
+    const onBeforeExit = jest.fn();
+
+    const wrapper = shallow(
+      <Steps enabled initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />,
+      {
+        lifecycleExperimental: true,
+      }
+    );
+    wrapper.setProps({ enabled: false });
+
+    expect(onBeforeExit).toHaveBeenCalledWith(1);
+    expect(onBeforeExit).toHaveBeenCalledTimes(1);
+
+    wrapper.setProps({ enabled: true, initialStep: 10 });
+    wrapper.setProps({ enabled: false });
+
+    expect(onBeforeExit).toHaveBeenCalledWith(11);
+    expect(onBeforeExit).toHaveBeenCalledTimes(2);
+  });
+
   test('should not call the onBeforeChange callback when disabled', () => {
     const onBeforeChange = jest.fn();