fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-14 19:05:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow modals to be closed by pressing “back”

Browse source
This commit is contained in:
Thibaut Girka 2018-07-27 11:09:33 +02:00 committed by ThibG
parent 3eb3c21327
commit 5d060cb6e4
1 changed files with 25 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/javascript/flavours/glitch/components/modal_root.js
View file

@ -1,7 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import createHistory from 'history/createBrowserHistory';
export default class ModalRoot extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
children: PropTypes.node,
@ -24,6 +28,7 @@ export default class ModalRoot extends React.PureComponent {
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
this.history = this.context.router ? this.context.router.history : createHistory();
}
componentWillReceiveProps (nextProps) {
@ -41,11 +46,13 @@ export default class ModalRoot extends React.PureComponent {
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
this.activeElement.focus();
this.activeElement = null;
this.handleModalClose();
}
if (this.props.children) {
requestAnimationFrame(() => {
this.setState({ revealed: true });
});
if (!prevProps.children) this.handleModalOpen();
}
}
@ -53,6 +60,24 @@ export default class ModalRoot extends React.PureComponent {
window.removeEventListener('keyup', this.handleKeyUp);
}
handleModalClose () {
this.unlistenHistory();
const state = this.history.location.state;
if (state && state.mastodonModalOpen) {
this.history.goBack();
}
}
handleModalOpen () {
const history = this.history;
const state = {...history.location.state, mastodonModalOpen: true};
history.push(history.location.pathname, state);
this.unlistenHistory = history.listen(() => {
this.props.onClose();
});
}
getSiblings = () => {
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
}