assets.node_modules.react-dropzone.index.jsx Maven / Gradle / Ivy
/*
*
* * Copyright 2015 Skymind,Inc.
* *
* * Licensed under the Apache License, Version 2.0 (the "License");
* * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* *
* * http://www.apache.org/licenses/LICENSE-2.0
* *
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS,
* * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* * See the License for the specific language governing permissions and
* * limitations under the License.
*
*/
var Dropzone = React.createClass({
getInitialState: function() {
return {
isDragActive: false
}
},
propTypes: {
onDrop: React.PropTypes.func.isRequired,
size: React.PropTypes.number,
style: React.PropTypes.object
},
onDragLeave: function(e) {
this.setState({
isDragActive: false
});
},
onDragOver: function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "copy";
this.setState({
isDragActive: true
});
},
onDrop: function(e) {
e.preventDefault();
this.setState({
isDragActive: false
});
var files;
if (e.dataTransfer) {
files = e.dataTransfer.files;
} else if (e.target) {
files = e.target.files;
}
if (this.props.onDrop) {
files = Array.prototype.slice.call(files);
this.props.onDrop(files);
}
},
onClick: function () {
this.refs.fileInput.getDOMNode().click();
},
render: function() {
var className = this.props.className || 'dropzone';
if (this.state.isDragActive) {
className += ' active';
}
var style = this.props.style || {
width: this.props.size || 100,
height: this.props.size || 100,
borderStyle: this.state.isDragActive ? "solid" : "dashed"
};
if (this.props.className) {
style = this.props.style;
}
return (
{this.props.children}
);
}
});
module.exports = Dropzone;