From 14b63c5bf9593624755dc36c78ea0f93b1c3150b Mon Sep 17 00:00:00 2001
From: Owen Conti <owen@ohseemedia.com>
Date: Sun, 9 Jul 2017 13:59:59 -0600
Subject: [PATCH 1/2] Fixes #2926 - Add optional `title` prop to `Collapse` so
 collapse elements can render titles to be clickable

---
 src/core/components/model.jsx | 45 +++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/core/components/model.jsx b/src/core/components/model.jsx
index de714403..39c1c8e1 100644
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -50,14 +50,13 @@ class ObjectModel extends Component {
       }
     </span>)
 
+    const titleEl = title && <span className="model-title">
+      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
+      <span className="model-title__text">{ title }</span>
+    </span>
+
     return <span className="model">
-      {
-        title && <span className="model-title">
-          { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <Collapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+      <Collapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
          <span className="brace-open object">{ braceOpen }</span>
           {
             !isRef ? null : <JumpToPathSection name={ name }/>
@@ -188,14 +187,14 @@ class ArrayModel extends Component {
     let items = schema.get("items")
     let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
-  
+    const titleEl = title && 
+      <span className="model-title">
+        <span className="model-title__text">{ title }</span>
+      </span>
+    
+
     return <span className="model">
-      {
-        title && <span className="model-title">
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
+      <Collapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
           <span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
         ]
@@ -292,12 +291,14 @@ class Collapse extends Component {
   static propTypes = {
     collapsedContent: PropTypes.any,
     collapsed: PropTypes.bool,
-    children: PropTypes.any
+    children: PropTypes.any,
+    title: PropTypes.element
   }
 
   static defaultProps = {
     collapsedContent: "{...}",
     collapsed: true,
+    title: null
   }
 
   constructor(props, context) {
@@ -318,11 +319,15 @@ class Collapse extends Component {
   }
 
   render () {
-    return (<span>
-      <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-        <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+    const {title} = this.props
+    return (
+      <span>
+        { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</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>
-      { this.state.collapsed ? this.state.collapsedContent : this.props.children }
-    </span>)
+    )
   }
 }

From bd31d3dedfdb41c33dca1386fac7ee9e8b5a382f Mon Sep 17 00:00:00 2001
From: Owen Conti <owen@ohseemedia.com>
Date: Tue, 11 Jul 2017 17:02:53 -0600
Subject: [PATCH 2/2] Reimplemented changes after merge with master

---
 src/core/components/array-model.jsx    |  9 ++++++---
 src/core/components/model-collapse.jsx | 18 ++++++++++++------
 src/core/components/object-model.jsx   | 12 +++++-------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/core/components/array-model.jsx b/src/core/components/array-model.jsx
index f45ac674..b507b42b 100644
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -17,16 +17,19 @@ export default class ArrayModel extends Component {
   render(){
     let { getComponent, required, schema, depth, expandDepth } = this.props
     let items = schema.get("items")
+    let title = schema.get("title") || name
     let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
 
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
 
-    return <span className="model">
+    const titleEl = title && 
       <span className="model-title">
-        <span className="model-title__text">{ schema.get("title") }</span>
+        <span className="model-title__text">{ title }</span>
       </span>
-      <ModelCollapse collapsed={ depth > expandDepth } collapsedContent="[...]">
+
+    return <span className="model">
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent="[...]">
         [
           <span><Model { ...this.props } schema={ items } required={ false }/></span>
         ]
diff --git a/src/core/components/model-collapse.jsx b/src/core/components/model-collapse.jsx
index 1b46e56a..b71096f2 100644
--- a/src/core/components/model-collapse.jsx
+++ b/src/core/components/model-collapse.jsx
@@ -5,12 +5,14 @@ export default class ModelCollapse extends Component {
   static propTypes = {
     collapsedContent: PropTypes.any,
     collapsed: PropTypes.bool,
-    children: PropTypes.any
+    children: PropTypes.any,
+    title: PropTypes.element
   }
 
   static defaultProps = {
     collapsedContent: "{...}",
     collapsed: true,
+    title: null
   }
 
   constructor(props, context) {
@@ -31,11 +33,15 @@ export default class ModelCollapse extends Component {
   }
 
   render () {
-    return (<span>
-      <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
-        <span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span>
+    const {title} = this.props
+    return (
+      <span>
+        { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</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>
-      { this.state.collapsed ? this.state.collapsedContent : this.props.children }
-    </span>)
+    )
   }
 }
\ No newline at end of file
diff --git a/src/core/components/object-model.jsx b/src/core/components/object-model.jsx
index 2bea7781..5e0a83a9 100644
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -38,15 +38,13 @@ export default class ObjectModel extends Component {
         }
     </span>)
     
+    const titleEl = title && <span className="model-title">
+      { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
+      <span className="model-title__text">{ title }</span>
+    </span>
 
     return <span className="model">
-      {
-        title && <span className="model-title">
-          { isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> }
-          <span className="model-title__text">{ title }</span>
-        </span>
-      }
-      <ModelCollapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
+      <ModelCollapse title={titleEl} collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }>
          <span className="brace-open object">{ braceOpen }</span>
           {
             !isRef ? null : <JumpToPathSection name={ name }/>