|
|
|
import React from 'react'
|
|
|
|
import { Subscribe } from 'unstated'
|
|
|
|
import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
|
|
|
|
|
|
|
|
import EditorContainer from '../containers/Editor'
|
|
|
|
import Overlay from './Overlay'
|
|
|
|
import CodeWindow from './CodeWindow'
|
|
|
|
|
|
|
|
import { DEFAULT_CODE } from '../lib/constants'
|
|
|
|
import { isImage } from '../lib/util'
|
|
|
|
|
|
|
|
const editorContainer = [EditorContainer]
|
|
|
|
|
|
|
|
class Editor extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props)
|
|
|
|
this.renderPane = this.renderPane.bind(this)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderPane(editor) {
|
|
|
|
return (
|
|
|
|
<ReadFileDropContainer readAs={readAs} onDrop={editor.handleDroppedFile}>
|
|
|
|
{({ isOver, canDrop }) => (
|
|
|
|
<Overlay
|
|
|
|
isOver={isOver || canDrop}
|
|
|
|
title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
|
|
|
|
>
|
|
|
|
<CodeWindow
|
|
|
|
config={editor.state}
|
|
|
|
updateCode={editor.updateCode}
|
|
|
|
onAspectRatioChange={editor.updateAspectRatio}
|
|
|
|
titleBar={editor.state.titleBar}
|
|
|
|
updateTitleBar={editor.updateTitleBar}
|
|
|
|
>
|
|
|
|
{editor.state.code != null ? editor.state.code : DEFAULT_CODE}
|
|
|
|
</CodeWindow>
|
|
|
|
</Overlay>
|
|
|
|
)}
|
|
|
|
</ReadFileDropContainer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return <Subscribe to={editorContainer}>{this.renderPane}</Subscribe>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function readAs(file) {
|
|
|
|
if (isImage(file)) {
|
|
|
|
return DATA_URL
|
|
|
|
}
|
|
|
|
return TEXT
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Editor
|