diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2017-12-06 17:44:07 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-12-06 17:44:07 -0500 |
commit | 81b01457598459c42a7b14d9aa14f91ba60dcae1 (patch) | |
tree | 7d3e6dadb75f3be95e5a5ed8b7ecfe90e7711831 /app/javascript/themes/glitch/features/ui/components/modal_root.js | |
parent | f1cbea77a4a52929244198dcbde26d63d837489a (diff) | |
parent | 017fc81caf8f265e5c5543186877437485625795 (diff) |
Merge pull request #229 from glitch-soc/glitch-theme
Advanced Next-Level Flavours And Skins For Mastodon™
Diffstat (limited to 'app/javascript/themes/glitch/features/ui/components/modal_root.js')
-rw-r--r-- | app/javascript/themes/glitch/features/ui/components/modal_root.js | 131 |
1 files changed, 0 insertions, 131 deletions
diff --git a/app/javascript/themes/glitch/features/ui/components/modal_root.js b/app/javascript/themes/glitch/features/ui/components/modal_root.js deleted file mode 100644 index fbe794170..000000000 --- a/app/javascript/themes/glitch/features/ui/components/modal_root.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import BundleContainer from '../containers/bundle_container'; -import BundleModalError from './bundle_modal_error'; -import ModalLoading from './modal_loading'; -import ActionsModal from './actions_modal'; -import MediaModal from './media_modal'; -import VideoModal from './video_modal'; -import BoostModal from './boost_modal'; -import DoodleModal from './doodle_modal'; -import ConfirmationModal from './confirmation_modal'; -import { - OnboardingModal, - MuteModal, - ReportModal, - SettingsModal, - EmbedModal, -} from 'themes/glitch/util/async-components'; - -const MODAL_COMPONENTS = { - 'MEDIA': () => Promise.resolve({ default: MediaModal }), - 'ONBOARDING': OnboardingModal, - 'VIDEO': () => Promise.resolve({ default: VideoModal }), - 'BOOST': () => Promise.resolve({ default: BoostModal }), - 'DOODLE': () => Promise.resolve({ default: DoodleModal }), - 'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }), - 'MUTE': MuteModal, - 'REPORT': ReportModal, - 'SETTINGS': SettingsModal, - 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), - 'EMBED': EmbedModal, -}; - -export default class ModalRoot extends React.PureComponent { - - static propTypes = { - type: PropTypes.string, - props: PropTypes.object, - onClose: PropTypes.func.isRequired, - }; - - state = { - revealed: false, - }; - - handleKeyUp = (e) => { - if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) - && !!this.props.type && !this.props.props.noEsc) { - this.props.onClose(); - } - } - - componentDidMount () { - window.addEventListener('keyup', this.handleKeyUp, false); - } - - componentWillReceiveProps (nextProps) { - if (!!nextProps.type && !this.props.type) { - this.activeElement = document.activeElement; - - this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); - } else if (!nextProps.type) { - this.setState({ revealed: false }); - } - } - - componentDidUpdate (prevProps) { - if (!this.props.type && !!prevProps.type) { - this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); - this.activeElement.focus(); - this.activeElement = null; - } - if (this.props.type) { - requestAnimationFrame(() => { - this.setState({ revealed: true }); - }); - } - } - - componentWillUnmount () { - window.removeEventListener('keyup', this.handleKeyUp); - } - - getSiblings = () => { - return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node); - } - - setRef = ref => { - this.node = ref; - } - - renderLoading = modalId => () => { - return ['MEDIA', 'VIDEO', 'BOOST', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null; - } - - renderError = (props) => { - const { onClose } = this.props; - - return <BundleModalError {...props} onClose={onClose} />; - } - - render () { - const { type, props, onClose } = this.props; - const { revealed } = this.state; - const visible = !!type; - - 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'> - { - visible ? - (<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}> - {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />} - </BundleContainer>) : - null - } - </div> - </div> - </div> - ); - } - -} |