skyquake/plugins/composer/src/src/components/DropTarget.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 11/6/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 const DropTarget = React.createClass({
  29         mixins: [PureRenderMixin],
  30         getInitialState() {
  31                 return {isDragHover: false};
  32         },
  33         getDefaultProps() {
  34                 return {onDrop: () => {}, dropZone: null, className: 'DropTarget'};
  35         },
  36         componentWillMount() {
  37         },
  38         componentDidMount() {
  39                 if (this.props.dropZone) {
  40                         const dropTarget = this;
  41                         const dropZone = this.props.dropZone(dropTarget);
  42                         dropZone.on('dragover', this.onDragOver);
  43                         dropZone.on('dragleave', this.onDragLeave);
  44                         dropZone.on('dragend', this.onDragEnd);
  45                         dropZone.on('drop', this.onDrop);
  46                 }
  47         },
  48         componentDidUpdate() {
  49         },
  50         componentWillUnmount() {
  51         },
  52         render() {
  53                 const classNames = ClassNames(this.props.className, 'dnd-target', {'-drag-hover': this.state.isDragHover});
  54                 return (
  55                                 <div className={classNames}
  56                                          onDrop={this.onDrop}
  57                                          onDragEnd={this.onDragEnd}
  58                                          onMouseOut={this.onDragEnd}
  59                                          onDragExit={this.onDragEnd}
  60                                          onDragOver={this.onDragOver}
  61                                          onDragLeave={this.onDragLeave}>{this.props.children}</div>
  62                 );
  63         },
  64         onDragOver(e) {
  65                 // NOTE calling preventDefault makes this a valid drop target
  66                 e.preventDefault();
  67                 e.dataTransfer.dropEffect = 'copy';
  68                 this.setState({isDragHover: true});
  69         },
  70         onDragLeave() {
  71                 this.setState({isDragHover: false});
  72         },
  73         onDragEnd() {
  74                 this.setState({isDragHover: false});
  75         },
  76         onDrop(e) {
  77                 this.setState({isDragHover: false});
  78                 this.props.onDrop(e);
  79         }
  80 });
  81
  82 export default DropTarget;