hiro/Vulcan
1
0
Fork 0
mirror of https://github.com/vale981/Vulcan synced 2025-03-05 09:31:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated warnUnsavedChanges

Browse source
This commit is contained in:
eric-burel 2019-03-15 15:55:02 +01:00
parent 339215e6f3
commit c7965e3b0f
1 changed files with 88 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
packages/vulcan-forms/lib/components/Form.jsx
View file

@ -720,8 +720,72 @@ class SmartForm extends Component {
/*
Warn the user if there are unsaved changes
Install a route leave hook to warn the user if there are unsaved changes
*/
componentDidMount = () => {
this.checkRouteChange();
this.checkBrowserClosing();
}
/*
Remove the closing browser check on component unmount
see https://gist.github.com/mknabe/bfcb6db12ef52323954a28655801792d
*/
componentWillUnmount = () => {
if (this.getWarnUnsavedChanges()) {
// unblock route change
if (this.unblock) {
this.unblock();
}
// unblock browser change
window.onbeforeunload = undefined; //undefined instead of null to support IE
}
};
// -------------------- Check on form leaving ----- //
/**
* Check if we must warn user on unsaved change
*/
getWarnUnsavedChanges = () => {
let warnUnsavedChanges = getSetting('forms.warnUnsavedChanges');
if (typeof this.props.warnUnsavedChanges === 'boolean') {
warnUnsavedChanges = this.props.warnUnsavedChanges;
}
return warnUnsavedChanges;
}
// check for route change, prevent form content loss
checkRouteChange = () => {
// @see https://github.com/ReactTraining/react-router/issues/4635#issuecomment-297828995
// @see https://github.com/ReactTraining/history#blocking-transitions
if (this.getWarnUnsavedChanges()) {
this.unblock = this.props.history.block((location, action) => {
// return the message that will pop into a window.confirm alert
// if returns nothing, the message won't appear and the user won't be blocked
return this.handleRouteLeave();
/*
// React-router 3 implementtion
const routes = this.props.router.routes;
const currentRoute = routes[routes.length - 1];
this.props.router.setRouteLeaveHook(currentRoute, this.handleRouteLeave);
*/
});
}
}
// check for browser closing
checkBrowserClosing = () => {
//check for closing the browser with unsaved changes too
window.onbeforeunload = this.handlePageLeave;
}
/*
Check if the user has unsaved changes, returns a message if yes
and nothing if not
*/
handleRouteLeave = () => {
if (this.isChanged()) {
@ -733,9 +797,13 @@ class SmartForm extends Component {
}
};
//see https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
//the message returned is actually ignored by most browsers and a default message 'Are you sure you want to leave this page? You might have unsaved changes' is displayed. See the Notes section on the mozilla docs above
handlePageLeave = event => {
/**
* Same for browser closing
*
* see https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
* the message returned is actually ignored by most browsers and a default message 'Are you sure you want to leave this page? You might have unsaved changes' is displayed. See the Notes section on the mozilla docs above
*/
handlePageLeave = (event) => {
if (this.isChanged()) {
const message = this.context.intl.formatMessage({
id: 'forms.confirm_discard',
@ -748,41 +816,6 @@ class SmartForm extends Component {
return message;
}
};
/*
Install a route leave hook to warn the user if there are unsaved changes
*/
componentDidMount = () => {
let warnUnsavedChanges = getSetting('forms.warnUnsavedChanges');
if (typeof this.props.warnUnsavedChanges === 'boolean') {
warnUnsavedChanges = this.props.warnUnsavedChanges;
}
if (warnUnsavedChanges) {
const routes = this.props.router.routes;
const currentRoute = routes[routes.length - 1];
this.props.router.setRouteLeaveHook(currentRoute, this.handleRouteLeave);
//check for closing the browser with unsaved changes
window.onbeforeunload = this.handlePageLeave;
}
};
/*
Remove the closing browser check on component unmount
see https://gist.github.com/mknabe/bfcb6db12ef52323954a28655801792d
*/
componentWillUnmount = () => {
let warnUnsavedChanges = getSetting('forms.warnUnsavedChanges');
if (typeof this.props.warnUnsavedChanges === 'boolean') {
warnUnsavedChanges = this.props.warnUnsavedChanges;
}
if (warnUnsavedChanges) {
window.onbeforeunload = undefined; //undefined instead of null to support IE
}
};
/*
Returns true if there are any differences between the initial document and the current one