From a812999dfcc8a3393af753d246968f7f9b8c49e9 Mon Sep 17 00:00:00 2001
From: Lizzi Lindboe <lindboe@users.noreply.github.com>
Date: Wed, 8 Sep 2021 16:24:28 -0700
Subject: [PATCH] Add `nextOnOutsideClick` option

Adds the option to advance the tutorial when the user clicks outside the
step component. Useful for tooltip styles without labeled buttons (i.e.,
clicking anywhere on the screen should advance).
---
 src/components/CopilotModal.js | 4 ++++
 src/hocs/copilot.js            | 3 +++
 src/index.d.ts                 | 1 +
 3 files changed, 8 insertions(+)

diff --git a/src/components/CopilotModal.js b/src/components/CopilotModal.js
index 2a824393..9d284b6f 100644
--- a/src/components/CopilotModal.js
+++ b/src/components/CopilotModal.js
@@ -27,6 +27,7 @@ type Props = {
   labels: Object,
   svgMaskPath?: SvgMaskPathFn,
   stopOnOutsideClick?: boolean,
+  nextOnOutsideClick?: boolean,
   arrowColor?: string,
 };
 
@@ -58,6 +59,7 @@ class CopilotModal extends Component<Props, State> {
     backdropColor: 'rgba(0, 0, 0, 0.4)',
     labels: {},
     stopOnOutsideClick: false,
+    nextOnOutsideClick: false,
     arrowColor: '#fff',
   };
 
@@ -233,6 +235,8 @@ class CopilotModal extends Component<Props, State> {
   handleMaskClick = () => {
     if (this.props.stopOnOutsideClick) {
       this.handleStop();
+    } else if (this.props.nextOnOutsideClick) {
+      isLastStep ? this.handleStop() : this.handleNext();
     }
   };
 
diff --git a/src/hocs/copilot.js b/src/hocs/copilot.js
index 85d09659..5debe97b 100644
--- a/src/hocs/copilot.js
+++ b/src/hocs/copilot.js
@@ -28,6 +28,7 @@ type State = {
   backdropColor: string,
   scrollView?: React.RefObject,
   stopOnOutsideClick?: boolean,
+  nextOnOutsideClick?: boolean,
 };
 
 const copilot = ({
@@ -40,6 +41,7 @@ const copilot = ({
   androidStatusBarVisible,
   backdropColor,
   stopOnOutsideClick = false,
+  nextOnOutsideClick = false,
   svgMaskPath,
   verticalOffset = 0,
   wrapperStyle,
@@ -219,6 +221,7 @@ const copilot = ({
               backdropColor={backdropColor}
               svgMaskPath={svgMaskPath}
               stopOnOutsideClick={stopOnOutsideClick}
+              nextOnOutsideClick={nextOnOutsideClick}
               arrowColor={arrowColor}
               ref={(modal) => { this.modal = modal; }}
             />
diff --git a/src/index.d.ts b/src/index.d.ts
index 2781de4f..2cde325d 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -36,6 +36,7 @@ declare module 'react-native-copilot' {
     backdropColor?: string; // You can customize the mask color - default is rgba(0, 0, 0, 0.4)
     verticalOffset?: number; // In order to adjust vertical position
     stopOnOutsideClick?: boolean; // Whether the tutorial should stop after clicking outside the step component
+    nextOnOutsideClick?: boolean; // Whether the tutorial should advance after clicking outside the step componentstop
   };
 
   /**