mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import { createElement, Component } from 'react'
|
|
import { DropTarget } from 'react-dnd'
|
|
import { NativeTypes } from 'react-dnd-html5-backend'
|
|
|
|
const spec = {
|
|
drop(props, monitor, component) {
|
|
const { files } = monitor.getItem()
|
|
const reader = new FileReader()
|
|
Promise.all(
|
|
files
|
|
.filter(props.filter || (i => i))
|
|
.map(file => new Promise((resolve, reject) => {
|
|
reader.onload = event => {
|
|
file.content = event.target.result
|
|
resolve(file)
|
|
}
|
|
reader.readAsText(file, 'UTF-8')
|
|
}))
|
|
).then(files => {
|
|
component.setState(state => ({
|
|
lastContent: files,
|
|
history: [files, ...state.history]
|
|
}))
|
|
props.onDrop(files)
|
|
})
|
|
}
|
|
}
|
|
|
|
const collect = (connect, monitor) => ({
|
|
connectDropTarget: connect.dropTarget(),
|
|
monitor,
|
|
isOver: monitor.isOver(),
|
|
canDrop: monitor.canDrop()
|
|
})
|
|
|
|
class ReadFileDropContainer extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
lastContent: null,
|
|
history: []
|
|
}
|
|
}
|
|
render() {
|
|
return this.props.connectDropTarget(
|
|
createElement(
|
|
'div',
|
|
null,
|
|
this.props.children({
|
|
__monitor__: this.props.monitor,
|
|
isOver: this.props.isOver,
|
|
canDrop: this.props.canDrop,
|
|
files: this.state.lastContent,
|
|
history: this.state.history
|
|
})
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
export default DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
|