81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import Dropzone from "react-dropzone"
|
|
|
|
Dropzone.displayName = "Dropzone" // For testing
|
|
|
|
export default class EditorLayout extends React.Component {
|
|
|
|
static propTypes = {
|
|
errSelectors: PropTypes.object.isRequired,
|
|
errActions: PropTypes.object.isRequired,
|
|
specActions: PropTypes.object.isRequired,
|
|
getComponent: PropTypes.func.isRequired,
|
|
layoutSelectors: PropTypes.object.isRequired,
|
|
layoutActions: PropTypes.object.isRequired
|
|
}
|
|
|
|
onChange = (newYaml, origin="editor") => {
|
|
this.props.specActions.updateSpec(newYaml, origin)
|
|
}
|
|
|
|
onDrop = (acceptedFiles, rejectedFiles) => {
|
|
const someFilesWereRejected = rejectedFiles && rejectedFiles.length > 0
|
|
const thereIsExactlyOneAcceptedFile = acceptedFiles && acceptedFiles.length === 1
|
|
if ( someFilesWereRejected || !thereIsExactlyOneAcceptedFile) {
|
|
alert("Sorry, there was an error processing your file.\nPlease drag and drop exactly one .yaml or .json OpenAPI definition file.")
|
|
} else {
|
|
const file = acceptedFiles[0]
|
|
const reader = new FileReader()
|
|
reader.onloadend = () => {
|
|
const spec = reader.result
|
|
this.onChange(spec, "fileDrop")
|
|
}
|
|
|
|
reader.readAsText(file, "utf-8")
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { getComponent } = this.props
|
|
|
|
const UIBaseLayout = getComponent("BaseLayout", true)
|
|
const EditorContainer = getComponent("EditorContainer", true)
|
|
const SplitPaneMode = getComponent("SplitPaneMode", true)
|
|
|
|
const Container = getComponent("Container")
|
|
|
|
return (
|
|
<div className="swagger-editor">
|
|
<Container className="container">
|
|
<Dropzone
|
|
className="dropzone"
|
|
accept=".yaml,application/json"
|
|
multiple={false}
|
|
onDrop={this.onDrop}
|
|
disablePreview
|
|
disableClick
|
|
>
|
|
{({ isDragActive }) => {
|
|
if (isDragActive) {
|
|
return (
|
|
<div className="dropzone__overlay">
|
|
Please drop a .yaml or .json OpenAPI spec.
|
|
</div>
|
|
)
|
|
} else {
|
|
return (
|
|
<SplitPaneMode>
|
|
<EditorContainer onChange={this.onChange} />
|
|
<UIBaseLayout/>
|
|
</SplitPaneMode>
|
|
)
|
|
}
|
|
}}
|
|
</Dropzone>
|
|
</Container>
|
|
</div>
|
|
)
|
|
}
|
|
}
|