Merge pull request #58 from okgrow/feat/active-flag-for-steps

feat: Active flag for steps

Author: mohebifar

example/App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, Text, Image, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, Text, Image, View, TouchableOpacity, Switch } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 
 import { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';
@@ -46,6 +46,13 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
   },
+  activeSwitchContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+    alignItems: 'center',
+    paddingHorizontal: 40,
+  },
 });
 
 class App extends Component {
@@ -56,6 +63,10 @@ class App extends Component {
     }).isRequired,
   };
 
+  state = {
+    secondStepActive: true,
+  };
+
   componentDidMount() {
     this.props.copilotEvents.on('stepChange', this.handleStepChange);
     this.props.start();
@@ -74,12 +85,21 @@ class App extends Component {
           </WalkthroughableText>
         </CopilotStep>
         <View style={styles.middleView}>
-          <CopilotStep text="Here goes your profile picture!" order={2} name="secondText">
+          <CopilotStep active={this.state.secondStepActive} text="Here goes your profile picture!" order={2} name="secondText">
             <WalkthroughableImage
               source={{ uri: 'https://pbs.twimg.com/profile_images/527584017189982208/l3wwN-l-_400x400.jpeg' }}
               style={styles.profilePhoto}
             />
           </CopilotStep>
+          <View style={styles.activeSwitchContainer}>
+            <Text>Profile photo step activated?</Text>
+            <View style={{ flexGrow: 1 }} />
+            <Switch
+              onValueChange={secondStepActive => this.setState({ secondStepActive })}
+              value={this.state.secondStepActive}
+            />
+          </View>
+
           <TouchableOpacity style={styles.button} onPress={() => this.props.start()}>
             <Text style={styles.buttonText}>START THE TUTORIAL!</Text>
           </TouchableOpacity>

src/components/ConnectedCopilotStep.js

@@ -7,12 +7,41 @@ type Props = {
   name: string,
   text: string,
   order: number,
+  active?: boolean,
   _copilot: CopilotContext,
   children: React$Element
 };
 
 class ConnectedCopilotStep extends Component<Props> {
+  static defaultProps = {
+    active: true,
+  };
+
   componentDidMount() {
+    if (this.props.active) {
+      this.register();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.active !== this.props.active) {
+      if (nextProps.active) {
+        this.register();
+      } else {
+        this.unregister();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.unregister();
+  }
+
+  setNativeProps(obj) {
+    this.wrapper.setNativeProps(obj);
+  }
+
+  register() {
     this.props._copilot.registerStep({
       name: this.props.name,
       text: this.props.text,
@@ -22,14 +51,10 @@ class ConnectedCopilotStep extends Component<Props> {
     });
   }
 
-  componentWillUnmount() {
+  unregister() {
     this.props._copilot.unregisterStep(this.props.name);
   }
 
-  setNativeProps(obj) {
-    this.wrapper.setNativeProps(obj);
-  }
-
   measure() {
     if (typeof __TEST__ !== 'undefined' && __TEST__) { // eslint-disable-line no-undef
       return new Promise(resolve => resolve({

src/hocs/copilot.test.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import { View, Modal } from 'react-native';
 import renderer from 'react-test-renderer';
@@ -8,12 +9,16 @@ import SvgMask from '../components/SvgMask';
 
 const WalkthroughableView = walkthroughable(View);
 
-const SampleComponent = () => (
+type SampleComponentProps = {
+  secondStepActive?: boolean
+};
+
+const SampleComponent = ({ secondStepActive }: SampleComponentProps) => (
   <View>
     <CopilotStep order={0} name="step-1" text="This is the description for the first step">
       <WalkthroughableView />
     </CopilotStep>
-    <CopilotStep order={1} name="step-2" text="This is the description for the second step">
+    <CopilotStep order={1} name="step-2" active={secondStepActive} text="This is the description for the second step">
       <WalkthroughableView />
     </CopilotStep>
     <CopilotStep order={3} name="step-3" text="This is the description for the third step">
@@ -22,6 +27,10 @@ const SampleComponent = () => (
   </View>
 );
 
+SampleComponent.defaultProps = {
+  secondStepActive: true,
+};
+
 it('only renders the component within a wrapper as long as tutorial has not been started', () => {
   const CopilotComponent = copilot()(SampleComponent);
 
@@ -134,3 +143,25 @@ it('shows the custom tooltip component if specified', async () => {
   expect(tooltip.props.currentStep).toHaveProperty('order');
   expect(tooltip.props.currentStep).toHaveProperty('text');
 });
+
+it('skips a step if disabled', async () => {
+  const CopilotComponent = copilot()(SampleComponent);
+
+  const tree = renderer.create(<CopilotComponent secondStepActive={false} />);
+  await tree.root.findByType(SampleComponent).props.start();
+
+  const textComponent = tree.root.findByProps({
+    testID: 'stepDescription',
+  });
+
+  expect(textComponent.props.children).toBe('This is the description for the first step');
+
+  await tree.root.instance.next();
+
+  expect(textComponent.props.children).not.toBe('This is the description for the second step');
+  expect(textComponent.props.children).toBe('This is the description for the third step');
+
+  await tree.root.instance.prev();
+
+  expect(textComponent.props.children).toBe('This is the description for the first step');
+});