From 96f6bae5c87ad9be1a66e9e57ade9d34764e7dff Mon Sep 17 00:00:00 2001
From: Anupriy R <anupriy.r@anupriy.local>
Date: Mon, 18 Jun 2018 16:37:34 +0530
Subject: [PATCH 1/3] Feat: Support image in tooltip

---
 src/components/ConnectedCopilotStep.js |  2 +
 src/components/Tooltip.js              | 69 ++++++++++++++------------
 src/components/style.js                |  5 ++
 3 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/components/ConnectedCopilotStep.js b/src/components/ConnectedCopilotStep.js
index ba12c13c..56356e7d 100644
--- a/src/components/ConnectedCopilotStep.js
+++ b/src/components/ConnectedCopilotStep.js
@@ -7,6 +7,7 @@ type Props = {
   name: string,
   text: string,
   order: number,
+  imageSource: string,
   _copilot: CopilotContext,
   children: React$Element
 };
@@ -17,6 +18,7 @@ class ConnectedCopilotStep extends Component<Props> {
       name: this.props.name,
       text: this.props.text,
       order: this.props.order,
+      imageSource: this.props.imageSource,
       target: this,
       wrapper: this.wrapper,
     });
diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js
index 94c2a7fa..8246a8c4 100644
--- a/src/components/Tooltip.js
+++ b/src/components/Tooltip.js
@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
 
 import Button from './Button';
 
@@ -24,37 +24,42 @@ const Tooltip = ({
   handlePrev,
   handleStop,
   currentStep,
-}: Props) => (
-  <View>
-    <View style={styles.tooltipContainer}>
-      <Text testID="stepDescription" style={styles.tooltipText}>{currentStep.text}</Text>
+}: Props) => {
+  return (
+    <View>
+      <View style={styles.imageContainer}>
+        <Image style={{ flex: 1 }} source={currentStep.imageSource} />
+      </View>
+      <View style={styles.tooltipContainer}>
+        <Text testID="stepDescription" style={styles.tooltipText}>{currentStep.text}</Text>
+      </View>
+      <View style={[styles.bottomBar]}>
+        {
+          !isLastStep ?
+            <TouchableOpacity onPress={handleStop}>
+              <Button>Skip</Button>
+            </TouchableOpacity>
+            : null
+        }
+        {
+          !isFirstStep ?
+            <TouchableOpacity onPress={handlePrev}>
+              <Button>Previous</Button>
+            </TouchableOpacity>
+            : null
+        }
+        {
+          !isLastStep ?
+            <TouchableOpacity onPress={handleNext}>
+              <Button>Next</Button>
+            </TouchableOpacity> :
+            <TouchableOpacity onPress={handleStop}>
+              <Button>Finish</Button>
+            </TouchableOpacity>
+        }
+      </View>
     </View>
-    <View style={[styles.bottomBar]}>
-      {
-        !isLastStep ?
-          <TouchableOpacity onPress={handleStop}>
-            <Button>Skip</Button>
-          </TouchableOpacity>
-          : null
-      }
-      {
-        !isFirstStep ?
-          <TouchableOpacity onPress={handlePrev}>
-            <Button>Previous</Button>
-          </TouchableOpacity>
-          : null
-      }
-      {
-        !isLastStep ?
-          <TouchableOpacity onPress={handleNext}>
-            <Button>Next</Button>
-          </TouchableOpacity> :
-          <TouchableOpacity onPress={handleStop}>
-            <Button>Finish</Button>
-          </TouchableOpacity>
-      }
-    </View>
-  </View>
-);
+  )
+};
 
 export default Tooltip;
diff --git a/src/components/style.js b/src/components/style.js
index c3286619..b0e15322 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -32,6 +32,11 @@ export default StyleSheet.create({
   },
   tooltipText: {
 
+  },
+  imageContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   tooltipContainer: {
     flex: 1,

From 3e2e12f7e445a14ede45a84f3a824c3914c62187 Mon Sep 17 00:00:00 2001
From: Anupriy R <anupriy.r@anupriy.local>
Date: Tue, 19 Jun 2018 17:12:48 +0530
Subject: [PATCH 2/3] Feat: Support custom extra component in tooltip along
 with imageSource

---
 src/components/ConnectedCopilotStep.js | 2 ++
 src/components/Tooltip.js              | 3 +++
 src/components/style.js                | 5 +++++
 3 files changed, 10 insertions(+)

diff --git a/src/components/ConnectedCopilotStep.js b/src/components/ConnectedCopilotStep.js
index 56356e7d..017511fe 100644
--- a/src/components/ConnectedCopilotStep.js
+++ b/src/components/ConnectedCopilotStep.js
@@ -8,6 +8,7 @@ type Props = {
   text: string,
   order: number,
   imageSource: string,
+  extraComponent: React$Element,
   _copilot: CopilotContext,
   children: React$Element
 };
@@ -19,6 +20,7 @@ class ConnectedCopilotStep extends Component<Props> {
       text: this.props.text,
       order: this.props.order,
       imageSource: this.props.imageSource,
+      extraComponent: this.props.extraComponent,
       target: this,
       wrapper: this.wrapper,
     });
diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js
index 8246a8c4..eed192ad 100644
--- a/src/components/Tooltip.js
+++ b/src/components/Tooltip.js
@@ -27,6 +27,9 @@ const Tooltip = ({
 }: Props) => {
   return (
     <View>
+      <View style={styles.extraComponentContainer}>
+        {currentStep.extraComponent}
+      </View>
       <View style={styles.imageContainer}>
         <Image style={{ flex: 1 }} source={currentStep.imageSource} />
       </View>
diff --git a/src/components/style.js b/src/components/style.js
index b0e15322..9e668bb5 100644
--- a/src/components/style.js
+++ b/src/components/style.js
@@ -32,6 +32,11 @@ export default StyleSheet.create({
   },
   tooltipText: {
 
+  },
+  extraComponentContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   imageContainer: {
     flex: 1,

From b95192708b33ca4d617f56b819b61f4c6fc96508 Mon Sep 17 00:00:00 2001
From: Anupriy R <anupriy.r@anupriy.local>
Date: Thu, 21 Jun 2018 17:28:45 +0530
Subject: [PATCH 3/3] Update doc for the additional feature

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 5242a4ae..cd9e6bd1 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,8 @@ Every `CopilotStep` must have these props:
 1. **name**: A unique name for the walkthrough step.
 2. **order**: A positive number indicating the order of the step in the entire walkthrough.
 3. **text**: The text shown as the description for the step.
+4. **imageSource(optional)**: Image to be shown on the tooltip of walkthrough step.
+5. **extraComponent(optional)**: Any other custom React component or React element to be shown in the tooltip of walkthrough step.
 
 In order to start the tutorial, you can call the `start` prop function in the root component that is injected by `copilot`: