kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: swagger-ui-react module (via #5207)

Browse Source 
* swagger-ui-react alpha.0

* alpha.1

* alpha.2

* alpha.3

* begin updating README

* alpha.4

* WIP: `displayOperationId` support

* move loading error readouts to BaseLayout

* add `url` prop

* export React component as default

* add interceptor support

* modify docs markup

* add `onComplete` prop

* add `spec` prop

* Update README.md

* alpha.6

* remove independent manifest; build releasable exclusively from template

* ensure dist is present; drop config field in manifest

* drop alpha field

this script is now able to release to npm!

* remove unused selector references

* Update README.md
This commit is contained in:
kyle
2019-03-01 20:41:30 -08:00
committed by GitHub
parent e95588bd1f
commit 7025773fbf
11 changed files with 953 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/core/components/layouts/base.jsx
View File

@@ -13,7 +13,7 @@ export default class BaseLayout extends React.Component {
}
render() {
let {specSelectors, getComponent} = this.props
let {errSelectors, specSelectors, getComponent} = this.props
let SvgAssets = getComponent("SvgAssets")
let InfoContainer = getComponent("InfoContainer", true)
@@ -33,15 +33,43 @@ export default class BaseLayout extends React.Component {
const isSpecEmpty = !specSelectors.specStr()
if(isSpecEmpty) {
let loadingMessage
let isLoading = specSelectors.loadingStatus() === "loading"
if(isLoading) {
loadingMessage = <div className="loading"></div>
} else {
loadingMessage = <h4>No API definition provided.</h4>
}
const loadingStatus = specSelectors.loadingStatus()
let loadingMessage = null
if(loadingStatus === "loading") {
loadingMessage = <div className="info">
<div className="loading-container">
<div className="loading"></div>
</div>
</div>
}
if(loadingStatus === "failed") {
loadingMessage = <div className="info">
<div className="loading-container">
<h4 className="title">Failed to load API definition.</h4>
<Errors />
</div>
</div>
}
if (loadingStatus === "failedConfig") {
const lastErr = errSelectors.lastError()
const lastErrMsg = lastErr ? lastErr.get("message") : ""
loadingMessage = <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>
}
if(!loadingMessage && isSpecEmpty) {
loadingMessage = <h4>No API definition provided.</h4>
}
if(loadingMessage) {
return <div className="swagger-ui">
<div className="loading-container">
{loadingMessage}

33
src/standalone/layout.jsx
View File

@@ -16,49 +16,22 @@ export default class StandaloneLayout extends React.Component {
}
render() {
let { getComponent, specSelectors, errSelectors } = this.props
let { getComponent } = 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 /> }
{Topbar ? <Topbar /> : null}
<BaseLayout />
<Row>
<Col>
<OnlineValidatorBadge />