Merge pull request #3331 from owenconti/bug/3102-unguarded-expressions

Separate model.jsx components to their own files

Author: shockey

src/core/components/array-model.jsx

@@ -0,0 +1,44 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+const propStyle = { color: "#999", fontStyle: "italic" }
+
+export default class ArrayModel extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    required: PropTypes.bool,
+    expandDepth: PropTypes.number,
+    depth: PropTypes.number
+  }
+
+  render(){
+    let { getComponent, required, schema, depth, expandDepth } = this.props
+    let items = schema.get("items")
+    let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
+
+    const ModelCollapse = getComponent("ModelCollapse")
+    const Model = getComponent("Model")
+
+    return <span className="model">
+      <span className="model-title">
+        <span className="model-title__text">{ schema.get("title") }</span>
+      </span>
+      <ModelCollapse collapsed={ depth > expandDepth } collapsedContent="[...]">
+        [
+          <span><Model { ...this.props } schema={ items } required={ false }/></span>
+        ]
+        {
+          properties.size ? <span>
+              { properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}>
+                <br />{ `${key}:`}{ String(v) }</span>)
+              }<br /></span>
+            : null
+        }
+      </ModelCollapse>
+      { required && <span style={{ color: "red" }}>*</span>}
+    </span>
+  }
+}

src/core/components/enum-model.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import ImPropTypes from "react-immutable-proptypes"
+
+const EnumModel = ({ value, getComponent }) => {
+  let ModelCollapse = getComponent("ModelCollapse")
+  let collapsedContent = <span>Array [ { value.count() } ]</span>
+  return <span className="prop-enum">
+    Enum:<br />
+    <ModelCollapse collapsedContent={ collapsedContent }>
+      [ { value.join(", ") } ]
+    </ModelCollapse>
+  </span>
+}
+EnumModel.propTypes = {
+  value: ImPropTypes.iterable,
+  getComponent: ImPropTypes.func
+}
+
+export default EnumModel

src/core/components/layouts/base.jsx

@@ -26,7 +26,7 @@ export default class BaseLayout extends React.Component {
 
     let Info = getComponent("info")
     let Operations = getComponent("operations", true)
-    let Models = getComponent("models", true)
+    let Models = getComponent("Models", true)
     let AuthorizeBtn = getComponent("authorizeBtn", true)
     let Row = getComponent("Row")
     let Col = getComponent("Col")

src/core/components/model-collapse.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from "react"
+import PropTypes from "prop-types"
+
+export default class ModelCollapse extends Component {
+  static propTypes = {
+    collapsedContent: PropTypes.any,
+    collapsed: PropTypes.bool,
+    children: PropTypes.any
+  }
+
+  static defaultProps = {
+    collapsedContent: "{...}",
+    collapsed: true,
+  }
+
+  constructor(props, context) {
+    super(props, context)
+
+    let { collapsed, collapsedContent } = this.props
+
+    this.state = {
+      collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed,
+      collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent
+    }
+  }
+
+  toggleCollapsed=()=>{
+    this.setState({
+      collapsed: !this.state.collapsed
+    })
+  }
+
+  render () {
+    return (<span>
+      <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
+        <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+      </span>
+      { this.state.collapsed ? this.state.collapsedContent : this.props.children }
+    </span>)
+  }
+}

src/core/components/model-example.jsx

@@ -28,7 +28,7 @@ export default class ModelExample extends React.Component {
 
   render() {
     let { getComponent, specSelectors, schema, example, isExecute } = this.props
-    const Model = getComponent("model")
+    const ModelWrapper = getComponent("ModelWrapper")
 
     return <div>
       <ul className="tab">
@@ -44,7 +44,7 @@ export default class ModelExample extends React.Component {
           (isExecute || this.state.activeTab === "example") && example
         }
         {
-          !isExecute && this.state.activeTab === "model" && <Model schema={ schema }
+          !isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema }
                                                      getComponent={ getComponent }
                                                      specSelectors={ specSelectors }
                                                      expandDepth={ 1 } />

src/core/components/model-wrapper.jsx

@@ -0,0 +1,23 @@
+import React, { Component, } from "react"
+import PropTypes from "prop-types"
+
+export default class ModelComponent extends Component {
+  static propTypes = {
+    schema: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    getComponent: PropTypes.func.isRequired,
+    specSelectors: PropTypes.object.isRequired,
+    expandDepth: PropTypes.number
+  }
+
+  render(){
+    let { getComponent } = this.props
+    const Model = getComponent("Model")
+
+    return <div className="model-box">
+      <Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/>
+    </div>
+  }
+}
+
+