Merge remote-tracking branch 'upstream/master'

Author: ohtangza

README.md

@@ -180,6 +180,40 @@ Use `this.props.start(fromStep, onStop)` in the root component in order to trigg
 
 The `onStop` method will be called after a user selects 'Skip' or 'Finish' buttion in the tooltip.
 
+### Listening to the events
+Along with `this.props.start()`, `copilot` HOC passes `copilotEvents` function to the component to help you with tracking of tutorial progress. It utilizes [mitt](https://github.com/developit/mitt) under the hood, you can see how full API there.
+
+List of available events is:
+
+- `start` — Copilot tutorial has started.
+- `stop` — Copilot tutorial has ended or skipped.
+- `stepChange` — Next step is triggered. Passes [`Step`](https://github.com/okgrow/react-native-copilot/blob/master/src/types.js#L2) instance as event handler argument.
+
+
+**Example:**
+```js
+import { copilot, CopilotStep } from '@okgrow/react-native-copilot';
+
+const CustomComponent = ({ copilot }) => <View {...copilot}><Text>Hello world!</Text></View>;
+
+class HomeScreen {
+  componentDidMount() {
+    this.props.copilotEvents.on('stop', () => {
+      // Copilot tutorial finished!
+    });
+  }
+  
+  componentWillUnmount() {
+    // Don't forget to disable event handlers to prevent errors
+    this.props.copilotEvents.off('stop');
+  }
+
+  render() {
+    // ...
+  }
+}
+```
+
 ## Contributing
 Issues and Pull Requests are always welcome.
 

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.0",
   "description": "Make an interactive step by step tour guide for you react-native app",
   "main": "src/index.js",
   "private": false,
@@ -61,6 +61,7 @@
     }
   },
   "dependencies": {
+    "hoist-non-react-statics": "^3.0.1",
     "mitt": "^1.1.3"
   }
 }

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 = {
@@ -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';
@@ -141,7 +142,7 @@ const copilot = ({
           requestAnimationFrame(() => this.start(fromStep));
         } else {
           this.eventEmitter.emit('start');
-          await this.setCurrentStep(currentStep, false);
+          await this.setCurrentStep(currentStep);
           await this.moveToCurrentStep();
           await this.setVisibility(true);
           this.startTries = 0;
@@ -205,7 +206,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');
+});

yarn.lock

@@ -2859,6 +2859,12 @@ [email protected]:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
+hoist-non-react-statics@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz#fba3e7df0210eb9447757ca1a7cb607162f0a364"
+  dependencies:
+    react-is "^16.3.2"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"