skyquake/plugins/composer/src/src/components/ModalOverlay.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 /**
  20  * Created by onvelocity on 10/14/15.
  21  */
  22 'use strict';
  23
  24 import React from 'react'
  25 import PureRenderMixin from 'react-addons-pure-render-mixin'
  26 import ClassNames from 'classnames'
  27
  28 import ModalOverlayStore from '../stores/ModalOverlayStore'
  29
  30 import '../styles/ModalOverlay.scss'
  31
  32 const ModalOverlay = React.createClass({
  33         mixins: [PureRenderMixin],
  34         getInitialState() {
  35                 return ModalOverlayStore.getState();
  36         },
  37         getDefaultProps() {
  38         },
  39         componentWillMount() {
  40                 ModalOverlayStore.listen(this.onChange);
  41         },
  42         componentDidMount() {
  43                 window.addEventListener('resize', this.onResizeCapture, true);
  44                 window.addEventListener('mousemove', this.onMouseMoveCapture, true);
  45         },
  46         componentDidUpdate() {
  47         },
  48         componentWillUnmount() {
  49                 ModalOverlayStore.unlisten(this.onChange);
  50                 window.removeEventListener('resize', this.onResize, true);
  51                 window.removeEventListener('mousemove', this.onMouseMoveCapture, true);
  52         },
  53         onChange(state) {
  54                 this.setState(state);
  55         },
  56         onResizeCapture(event) {
  57                 if (event.detail && event.detail.side) {
  58                         if (this.state.visible) {
  59                                 event.preventDefault();
  60                                 event.stopPropagation();
  61                         }
  62                 }
  63         },
  64         onMouseMoveCapture(event) {
  65                 if (this.state.visible) {
  66                         event.preventDefault();
  67                         event.stopPropagation();
  68                 }
  69         },
  70         render() {
  71                 const className = ClassNames('ModalOverlay', {'-is-visible': this.state.visible});
  72                 return (
  73                         <div className={className}>
  74                                 <div className="background" onMouseMoveCapture={this.onMouseMoveCapture}></div>
  75                                 {this.state.ui ? <div className="foreground" onMouseMoveCapture={this.onMouseMoveCapture}><div className="ui">{this.state.ui}</div></div> : null}
  76                         </div>
  77                 );
  78         }
  79 });
  80
  81 export default ModalOverlay;