Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c6d6f90

Browse files
authored
Merge pull request #12 from Vivalldi/feature/onBeforeExit
Add `onBeforeExit` callback
2 parents 75e7204 + 6036508 commit c6d6f90

File tree

5 files changed

+72
-0
lines changed

5 files changed

+72
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* Add React 16 support.
66
* If at least intro.js 2.8.0 is used, `false` can be returned in `onBeforeChange` to prevent transitioning to the next / previous step.
77
* Add the `onPreventChange` callback called when a transition is prevented by returning `false` in `onBeforeChange`.
8+
* Add the `onBeforeExit` callback to prevent exiting the intro.
89

910
## 0.1.5
1011

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import { Steps, Hints } from 'intro.js-react';
7272
| `initialStep` | Step index to start with when showing the steps. | Number | ✅ |
7373
| `steps` | All the steps. | [Step[]](#step) | ✅ |
7474
| `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)* | ✅ |
75+
| `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)* | |
7576
| `onStart` | Callback called when the steps are enabled. | Function <br> *(stepIndex)* | |
7677
| `onChange` | Callback called when the current step is changed. | Function <br> *(nextStepIndex, nextElement)* | |
7778
| `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‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,17 @@ class IntroJsMock {
99
}
1010
}
1111

12+
onbeforeexit(fn) {
13+
if (fn) {
14+
this.onBeforeExitFn = fn;
15+
}
16+
}
17+
1218
exit() {
19+
if (this.onBeforeExitFn) {
20+
this.onBeforeExitFn();
21+
}
22+
1323
if (this.exitFn) {
1424
this.exitFn();
1525
}

‎src/components/Steps/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default class Steps extends Component {
2727
).isRequired,
2828
onStart: PropTypes.func,
2929
onExit: PropTypes.func.isRequired,
30+
onBeforeExit: PropTypes.func,
3031
onBeforeChange: PropTypes.func,
3132
onAfterChange: PropTypes.func,
3233
onChange: PropTypes.func,
@@ -42,6 +43,7 @@ export default class Steps extends Component {
4243
static defaultProps = {
4344
enabled: false,
4445
onStart: null,
46+
onBeforeExit: null,
4547
onBeforeChange: null,
4648
onAfterChange: null,
4749
onChange: null,
@@ -113,6 +115,20 @@ export default class Steps extends Component {
113115
onExit(this.introJs._currentStep);
114116
};
115117

118+
/**
119+
* Triggered before exiting the intro.
120+
* @return {Boolean} Returning `false` will prevent exiting the intro.
121+
*/
122+
onBeforeExit = () => {
123+
const { onBeforeExit } = this.props;
124+
125+
if (onBeforeExit) {
126+
return onBeforeExit(this.introJs._currentStep);
127+
}
128+
129+
return true;
130+
};
131+
116132
/**
117133
* Triggered before changing step.
118134
* @return {Boolean} Returning `false` will prevent the step transition.
@@ -203,6 +219,7 @@ export default class Steps extends Component {
203219
this.introJs = introJs();
204220

205221
this.introJs.onexit(this.onExit);
222+
this.introJs.onbeforeexit(this.onBeforeExit);
206223
this.introJs.onbeforechange(this.onBeforeChange);
207224
this.introJs.onafterchange(this.onAfterChange);
208225
this.introJs.onchange(this.onChange);

‎src/components/Steps/index.test.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,49 @@ describe('Steps', () => {
177177
expect(onChange).toHaveBeenCalledWith(1, null);
178178
});
179179

180+
test('should not call the onBeforeExit callback when disabled', () => {
181+
const onBeforeExit = jest.fn();
182+
183+
renderer.create(<Steps initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />);
184+
185+
expect(onBeforeExit).not.toHaveBeenCalled();
186+
});
187+
188+
test('should call the onBeforeExit callback when disabling', () => {
189+
const onBeforeExit = jest.fn();
190+
191+
const wrapper = shallow(
192+
<Steps enabled initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />,
193+
{
194+
lifecycleExperimental: true,
195+
}
196+
);
197+
wrapper.setProps({ enabled: false });
198+
199+
expect(onBeforeExit).toHaveBeenCalledTimes(1);
200+
});
201+
202+
test('should call the onBeforeExit callback with the step number', () => {
203+
const onBeforeExit = jest.fn();
204+
205+
const wrapper = shallow(
206+
<Steps enabled initialStep={0} steps={steps} onExit={() => {}} onBeforeExit={onBeforeExit} />,
207+
{
208+
lifecycleExperimental: true,
209+
}
210+
);
211+
wrapper.setProps({ enabled: false });
212+
213+
expect(onBeforeExit).toHaveBeenCalledWith(1);
214+
expect(onBeforeExit).toHaveBeenCalledTimes(1);
215+
216+
wrapper.setProps({ enabled: true, initialStep: 10 });
217+
wrapper.setProps({ enabled: false });
218+
219+
expect(onBeforeExit).toHaveBeenCalledWith(11);
220+
expect(onBeforeExit).toHaveBeenCalledTimes(2);
221+
});
222+
180223
test('should not call the onBeforeChange callback when disabled', () => {
181224
const onBeforeChange = jest.fn();
182225

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /