From 0b8cd7e32f64640bb7b426d14fa4da6eb00220c0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 1 Dec 2017 14:30:37 -0600
Subject: [PATCH] add presentational component to allow for wrapping
 deeplinking links

---
 src/core/components/deeplinking-link.jsx | 19 +++++++++++++++++++
 src/core/components/operation.jsx        | 11 +++++------
 src/core/components/operations.jsx       | 11 +++++------
 src/core/presets/base.js                 |  4 +++-
 4 files changed, 32 insertions(+), 13 deletions(-)
 create mode 100644 src/core/components/deeplinking-link.jsx

diff --git a/src/core/components/deeplinking-link.jsx b/src/core/components/deeplinking-link.jsx
new file mode 100644
index 00000000..c7719aec
--- /dev/null
+++ b/src/core/components/deeplinking-link.jsx
@@ -0,0 +1,19 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export const DeepLinkingLink = ({ isDeepLinkingEnabled, path, text }) => {
+    return (
+        <a className="nostyle"
+          onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
+          href={isDeepLinkingEnabled ? `#/${path}` : null}>
+          <span>{text}</span>
+        </a>
+    )
+}
+DeepLinkingLink.propTypes = {
+  isDeepLinkingEnabled: PropTypes.boolean,
+  path: PropTypes.string,
+  text: PropTypes.string
+}
+
+export default DeepLinkingLink
diff --git a/src/core/components/operation.jsx b/src/core/components/operation.jsx
index ea1877f3..6db91355 100644
--- a/src/core/components/operation.jsx
+++ b/src/core/components/operation.jsx
@@ -100,6 +100,7 @@ export default class Operation extends PureComponent {
     const Schemes = getComponent( "schemes" )
     const OperationServers = getComponent( "OperationServers" )
     const OperationExt = getComponent( "OperationExt" )
+    const DeepLinkingLink = getComponent( "DeepLinkingLink" )
 
     const { showExtensions } = getConfigs()
 
@@ -116,12 +117,10 @@ export default class Operation extends PureComponent {
           <div className={`opblock-summary opblock-summary-${method}`} onClick={toggleShown} >
               <span className="opblock-summary-method">{method.toUpperCase()}</span>
               <span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" } >
-              <a
-                className="nostyle"
-                onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                href={isDeepLinkingEnabled ? `#/${isShownKey.join("/")}` : null}>
-                <span>{path}</span>
-              </a>
+              <DeepLinkingLink
+                  isDeepLinkingEnabled={isDeepLinkingEnabled}
+                  path={isShownKey.join("/")}
+                  text={path} />
                 <JumpToPath path={jumpToKey} />
               </span>
 
diff --git a/src/core/components/operations.jsx b/src/core/components/operations.jsx
index 32b15437..426f2dcd 100644
--- a/src/core/components/operations.jsx
+++ b/src/core/components/operations.jsx
@@ -30,6 +30,7 @@ export default class Operations extends React.Component {
     const OperationContainer = getComponent("OperationContainer", true)
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown")
+    const DeepLinkingLink = getComponent("DeepLinkingLink")
 
     let {
       docExpansion,
@@ -72,12 +73,10 @@ export default class Operations extends React.Component {
                     onClick={() => layoutActions.show(isShownKey, !showTag)}
                     className={!tagDescription ? "opblock-tag no-desc" : "opblock-tag" }
                     id={isShownKey.join("-")}>
-                    <a
-                      className="nostyle"
-                      onClick={isDeepLinkingEnabled ? (e) => e.preventDefault() : null}
-                      href= {isDeepLinkingEnabled ? `#/${tag}` : null}>
-                      <span>{tag}</span>
-                    </a>
+                    <DeepLinkingLink
+                        isDeepLinkingEnabled={isDeepLinkingEnabled}
+                        path={tag}
+                        text={tag} />
                     { !tagDescription ? null :
                         <small>
                           <Markdown source={tagDescription} />
diff --git a/src/core/presets/base.js b/src/core/presets/base.js
index 133df134..e08f4954 100644
--- a/src/core/presets/base.js
+++ b/src/core/presets/base.js
@@ -61,6 +61,7 @@ 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"
+import DeepLinkingLink from "core/components/deeplinking-link"
 
 import Markdown from "core/components/providers/markdown"
 
@@ -121,7 +122,8 @@ export default function() {
       OperationExt,
       OperationExtRow,
       ParameterExt,
-      OperationContainer
+      OperationContainer,
+      DeepLinkingLink
     }
   }