Added onLoad()s and tweaker onToggle() to support ScrollTo functionality for Models (#5237)

src/core/components/model-collapse.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react"
 import PropTypes from "prop-types"
+import Im from "immutable"
 
 export default class ModelCollapse extends Component {
   static propTypes = {
@@ -11,6 +12,8 @@ export default class ModelCollapse extends Component {
     classes: PropTypes.string,
     onToggle: PropTypes.func,
     hideSelfOnExpand: PropTypes.bool,
+    layoutActions: PropTypes.object,
+    layoutSelectors: PropTypes.object.isRequired
   }
 
   static defaultProps = {
@@ -58,6 +61,16 @@ export default class ModelCollapse extends Component {
     })
   }
 
+  onLoad = (ref) => {
+    if(ref) {
+      const name = this.props.modelName
+      const scrollToKey = this.props.layoutSelectors.getScrollToKey()
+
+      if( Im.is(scrollToKey, Im.fromJS(["models", name])) ) this.toggleCollapsed()
+      this.props.layoutActions.readyToScroll(["models", name], ref.parentElement)
+    }
+  }
+
   render () {
     const { title, classes } = this.props
 

src/core/components/model-wrapper.jsx

@@ -18,10 +18,15 @@ export default class ModelWrapper extends Component {
     layoutSelectors: PropTypes.object.isRequired
   }
 
+  getSchemaBasePath = () => {
+    const isOAS3 = this.props.specSelectors.isOAS3()
+    return isOAS3 ? ["components", "schemas"] : ["definitions"]
+  }
+
   onToggle = (name,isShown) => {
     // If this prop is present, we'll have deepLinking for it
     if(this.props.layoutActions) {
-      this.props.layoutActions.show(["models", name],isShown)
+      this.props.layoutActions.show([...this.getSchemaBasePath(), name],isShown)
     }
   }
 

src/core/components/models.jsx

@@ -29,6 +29,13 @@ export default class Models extends Component {
     }
   }
 
+  onLoad = (ref) => {
+    if (ref) {
+      const name = ref.getAttribute("data-name")
+      this.props.layoutActions.readyToScroll(["models", name], ref)
+    }
+  }
+
   render(){
     let { specSelectors, getComponent, layoutSelectors, layoutActions, getConfigs } = this.props
     let definitions = specSelectors.definitions()
@@ -91,7 +98,8 @@ export default class Models extends Component {
               </span>
             </span>
 
-            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }>
+            return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }
+                    data-name={name} ref={this.onLoad} >
               <span className="models-jump-to-path"><JumpToPath specPath={specPath} /></span>
               <ModelCollapse
                 classes="model-box"