Merge branch 'master' of github.com:okgrow/react-native-joyride

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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okgrow/react-native-copilot",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Make an interactive step by step tour guide for you react-native app",
   "main": "src/index.js",
   "private": false,

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/components/CopilotModal.js

@@ -46,7 +46,7 @@ class CopilotModal extends Component<Props, State> {
     overlay: typeof NativeModules.RNSVGSvgViewManager !== 'undefined' ? 'svg' : 'view',
     // If animated was not specified, rely on the default overlay type
     animated: typeof NativeModules.RNSVGSvgViewManager !== 'undefined',
-    androidStatusBarVisible: true,
+    androidStatusBarVisible: false,
   };
 
   state = {
@@ -61,7 +61,7 @@ class CopilotModal extends Component<Props, State> {
   };
 
   componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.visible === false) {
+    if (this.props.visible === true && nextProps.visible === false) {
       this.reset();
     }
   }
@@ -97,7 +97,7 @@ class CopilotModal extends Component<Props, State> {
 
   async _animateMove(obj = {}): void {
     const layout = await this.measure();
-    if (this.props.androidStatusBarVisible && Platform.OS === 'android') {
+    if (!this.props.androidStatusBarVisible && Platform.OS === 'android') {
       obj.top -= StatusBar.currentHeight; // eslint-disable-line no-param-reassign
     }
 

src/hocs/copilot.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 
 import mitt from 'mitt';
+import hoistStatics from 'hoist-non-react-statics'
 
 import CopilotModal from '../components/CopilotModal';
 import { OFFSET_WIDTH } from '../components/style';
@@ -198,7 +199,7 @@ const copilot = ({
       _copilot: PropTypes.object.isRequired,
     };
 
-    return Copilot;
+    return hoistStatics(Copilot, WrappedComponent);
   };
 
 export default copilot;

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');
+});