From 0c4115510006252b1f6f22537dd3bdce44d7c468 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 2 Nov 2017 15:19:38 -0500
Subject: [PATCH 1/2] adds new property display component

---
 src/core/components/property.jsx | 16 ++++++++++++++++
 src/core/presets/base.js         |  2 ++
 2 files changed, 18 insertions(+)
 create mode 100644 src/core/components/property.jsx

diff --git a/src/core/components/property.jsx b/src/core/components/property.jsx
new file mode 100644
index 00000000..0d129643
--- /dev/null
+++ b/src/core/components/property.jsx
@@ -0,0 +1,16 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const Property = ({ propKey, propVal, propStyle }) => {
+    return (
+        <span style={ propStyle }>
+          <br />{ propKey }: { String(propVal) }</span>
+    )
+}
+Property.propTypes = {
+  propKey: PropTypes.string,
+  propVal: PropTypes.any,
+  propStyle: PropTypes.object
+}
+
+export default Property
diff --git a/src/core/presets/base.js b/src/core/presets/base.js
index ec005b37..fb38b568 100644
--- a/src/core/presets/base.js
+++ b/src/core/presets/base.js
@@ -52,6 +52,7 @@ import EnumModel from "core/components/enum-model"
 import ObjectModel from "core/components/object-model"
 import ArrayModel from "core/components/array-model"
 import PrimitiveModel from "core/components/primitive-model"
+import Property from "core/components/property"
 import TryItOutButton from "core/components/try-it-out-button"
 import VersionStamp from "core/components/version-stamp"
 
@@ -106,6 +107,7 @@ export default function() {
       ObjectModel,
       ArrayModel,
       PrimitiveModel,
+      Property,
       TryItOutButton,
       Markdown,
       BaseLayout,

From 4b453e3535d9f781b3d4be50dfcda0dffc8643c7 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 2 Nov 2017 15:20:20 -0500
Subject: [PATCH 2/2] use property component in array-model and primitive-model

---
 src/core/components/array-model.jsx     | 9 ++++-----
 src/core/components/primitive-model.jsx | 7 +++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/core/components/array-model.jsx b/src/core/components/array-model.jsx
index dae6645e..a68a3562 100644
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -24,24 +24,23 @@ export default class ArrayModel extends Component {
     const Markdown = getComponent("Markdown")
     const ModelCollapse = getComponent("ModelCollapse")
     const Model = getComponent("Model")
+    const Property = getComponent("Property")
 
     const titleEl = title &&
       <span className="model-title">
         <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="[...]">
         [
           {
-            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-              <br />{ key }: { String(v) }</span>)
-              : null
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
           }
           {
             !description ? null :
diff --git a/src/core/components/primitive-model.jsx b/src/core/components/primitive-model.jsx
index f1fba8a5..c14413a9 100644
--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -28,6 +28,7 @@ export default class Primitive extends Component {
     let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
     const Markdown = getComponent("Markdown")
     const EnumModel = getComponent("EnumModel")
+    const Property = getComponent("Property")
 
     return <span className="model">
       <span className="prop">
@@ -35,9 +36,7 @@ export default class Primitive extends Component {
         <span className="prop-type">{ type }</span>
         { format && <span className="prop-format">(${format})</span>}
         {
-          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }>
-            <br />{ key }: { String(v) }</span>)
-            : null
+          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
         }
         {
           !description ? null :
@@ -56,4 +55,4 @@ export default class Primitive extends Component {
       </span>
     </span>
   }
-}
\ No newline at end of file
+}