app/javascript/mastodon/features/ui/components/modal_root.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import MediaModal from './media_modal';
   4 import OnboardingModal from './onboarding_modal';
   5 import VideoModal from './video_modal';
   6 import BoostModal from './boost_modal';
   7 import ConfirmationModal from './confirmation_modal';
   8 import TransitionMotion from 'react-motion/lib/TransitionMotion';
   9 import spring from 'react-motion/lib/spring';
  10
  11 const MODAL_COMPONENTS = {
  12   'MEDIA': MediaModal,
  13   'ONBOARDING': OnboardingModal,
  14   'VIDEO': VideoModal,
  15   'BOOST': BoostModal,
  16   'CONFIRM': ConfirmationModal,
  17 };
  18
  19 class ModalRoot extends React.PureComponent {
  20
  21   static propTypes = {
  22     type: PropTypes.string,
  23     props: PropTypes.object,
  24     onClose: PropTypes.func.isRequired,
  25   };
  26
  27   handleKeyUp = (e) => {
  28     if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
  29          && !!this.props.type) {
  30       this.props.onClose();
  31     }
  32   }
  33
  34   componentDidMount () {
  35     window.addEventListener('keyup', this.handleKeyUp, false);
  36   }
  37
  38   componentWillUnmount () {
  39     window.removeEventListener('keyup', this.handleKeyUp);
  40   }
  41
  42   willEnter () {
  43     return { opacity: 0, scale: 0.98 };
  44   }
  45
  46   willLeave () {
  47     return { opacity: spring(0), scale: spring(0.98) };
  48   }
  49
  50   render () {
  51     const { type, props, onClose } = this.props;
  52     const visible = !!type;
  53     const items = [];
  54
  55     if (visible) {
  56       items.push({
  57         key: type,
  58         data: { type, props },
  59         style: { opacity: spring(1), scale: spring(1, { stiffness: 120, damping: 14 }) },
  60       });
  61     }
  62
  63     return (
  64       <TransitionMotion
  65         styles={items}
  66         willEnter={this.willEnter}
  67         willLeave={this.willLeave}>
  68         {interpolatedStyles =>
  69           <div className='modal-root'>
  70             {interpolatedStyles.map(({ key, data: { type, props }, style }) => {
  71               const SpecificComponent = MODAL_COMPONENTS[type];
  72
  73               return (
  74                 <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
  75                   <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
  76                   <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
  77                     <SpecificComponent {...props} onClose={onClose} />
  78                   </div>
  79                 </div>
  80               );
  81             })}
  82           </div>
  83         }
  84       </TransitionMotion>
  85     );
  86   }
  87
  88 }
  89
  90 export default ModalRoot;