|
|
|
@ -14,27 +14,10 @@ const spec = {
|
|
|
|
|
|
|
|
|
|
const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
|
|
|
|
|
|
|
|
|
|
class ReadFileDropContainer extends React.Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
this.state = { isFileOver: false }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
|
if (!this.props.isOver && nextProps.isOver) {
|
|
|
|
|
this.setState({ isFileOver: true })
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.props.isOver && !nextProps.isOver) {
|
|
|
|
|
this.setState({ isFileOver: false })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const content = (
|
|
|
|
|
const ReadFileDropContainer = props => props.connectDropTarget(
|
|
|
|
|
<div className="dnd-container">
|
|
|
|
|
{ this.state.isFileOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
|
|
|
|
|
{ this.props.children }
|
|
|
|
|
{ props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
|
|
|
|
|
{props.children}
|
|
|
|
|
<style jsx>{`
|
|
|
|
|
.dnd-container {
|
|
|
|
|
position: relative;
|
|
|
|
@ -55,10 +38,6 @@ class ReadFileDropContainer extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
`}</style>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
return this.props.connectDropTarget(content)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
|
|
|
|
|