Add BaseLayout to core

2017-04-14 18:38:59 -07:00
parent de92f8deb4
commit cf80839d11
3 changed files with 96 additions and 1 deletions
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -0,0 +1,92 @@
+import React, { PropTypes } from "react"
+
+export default class BaseLayout 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 { specSelectors, specActions, getComponent } = this.props
+
+    let info = specSelectors.info()
+    let url = specSelectors.url()
+    let basePath = specSelectors.basePath()
+    let host = specSelectors.host()
+    let securityDefinitions = specSelectors.securityDefinitions()
+    let externalDocs = specSelectors.externalDocs()
+    let schemes = specSelectors.schemes()
+
+    let Info = getComponent("info")
+    let Operations = getComponent("operations", true)
+    let Models = getComponent("models", true)
+    let AuthorizeBtn = getComponent("authorizeBtn", true)
+    let Row = getComponent("Row")
+    let Col = getComponent("Col")
+    let Errors = getComponent("errors", true)
+    const Schemes = getComponent("schemes")
+
+    const loadingStatus = specSelectors.loadingStatus()
+
+    return (
+
+      <div className='swagger-ui'>
+        { loadingStatus === "loading" &&
+          <div className="info">
+            <h4 className="title">Loading...</h4>
+          </div>
+        }
+        { loadingStatus === "failed" &&
+          <div className="info">
+            <h4 className="title">Failed to load spec.</h4>
+          </div>
+        }
+        { loadingStatus === "failedConfig" &&
+          <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
+            <h4 className="title">Failed to load config.</h4>
+          </div>
+        }
+        { loadingStatus === "success" &&
+          <div>
+            <Errors/>
+            <Row className="information-container">
+              <Col mobile={12}>
+                { info.count() ? (
+                  <Info info={ info } url={ url } host={ host } basePath={ basePath } externalDocs={externalDocs} getComponent={getComponent}/>
+                ) : null }
+              </Col>
+            </Row>
+            { schemes && schemes.size || securityDefinitions ? (
+              <div className="scheme-container">
+                <Col className="schemes wrapper" mobile={12}>
+                  { schemes && schemes.size ? (
+                    <Schemes schemes={ schemes } specActions={ specActions } />
+                  ) : null }
+                  { securityDefinitions ? (
+                    <AuthorizeBtn />
+                  ) : null }
+                </Col>
+              </div>
+            ) : null }
+
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Operations/>
+              </Col>
+            </Row>
+            <Row>
+              <Col mobile={12} desktop={12} >
+                <Models/>
+              </Col>
+            </Row>
+          </div> }
+        </div>
+      )
+    }
+  }