Files
swagger-ui/src/standalone/layout.jsx
T
Scott O'Hara fb7f12551f improve: show possible reasons when url fetch fails (#4295)
* improve: show possible reasons when url fetch fails
* Only check for fail reasons if no HTTP status code
* Check for mixed content errors first
* Harmonise error messages
* Set error source to 'fetch'
* improve: hide loading validator image (#4287)
* hide missing validator image
* Render nothing if validator badge has not loaded/received errors
* Revert style changes
* Allow images with data scheme (#4305)
* Add UnitTest for image
allows image elements with https scheme
* Test images with data scheme
* Add allowedSchemesByTag
* Fix error  Strings must use doublequote  quotes
* Add empty div (#4236)
if there are properties show an empty div
* v3.12.1 (#4311)
* v3.12.1
* Rebuild dist for v3.12.1
* Use window wrapper instead of direct reference
* Add trailing period to error messages
* improve readability
2018-03-12 16:57:51 -07:00

72 lines
2.2 KiB
React

import React from "react"
import PropTypes from "prop-types"
export default class StandaloneLayout extends React.Component {
static propTypes = {
errSelectors: PropTypes.object.isRequired,
errActions: PropTypes.object.isRequired,
specActions: PropTypes.object.isRequired,
specSelectors: PropTypes.object.isRequired,
layoutSelectors: PropTypes.object.isRequired,
layoutActions: PropTypes.object.isRequired,
getComponent: PropTypes.func.isRequired
}
render() {
let { getComponent, specSelectors, errSelectors } = this.props
let Container = getComponent("Container")
let Row = getComponent("Row")
let Col = getComponent("Col")
let Errors = getComponent("errors", true)
const Topbar = getComponent("Topbar", true)
const BaseLayout = getComponent("BaseLayout", true)
const OnlineValidatorBadge = getComponent("onlineValidatorBadge", true)
const loadingStatus = specSelectors.loadingStatus()
const lastErr = errSelectors.lastError()
const lastErrMsg = lastErr ? lastErr.get("message") : ""
return (
<Container className='swagger-ui'>
{ Topbar ? <Topbar /> : null }
{ loadingStatus === "loading" &&
<div className="info">
<div className="loading-container">
<div className="loading"></div>
</div>
</div>
}
{ loadingStatus === "failed" &&
<div className="info">
<div className="loading-container">
<h4 className="title">Failed to load API definition.</h4>
<Errors/>
</div>
</div>
}
{ loadingStatus === "failedConfig" &&
<div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
<div className="loading-container">
<h4 className="title">Failed to load remote configuration.</h4>
<p>{lastErrMsg}</p>
</div>
</div>
}
{ !loadingStatus || loadingStatus === "success" && <BaseLayout /> }
<Row>
<Col>
<OnlineValidatorBadge />
</Col>
</Row>
</Container>
)
}
}