add file drop overlay

main
Jake Dexheimer 7 years ago
parent 60c92fe07f
commit d819727285

@ -12,8 +12,53 @@ const spec = {
} }
} }
const collect = connect => ({ connectDropTarget: connect.dropTarget() }) const collect = (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver() })
const ReadFileDropContainer = props => props.connectDropTarget(props.children) 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 = (
<div className="dnd-container">
{ this.state.isFileOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
{ this.props.children }
<style jsx>{`
.dnd-container {
position: relative;
}
.dnd-overlay {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
z-index: 999;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.85);
}
`}</style>
</div>
)
return this.props.connectDropTarget(content)
}
}
export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer) export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)

@ -92,7 +92,7 @@ export default () =>
.link { .link {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
padding-bottom: 2px; padding-bottom: 3px;
background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%); background: linear-gradient(to right, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 0.7) 100%);
background-size: 1px 1px; background-size: 1px 1px;
background-position: 0 100%; background-position: 0 100%;

@ -43,6 +43,7 @@ export default () => (
ul { ul {
list-style-position: inside; list-style-position: inside;
list-style-type: circle;
} }
.about { .about {

Loading…
Cancel
Save