react-router-navigation-prompt
Advanced tools
Comparing version
{ | ||
"name": "react-router-navigation-prompt", | ||
"version": "1.2.3", | ||
"version": "1.3.0", | ||
"description": "A replacement component for the react-router `<Prompt/>`. Allows for more flexible dialogs.", | ||
"scripts": { | ||
"build": "webpack", | ||
"prepublishOnly": "npm run build", | ||
"flow": "flow", | ||
"flow-typed": "flow-typed", | ||
"lint": "eslint --ext .js src/", | ||
"prepare": "npm run lint; npm run flow; npm run build", | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
@@ -32,3 +35,2 @@ }, | ||
"dependencies": { | ||
"prop-types": "^15.6.0", | ||
"react": "^16.0.0", | ||
@@ -38,8 +40,17 @@ "react-router-dom": "^4.2.2" | ||
"devDependencies": { | ||
"babel-cli": "^6.26.0", | ||
"babel-core": "^6.26.0", | ||
"babel-eslint": "^8.0.1", | ||
"babel-loader": "^7.1.2", | ||
"babel-preset-env": "^1.6.1", | ||
"babel-preset-flow": "^6.23.0", | ||
"babel-preset-react": "^6.24.1", | ||
"eslint": "^4.9.0", | ||
"eslint-config-google": "^0.9.1", | ||
"eslint-plugin-flowtype": "^2.39.1", | ||
"eslint-plugin-react": "^7.4.0", | ||
"flow-bin": "^0.57.3", | ||
"flow-typed": "^2.2.0", | ||
"webpack": "^3.8.1" | ||
} | ||
} |
@@ -0,5 +1,18 @@ | ||
/* @flow */ | ||
import React from 'react'; | ||
import {withRouter} from 'react-router-dom'; | ||
import PropTypes from 'prop-types'; | ||
import type {HistoryAction, Location, RouterHistory} from 'react-router-dom'; | ||
declare type PropsT = { | ||
children: (data: {isActive: bool, onCancel: Function, onConfirm: Function}) => React$Element<*>, | ||
history: RouterHistory, | ||
renderIfNotActive: bool, | ||
when: bool | ||
}; | ||
declare type StateT = { | ||
action: ?HistoryAction, | ||
nextLocation: ?Location, | ||
isActive: bool | ||
}; | ||
/** | ||
@@ -22,10 +35,9 @@ * A replacement component for the react-router `Prompt`. | ||
*/ | ||
class NavigationPrompt extends React.Component | ||
{ | ||
class NavigationPrompt extends React.Component<PropsT, StateT> { | ||
constructor(props) { | ||
super(props); | ||
this.onBeforeUnload = this.onBeforeUnload.bind(this); | ||
this.onCancel = this.onCancel.bind(this); | ||
this.onConfirm = this.onConfirm.bind(this); | ||
this.unblock = props.history.block((nextLocation, action) => { | ||
(this:Object).onBeforeUnload = this.onBeforeUnload.bind(this); | ||
(this:Object).onCancel = this.onCancel.bind(this); | ||
(this:Object).onConfirm = this.onConfirm.bind(this); | ||
(this:Object).unblock = props.history.block((nextLocation, action) => { | ||
if (this.props.when) { | ||
@@ -52,2 +64,17 @@ this.setState({ | ||
navigateToNextLocation() { | ||
let {action, nextLocation} = this.state; | ||
action = { | ||
'POP': 'goBack', | ||
'PUSH': 'push', | ||
'REPLACE': 'replace' | ||
}[action || 'PUSH']; | ||
if (!nextLocation) nextLocation = {pathname: '/'}; | ||
const {history} = this.props; | ||
this.unblock(); | ||
if (action === 'goBack') return void history.goBack(); | ||
history[action](nextLocation.pathname); | ||
} | ||
onCancel() { | ||
@@ -61,17 +88,2 @@ this.setState({action: null, nextLocation: null, isActive: false}); | ||
navigateToNextLocation() { | ||
let {action, nextLocation} = this.state; | ||
action = action.toLowerCase(); | ||
const {history} = this.props; | ||
this.unblock(); | ||
if (typeof history[action] === 'function') { | ||
history[action](nextLocation.pathname); | ||
} else if (action === 'pop' && typeof history.goBack === 'function') { | ||
history.goBack(); | ||
} else { | ||
history.push(nextLocation.pathname); | ||
} | ||
} | ||
onBeforeUnload(e) { | ||
@@ -102,7 +114,2 @@ if (!this.props.when) return; | ||
NavigationPrompt.propTypes = { | ||
when: PropTypes.bool.isRequired, | ||
children: PropTypes.func.isRequired, | ||
}; | ||
export default withRouter(NavigationPrompt); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
404178
85.8%2
-33.33%22
214.29%9712
107.97%14
180%- Removed