Add comment to array-model for to clarify change. Rework logic in `Model.render()` to fix bug with overriding name and schema from `$ref` definition.

src/core/components/array-model.jsx

@@ -28,10 +28,15 @@ export default class ArrayModel extends Component {
         <span className="model-title__text">{ title }</span>
       </span>
 
+    /* 
+    Note: we set `name={null}` in <Model> below because we don't want
+    the name of the current Model passed (and displayed) as the name of the array element Model
+    */ 
+
     return <span className="model">
       <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
-          <span><Model { ...this.props } schema={ items } required={ false } depth={ depth + 1 } /></span>
+          <span><Model { ...this.props } name={null} schema={ items } required={ false } depth={ depth + 1 } /></span>
         ]
         {
           properties.size ? <span>

src/core/components/model.jsx

@@ -28,25 +28,40 @@ export default class Model extends Component {
     return specSelectors.findDefinition(model)
   }
 
-  renderModel( type, props, modelSchema, modelName, isRef, required, getComponent, specSelectors ) {
+  render () {
+    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
     const ObjectModel = getComponent("ObjectModel")
     const ArrayModel = getComponent("ArrayModel")
     const PrimitiveModel = getComponent("PrimitiveModel")
-    const deprecated = specSelectors.isOAS3() && modelSchema.get("deprecated")
-
+    let type = "object"
+    let $$ref = schema && schema.get("$$ref")
+    
+    // If we weren't passed a `name` but have a ref, grab the name from the ref
+    if ( !name && $$ref ) {
+      name = this.getModelName( $$ref )
+    }
+    // If we weren't passed a `schema` but have a ref, grab the schema from the ref
+    if ( !schema && $$ref ) {
+      schema = this.getRefSchema( name )
+    }
+    
+    const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
+    isRef = isRef !== undefined ? isRef : !!$$ref
+    type = schema && schema.get("type") || type
+    
     switch(type) {
       case "object":
         return <ObjectModel
           className="object" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
           isRef={ isRef } />
       case "array":
         return <ArrayModel
           className="array" { ...this.props }
-          schema={ modelSchema }
-          name={ modelName }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
           required={ required } />
       case "string":
@@ -57,77 +72,10 @@ export default class Model extends Component {
         return <PrimitiveModel
           { ...this.props }
           getComponent={ getComponent }
-          schema={ modelSchema }
-          name={ modelName }
+          schema={ schema }
+          name={ name }
           deprecated={deprecated}
           required={ required }/>
     }
   }
-
-  render () {
-    let { getComponent, specSelectors, schema, required, name, isRef } = this.props
-    let modelName, modelSchema, type
-    let $$ref = schema && schema.get("$$ref")
-
-    console.log("Rendering model", this.getModelName( $$ref ), name, $$ref, schema.toJS())
-    
-    if ( schema && (schema.get("type") || schema.get("properties")) ) {
-      // props.schema is a normal schema
-      modelName = name
-      modelSchema = schema
-    } else if ( $$ref ) {
-      // props.schema is not a normal schema, most likely a $ref
-      modelName = this.getModelName( $$ref )
-      modelSchema = this.getRefSchema( modelName )
-    }
-    
-    if ( !modelSchema ) {
-      // Don't bother rendering an invalid schema
-      return null
-    }
-    
-    // Default `type` to object
-    type = modelSchema.get("type") || "object"
-    isRef = isRef !== undefined ? isRef : !!$$ref
-    
-    // If the model is `oneOf` or `anyOf`, go through its available types
-    // and render each type as part of an array
-    // if ( this.props.schema.get("oneOf") || this.props.schema.get("anyOf") ) {
-    //   const isOneOf = this.props.schema.get("oneOf")
-    //   const options = this.props.schema.get("oneOf") || this.props.schema.get("anyOf")
-    //   return (
-    //     <span>
-    //       { isOneOf ? "One of: " : "Any of: " }
-    //       { options.map( (typeOption, i) => {
-    //         const type = typeOption.get("type")
-    //         const $$ref = typeOption.get("$$ref")
-
-    //         // Override modelName if the typeOption is a $$ref to another Model
-    //         if ( $$ref ) {
-    //           console.log("reassigning model name from", typeOption.toJS(), modelName, this.getModelName( $$ref ))
-    //           // modelName = $$ref && this.getModelName( $$ref )
-    //         }
-
-    //         let result = []
-    //         // "join" together the options with " or "/" and "
-    //         if ( i > 0 ) {
-    //           result.push( <span>&nbsp;or&nbsp;</span> )
-    //         }
-
-    //         // Render the Model component, overriding the props.schema and modelSchema properties
-    //         // with the proper type from the current iteration of the available types
-    //         result.push( <span key={type}>
-    //           { this.renderModel( type, {
-    //             ...this.props,
-    //             schema: typeOption
-    //            }, typeOption, modelName, name, deprecated, isRef, $$ref, required, getComponent ) }
-    //         </span> )
-    //         return result
-    //       } ).toJS() }
-    //     </span>
-    //   ) 
-    // }
-
-    return this.renderModel( type, this.props, modelSchema, modelName, isRef, required, getComponent, specSelectors )
-  }
 }