76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
|
import React, { PropTypes, Component } from 'react'
|
||
|
|
import Dropzone from 'react-dropzone'
|
||
|
|
|
||
|
|
class ImportDialogBox extends Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
showImportInstructions: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleExport = format => () => {
|
||
|
|
window.open(`${window.location.pathname}/export.${format}`, '_blank')
|
||
|
|
}
|
||
|
|
|
||
|
|
handleFile = (files, e) => {
|
||
|
|
// for some reason it uploads twice, so we need this debouncer
|
||
|
|
this.debouncer = this.debouncer || window.setTimeout(() => this.debouncer = null, 10)
|
||
|
|
if (!this.debouncer) {
|
||
|
|
this.props.onFileAdded(files[0])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
toggleShowInstructions = e => {
|
||
|
|
this.setState({
|
||
|
|
showImportInstructions: !this.state.showImportInstructions
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
render = () => {
|
||
|
|
return (
|
||
|
|
<div className="import-dialog">
|
||
|
|
<h3>EXPORT</h3>
|
||
|
|
<div className="import-blue-button" onClick={this.handleExport('csv')}>
|
||
|
|
Export as CSV
|
||
|
|
</div>
|
||
|
|
<div className="import-blue-button" onClick={this.handleExport('json')}>
|
||
|
|
Export as JSON
|
||
|
|
</div>
|
||
|
|
<h3>IMPORT</h3>
|
||
|
|
<p>To upload a file, drop it here:</p>
|
||
|
|
<Dropzone onDropAccepted={this.handleFile}
|
||
|
|
className="import-blue-button fileupload"
|
||
|
|
>
|
||
|
|
Drop files here!
|
||
|
|
</Dropzone>
|
||
|
|
<p>
|
||
|
|
<a onClick={this.toggleShowInstructions} style={{ textDecoration: 'underline', cursor: 'pointer' }}>
|
||
|
|
Show/hide import instructions
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
{!this.state.showImportInstructions ? null : (<div>
|
||
|
|
<p>
|
||
|
|
You can import topics and synapses by uploading a spreadsheet here.
|
||
|
|
The file should be in comma-separated format (when you save, change the
|
||
|
|
filetype from .xls to .csv).
|
||
|
|
</p>
|
||
|
|
<img src={this.props.exampleImageUrl} style={{ maxWidth: '75%', float: 'right', margin: '1em' }}/>
|
||
|
|
<p style={{ marginTop: '1em' }}>You can choose which columns to include in your data. Topics must have a name field. Synapses must have Topic 1 and Topic 2.</p>
|
||
|
|
<p> </p>
|
||
|
|
<p> * There are many valid import formats. Try exporting a map to see what columns you can include in your import data. You can also copy-paste from Excel to import, or import JSON.</p>
|
||
|
|
<p> * If you are importing a list of links, you can use a Link column in place of the Name column.</p>
|
||
|
|
</div>)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ImportDialogBox.propTypes = {
|
||
|
|
onFileAdded: PropTypes.func,
|
||
|
|
exampleImageUrl: PropTypes.string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ImportDialogBox
|