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 { backdropColor: 'rgba(0, 0, 0, 0.4)', labels: {}, stopOnOutsideClick: false, + nextOnOutsideClick: false, arrowColor: '#fff', }; @@ -233,6 +235,8 @@ class CopilotModal extends Component { 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 }; /**