sforkowany z mirror/soapbox
Remove 'beforeunload' event from UI
This only works in MS Edge but likely causes re-rendering of the UI on compose events in every browser. There are better ways to prevent data loss, like storing the composer state in localStorage.actually-fix-tabs-bar
rodzic
90a062e9a3
commit
e87affbbca
|
@ -157,9 +157,6 @@ const mapStateToProps = state => {
|
||||||
const account = state.getIn(['accounts', me]);
|
const account = state.getIn(['accounts', me]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isComposing: state.getIn(['compose', 'is_composing']),
|
|
||||||
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
|
|
||||||
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
|
|
||||||
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
|
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
|
||||||
accessToken: getAccessToken(state),
|
accessToken: getAccessToken(state),
|
||||||
streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
|
streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
|
||||||
|
@ -339,9 +336,6 @@ class UI extends React.PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
isComposing: PropTypes.bool,
|
|
||||||
hasComposingText: PropTypes.bool,
|
|
||||||
hasMediaAttachments: PropTypes.bool,
|
|
||||||
location: PropTypes.object,
|
location: PropTypes.object,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
dropdownMenuIsOpen: PropTypes.bool,
|
dropdownMenuIsOpen: PropTypes.bool,
|
||||||
|
@ -356,17 +350,6 @@ class UI extends React.PureComponent {
|
||||||
mobile: isMobile(window.innerWidth),
|
mobile: isMobile(window.innerWidth),
|
||||||
};
|
};
|
||||||
|
|
||||||
handleBeforeUnload = (e) => {
|
|
||||||
const { intl, isComposing, hasComposingText, hasMediaAttachments } = this.props;
|
|
||||||
|
|
||||||
if (isComposing && (hasComposingText || hasMediaAttachments)) {
|
|
||||||
// Setting returnValue to any string causes confirmation dialog.
|
|
||||||
// Many browsers no longer display this text to users,
|
|
||||||
// but we set user-friendly message for other browsers, e.g. Edge.
|
|
||||||
e.returnValue = intl.formatMessage(messages.beforeUnload);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLayoutChange = () => {
|
handleLayoutChange = () => {
|
||||||
// The cached heights are no longer accurate, invalidate
|
// The cached heights are no longer accurate, invalidate
|
||||||
this.props.dispatch(clearHeight());
|
this.props.dispatch(clearHeight());
|
||||||
|
@ -471,9 +454,8 @@ class UI extends React.PureComponent {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
const { account } = this.props;
|
const { account } = this.props;
|
||||||
if (!account) return;
|
if (!account) return;
|
||||||
window.addEventListener('beforeunload', this.handleBeforeUnload, false);
|
|
||||||
window.addEventListener('resize', this.handleResize, { passive: true });
|
|
||||||
|
|
||||||
|
window.addEventListener('resize', this.handleResize, { passive: true });
|
||||||
document.addEventListener('dragenter', this.handleDragEnter, false);
|
document.addEventListener('dragenter', this.handleDragEnter, false);
|
||||||
document.addEventListener('dragover', this.handleDragOver, false);
|
document.addEventListener('dragover', this.handleDragOver, false);
|
||||||
document.addEventListener('drop', this.handleDrop, false);
|
document.addEventListener('drop', this.handleDrop, false);
|
||||||
|
@ -515,7 +497,6 @@ class UI extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
window.removeEventListener('beforeunload', this.handleBeforeUnload);
|
|
||||||
window.removeEventListener('resize', this.handleResize);
|
window.removeEventListener('resize', this.handleResize);
|
||||||
document.removeEventListener('dragenter', this.handleDragEnter);
|
document.removeEventListener('dragenter', this.handleDragEnter);
|
||||||
document.removeEventListener('dragover', this.handleDragOver);
|
document.removeEventListener('dragover', this.handleDragOver);
|
||||||
|
|
Ładowanie…
Reference in New Issue