Feature/next location as props

CHANGELOG.md

@@ -3,6 +3,11 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+## [1.10.1] - 2023-01-10
+### Changed
+- Added nextLocation and action to childData
+- Added callbacks which will be called on become active: onShow() and onShowNative()
+- Added method to navigate to another route during the prompt is active
 
 ## [1.9.6] - 2022-02-13
 ### Fixed

README.md

@@ -100,13 +100,17 @@ import Modal from "./your-own-code";
 - `props`
   - afterCancel?: Function,
   - afterConfirm?: Function,
-  - allowGoBack: bool (use _goBack_ method instead of _push_ when navigating back -- !! NOTE WELL !! it will _always_ navigate back only 1 item, even when it should navigate back more items.  read more: https://github.com/ZacharyRSmith/react-router-navigation-prompt/pull/30),
+  - afterSkip?: Function,
+  - allowGoBack?: bool (use _goBack_ method instead of _push_ when navigating back -- !! NOTE WELL !! it will _always_ navigate back only 1 item, even when it should navigate back more items.  read more: https://github.com/ZacharyRSmith/react-router-navigation-prompt/pull/30),
   - beforeCancel?: Function,
   - beforeConfirm?: Function,
-  - children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<\*>,
-  - renderIfNotActive: bool,
+  - beforeSkip?: Function,
+  - onShow?: (data: {action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string, action?: HistoryAction) => void}) => void,
+  - onShowNative?: Function,
+  - children: (data: {isActive: bool, action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string, action?: HistoryAction) => void}) => React$Element<\*>,
+  - renderIfNotActive?: bool,
   - when: bool | (Location, ?Location, ?HistoryAction) => bool,
-  - disableNative: bool,
+  - disableNative?: bool,
     // Added by react-router:
   - match: Match,
   - history: RouterHistory,

es/index.js.flow

@@ -8,14 +8,18 @@ declare type PropsT = {
   afterConfirm?: Function,
   beforeCancel?: Function,
   beforeConfirm?: Function,
-  children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<*>,
+  beforeSkip?: Function,
+  afterSkip?: Function,
+  onShow?: (data: {action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string | URL, action?: HistoryAction) => void}) => void,
+  onShowNative?: Function,
+  children: (data: {isActive: bool, action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string | URL, action?: HistoryAction) => void}) => React$Element<*>,
   match: Match,
   history: RouterHistory,
   location: Location,
   renderIfNotActive?: bool,
   when: bool | (Location, ?Location, ?HistoryAction) => bool,
   disableNative?: bool,
-  allowGoBack?: bool,
+  allowGoBack?: bool
 };
 declare type StateT = {
   action: ?HistoryAction,
@@ -67,6 +71,7 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     (this:Object).onBeforeUnload = this.onBeforeUnload.bind(this);
     (this:Object).onCancel = this.onCancel.bind(this);
     (this:Object).onConfirm = this.onConfirm.bind(this);
+    (this:Object).onSkip = this.onSkip.bind(this);
     (this:Object).when = this.when.bind(this);
 
     this.state = {...initState, unblock: () => {}/* unblock will be set in componentDidMount */};
@@ -85,6 +90,8 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
       this.props.afterCancel();
     } else if (this._prevUserAction === 'CONFIRM' && typeof this.props.afterConfirm === 'function') {
       this.props.afterConfirm();
+    } else if (this._prevUserAction === 'SKIP' && typeof this.props.afterSkip === 'function') {
+      this.props.afterSkip();
     }
     this._prevUserAction = '';
   }
@@ -108,12 +115,20 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
         action,
         nextLocation,
         isActive: true
-      });
+      }, () => this.props.onShow &&
+        this.props.onShow({
+          action: this.state.action,
+          nextLocation: this.state.nextLocation,
+          onConfirm: this.onConfirm,
+          onCancel: this.onCancel,
+          onSkip: this.onSkip
+        })
+      );
     }
     return !result;
   }
 
-  navigateToNextLocation(cb) {
+  navigateToNextLocation() {
     let {action, nextLocation} = this.state;
     action = {
       'POP': this.props.allowGoBack ? 'goBack' : 'push',
@@ -152,6 +167,57 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     }
   }
 
+  navigateTo(nextLocation, action) {
+    const method = {
+      'POP': '',
+      'PUSH': 'push',
+      'REPLACE': 'replace'
+    }[action || 'PUSH'];
+    if (!method)
+      throw new Error('Action is not supported!');
+
+    const {history} = this.props;
+
+    this.state.unblock();
+    this._prevUserAction = 'SKIP';
+    // $FlowFixMe history.replace()'s type expects LocationShape even though it works with Location.
+    history[method](nextLocation); // could unmount at this point
+    if (this._isMounted) { // Just in case we unmounted on the route change
+      this.setState({
+        ...initState,
+        unblock: this.props.history.block(this.block)
+      }); // FIXME?  Does history.listen need to be used instead, for async?
+    }
+  }
+
+  navigateToNative(nextLocation, action) {
+    if (!this.props.disableNative) {
+      window.removeEventListener('beforeunload', this.onBeforeUnload);
+    }
+
+    if (action === 'PUSH') {
+      window.location.assign(nextLocation);
+    } else if (action === 'REPLACE') {
+      window.location.replace(nextLocation);
+    } else {
+      throw new Error('Action is not supported!');
+    }
+  }
+
+  onSkip(nextLocation, action) {
+    (this.props.beforeSkip || ((cb) => {
+      cb();
+    }))(() => {
+      if (nextLocation instanceof URL) {
+        this.navigateToNative(nextLocation.toString(), action);
+      } else if (typeof nextLocation === 'string' && /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(nextLocation)) {
+        this.navigateToNative(nextLocation, action);
+      } else {
+        this.navigateTo(nextLocation, action);
+      }
+    });
+  }
+
   onCancel() {
     (this.props.beforeCancel || ((cb) => {
      cb();
@@ -165,12 +231,13 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     (this.props.beforeConfirm || ((cb) => {
      cb();
     }))(() => {
-      this.navigateToNextLocation(this.props.afterConfirm);
+      this.navigateToNextLocation();
     });
   }
 
   onBeforeUnload(e) {
     if (!this.when()) return;
+    this.props.onShowNative && this.props.onShowNative();
     const msg = 'Do you want to leave this site?\n\nChanges you made may not be saved.';
     e.returnValue = msg;
     return msg;
@@ -190,8 +257,11 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
       <div>
         {this.props.children({
           isActive: this.state.isActive,
+          action: this.state.action,
+          nextLocation: this.state.nextLocation,
           onConfirm: this.onConfirm,
-          onCancel: this.onCancel
+          onCancel: this.onCancel,
+          onSkip: this.onSkip
         })}
       </div>
     );

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-router-navigation-prompt",
-  "version": "1.9.6",
+  "name": "react-router-navigation-prompt-flow",
+  "version": "1.10.3",
   "description": "A replacement component for the react-router `<Prompt/>`. Allows for more flexible dialogs.",
   "scripts": {
     "build": "webpack",
@@ -15,7 +15,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ZacharyRSmith/react-router-navigation-prompt.git"
+    "url": "git+https://github.com/VOMATEC-Innovations/react-router-navigation-prompt.git"
   },
   "keywords": [
     "confirm",
@@ -26,6 +26,7 @@
     "user"
   ],
   "author": "@ZacharyRSmith",
+  "contributors": ["Fabian Wassenhoven <[email protected]>"],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/ZacharyRSmith/react-router-navigation-prompt/issues"
@@ -66,6 +67,7 @@
     "testcafe": "^1.18.3",
     "typescript": "^3.1.1",
     "webpack": "^5.68.0",
+    "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.7.4"
   }
 }

src/index.js

@@ -8,14 +8,18 @@ declare type PropsT = {
   afterConfirm?: Function,
   beforeCancel?: Function,
   beforeConfirm?: Function,
-  children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<*>,
+  beforeSkip?: Function,
+  afterSkip?: Function,
+  onShow?: (data: {action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string | URL, action?: HistoryAction) => void}) => void,
+  onShowNative?: Function,
+  children: (data: {isActive: bool, action: ?HistoryAction, nextLocation: ?Location, onCancel: Function, onConfirm: Function, onSkip: (nextLocation: Location | string | URL, action?: HistoryAction) => void}) => React$Element<*>,
   match: Match,
   history: RouterHistory,
   location: Location,
   renderIfNotActive?: bool,
   when: bool | (Location, ?Location, ?HistoryAction) => bool,
   disableNative?: bool,
-  allowGoBack?: bool,
+  allowGoBack?: bool
 };
 declare type StateT = {
   action: ?HistoryAction,
@@ -67,6 +71,7 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     (this:Object).onBeforeUnload = this.onBeforeUnload.bind(this);
     (this:Object).onCancel = this.onCancel.bind(this);
     (this:Object).onConfirm = this.onConfirm.bind(this);
+    (this:Object).onSkip = this.onSkip.bind(this);
     (this:Object).when = this.when.bind(this);
 
     this.state = {...initState, unblock: () => {}/* unblock will be set in componentDidMount */};
@@ -85,6 +90,8 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
       this.props.afterCancel();
     } else if (this._prevUserAction === 'CONFIRM' && typeof this.props.afterConfirm === 'function') {
       this.props.afterConfirm();
+    } else if (this._prevUserAction === 'SKIP' && typeof this.props.afterSkip === 'function') {
+      this.props.afterSkip();
     }
     this._prevUserAction = '';
   }
@@ -108,12 +115,20 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
         action,
         nextLocation,
         isActive: true
-      });
+      }, () => this.props.onShow &&
+        this.props.onShow({
+          action: this.state.action,
+          nextLocation: this.state.nextLocation,
+          onConfirm: this.onConfirm,
+          onCancel: this.onCancel,
+          onSkip: this.onSkip
+        })
+      );
     }
     return !result;
   }
 
-  navigateToNextLocation(cb) {
+  navigateToNextLocation() {
     let {action, nextLocation} = this.state;
     action = {
       'POP': this.props.allowGoBack ? 'goBack' : 'push',
@@ -152,6 +167,57 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     }
   }
 
+  navigateTo(nextLocation, action) {
+    const method = {
+      'POP': '',
+      'PUSH': 'push',
+      'REPLACE': 'replace'
+    }[action || 'PUSH'];
+    if (!method)
+      throw new Error('Action is not supported!');
+
+    const {history} = this.props;
+
+    this.state.unblock();
+    this._prevUserAction = 'SKIP';
+    // $FlowFixMe history.replace()'s type expects LocationShape even though it works with Location.
+    history[method](nextLocation); // could unmount at this point
+    if (this._isMounted) { // Just in case we unmounted on the route change
+      this.setState({
+        ...initState,
+        unblock: this.props.history.block(this.block)
+      }); // FIXME?  Does history.listen need to be used instead, for async?
+    }
+  }
+
+  navigateToNative(nextLocation, action) {
+    if (!this.props.disableNative) {
+      window.removeEventListener('beforeunload', this.onBeforeUnload);
+    }
+
+    if (action === 'PUSH') {
+      window.location.assign(nextLocation);
+    } else if (action === 'REPLACE') {
+      window.location.replace(nextLocation);
+    } else {
+      throw new Error('Action is not supported!');
+    }
+  }
+
+  onSkip(nextLocation, action) {
+    (this.props.beforeSkip || ((cb) => {
+      cb();
+    }))(() => {
+      if (nextLocation instanceof URL) {
+        this.navigateToNative(nextLocation.toString(), action);
+      } else if (typeof nextLocation === 'string' && /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/.test(nextLocation)) {
+        this.navigateToNative(nextLocation, action);
+      } else {
+        this.navigateTo(nextLocation, action);
+      }
+    });
+  }
+
   onCancel() {
     (this.props.beforeCancel || ((cb) => {
      cb();
@@ -165,12 +231,13 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
     (this.props.beforeConfirm || ((cb) => {
      cb();
     }))(() => {
-      this.navigateToNextLocation(this.props.afterConfirm);
+      this.navigateToNextLocation();
     });
   }
 
   onBeforeUnload(e) {
     if (!this.when()) return;
+    this.props.onShowNative && this.props.onShowNative();
     const msg = 'Do you want to leave this site?\n\nChanges you made may not be saved.';
     e.returnValue = msg;
     return msg;
@@ -190,8 +257,11 @@ class NavigationPrompt extends React.Component<PropsT, StateT> {
       <div>
         {this.props.children({
           isActive: this.state.isActive,
+          action: this.state.action,
+          nextLocation: this.state.nextLocation,
           onConfirm: this.onConfirm,
-          onCancel: this.onCancel
+          onCancel: this.onCancel,
+          onSkip: this.onSkip
         })}
       </div>
     );