4 * Copyright 2016 RIFT.IO Inc
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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
20 * Created by onvelocity on 11/6/15.
24 import React
from 'react'
25 import PureRenderMixin
from 'react-addons-pure-render-mixin'
26 import ClassNames
from 'classnames'
28 const DropTarget
= React
.createClass({
29 mixins
: [PureRenderMixin
],
31 return {isDragHover
: false};
34 return {onDrop
: () => {}, dropZone
: null, className
: 'DropTarget'};
36 componentWillMount() {
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
);
48 componentDidUpdate() {
50 componentWillUnmount() {
53 const classNames
= ClassNames(this.props
.className
, 'dnd-target', {'-drag-hover': this.state
.isDragHover
});
55 <div className
={classNames
}
57 onDragEnd
={this.onDragEnd
}
58 onMouseOut
={this.onDragEnd
}
59 onDragExit
={this.onDragEnd
}
60 onDragOver
={this.onDragOver
}
61 onDragLeave
={this.onDragLeave
}>{this.props
.children
}</div
>
65 // NOTE calling preventDefault makes this a valid drop target
67 e
.dataTransfer
.dropEffect
= 'copy';
68 this.setState({isDragHover
: true});
71 this.setState({isDragHover
: false});
74 this.setState({isDragHover
: false});
77 this.setState({isDragHover
: false});
82 export default DropTarget
;