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.
65 lines
1.6 KiB
JavaScript
65 lines
1.6 KiB
JavaScript
const { createElement, Component } = require('react')
|
|
const { DropTarget } = require('react-dnd')
|
|
const { NativeTypes } = require('react-dnd-html5-backend')
|
|
|
|
const spec = {
|
|
drop(props, monitor, component) {
|
|
const {files} = monitor.getItem()
|
|
Promise.all(
|
|
files
|
|
.filter(props.filter || (i => i))
|
|
.map(file => {
|
|
const reader = new FileReader()
|
|
return 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,
|
|
})
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
module.exports = exports.default = DropTarget(NativeTypes.FILE, spec, collect)(ReadFileDropContainer)
|