.circleci
.github
app
chewy
controllers
helpers
javascript
fonts
images
mastodon
actions
components
__tests__
account.js
animated_number.js
attachment_list.js
autosuggest_emoji.js
autosuggest_hashtag.js
autosuggest_input.js
autosuggest_textarea.js
avatar.js
avatar_composite.js
avatar_overlay.js
button.js
column.js
column_back_button.js
column_back_button_slim.js
column_header.js
display_name.js
domain.js
dropdown_menu.js
error_boundary.js
gifv.js
hashtag.js
icon.js
icon_button.js
icon_with_badge.js
intersection_observer_article.js
load_gap.js
load_more.js
load_pending.js
loading_indicator.js
media_gallery.js
missing_indicator.js
modal_root.js
permalink.js
poll.js
radio_button.js
regeneration_indicator.js
relative_timestamp.js
scrollable_list.js
setting_text.js
status.js
status_action_bar.js
status_content.js
status_list.js
timeline_hint.js
containers
features
locales
middleware
reducers
selectors
service_worker
storage
store
utils
api.js
base_polyfills.js
common.js
compare_id.js
extra_polyfills.js
initial_state.js
is_mobile.js
load_keyboard_extensions.js
load_polyfills.js
main.js
performance.js
ready.js
rtl.js
scroll.js
settings.js
stream.js
test_setup.js
uuid.js
packs
styles
lib
mailers
models
policies
presenters
serializers
services
validators
views
workers
bin
config
db
dist
lib
log
nanobox
public
spec
streaming
vendor
.buildpacks
.codeclimate.yml
.dockerignore
.editorconfig
.env.nanobox
.env.production.sample
.env.test
.env.vagrant
.eslintignore
.eslintrc.js
.foreman
.gitattributes
.gitignore
.haml-lint.yml
.nanoignore
.nvmrc
.profile
.rspec
.rubocop.yml
.ruby-version
.sass-lint.yml
.slugignore
.yarnclean
AUTHORS.md
Aptfile
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Capfile
Dockerfile
Gemfile
Gemfile.lock
LICENSE
Procfile
Procfile.dev
README.md
Rakefile
SECURITY.md
Vagrantfile
app.json
babel.config.js
boxfile.yml
config.ru
crowdin.yml
docker-compose.yml
ide-helper.js
package.json
postcss.config.js
priv-config
scalingo.json
yarn.lock
117 lines
3.3 KiB
JavaScript
117 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import 'wicg-inert';
|
|
|
|
export default class ModalRoot extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
onClose: PropTypes.func.isRequired,
|
|
};
|
|
|
|
state = {
|
|
revealed: !!this.props.children,
|
|
};
|
|
|
|
activeElement = this.state.revealed ? document.activeElement : null;
|
|
|
|
handleKeyUp = (e) => {
|
|
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
|
|
&& !!this.props.children) {
|
|
this.props.onClose();
|
|
}
|
|
}
|
|
|
|
handleKeyDown = (e) => {
|
|
if (e.key === 'Tab') {
|
|
const focusable = Array.from(this.node.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((x) => window.getComputedStyle(x).display !== 'none');
|
|
const index = focusable.indexOf(e.target);
|
|
|
|
let element;
|
|
|
|
if (e.shiftKey) {
|
|
element = focusable[index - 1] || focusable[focusable.length - 1];
|
|
} else {
|
|
element = focusable[index + 1] || focusable[0];
|
|
}
|
|
|
|
if (element) {
|
|
element.focus();
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
window.addEventListener('keyup', this.handleKeyUp, false);
|
|
window.addEventListener('keydown', this.handleKeyDown, false);
|
|
}
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
if (!!nextProps.children && !this.props.children) {
|
|
this.activeElement = document.activeElement;
|
|
|
|
this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
|
|
} else if (!nextProps.children) {
|
|
this.setState({ revealed: false });
|
|
}
|
|
}
|
|
|
|
componentDidUpdate (prevProps) {
|
|
if (!this.props.children && !!prevProps.children) {
|
|
this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
|
|
|
|
// Because of the wicg-inert polyfill, the activeElement may not be
|
|
// immediately selectable, we have to wait for observers to run, as
|
|
// described in https://github.com/WICG/inert#performance-and-gotchas
|
|
Promise.resolve().then(() => {
|
|
this.activeElement.focus({ preventScroll: true });
|
|
this.activeElement = null;
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
if (this.props.children) {
|
|
requestAnimationFrame(() => {
|
|
this.setState({ revealed: true });
|
|
});
|
|
}
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
window.removeEventListener('keyup', this.handleKeyUp);
|
|
window.removeEventListener('keydown', this.handleKeyDown);
|
|
}
|
|
|
|
getSiblings = () => {
|
|
return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
|
|
}
|
|
|
|
setRef = ref => {
|
|
this.node = ref;
|
|
}
|
|
|
|
render () {
|
|
const { children, onClose } = this.props;
|
|
const { revealed } = this.state;
|
|
const visible = !!children;
|
|
|
|
if (!visible) {
|
|
return (
|
|
<div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}>
|
|
<div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
|
|
<div role='presentation' className='modal-root__overlay' onClick={onClose} />
|
|
<div role='dialog' className='modal-root__container'>{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|