in with the new

src/core/plugins/split-pane-mode/components/index.js

@@ -0,0 +1,17 @@
+import { pascalCaseFilename } from "core/utils"
+
+const request = require.context(".", true, /\.jsx?$/)
+
+request.keys().forEach( function( key ){
+  if( key === "./index.js" ) {
+    return
+  }
+
+  // if( key.slice(2).indexOf("/") > -1) {
+  //   // skip files in subdirs
+  //   return
+  // }
+
+  let mod = request(key)
+  module.exports[pascalCaseFilename(key)] = mod.default ? mod.default : mod
+})

src/core/plugins/split-pane-mode/components/split-pane-mode.jsx

@@ -0,0 +1,81 @@
+import React, { PropTypes } from "react"
+import SplitPane from "react-split-pane"
+import "./split-pane-mode.less"
+
+const MODE_KEY = ["split-pane-mode"]
+const MODE_LEFT = "left"
+const MODE_RIGHT = "right"
+const MODE_BOTH = "both" // or anything other than left/right
+
+export default class SplitPaneMode extends React.Component {
+
+  static propTypes = {
+    threshold: PropTypes.number,
+
+    children: PropTypes.array,
+
+    layoutSelectors: PropTypes.object.isRequired,
+    layoutActions: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    threshold: 100, // in pixels
+    children: [],
+  };
+
+  onDragFinished = () => {
+    let { threshold, layoutActions } = this.props
+    let { position, draggedSize } = this.refs.splitPane.state
+    this.draggedSize = draggedSize
+
+    let nearLeftEdge = position <= threshold
+    let nearRightEdge = draggedSize <= threshold
+
+    layoutActions
+      .changeMode(MODE_KEY, (
+        nearLeftEdge
+        ? MODE_RIGHT : nearRightEdge
+        ? MODE_LEFT : MODE_BOTH
+      ))
+  }
+
+  sizeFromMode = (mode, defaultSize) => {
+    if(mode === MODE_LEFT) {
+      this.draggedSize = null
+      return "0px"
+    } else if (mode === MODE_RIGHT) {
+      this.draggedSize = null
+      return "100%"
+    }
+    // mode === "both"
+    return this.draggedSize || defaultSize
+  }
+
+  render() {
+    let { children, layoutSelectors } = this.props
+
+    const mode = layoutSelectors.whatMode(MODE_KEY)
+    const left = mode === MODE_RIGHT ? <noscript/> : children[0]
+    const right = mode === MODE_LEFT ? <noscript/> : children[1]
+    const size = this.sizeFromMode(mode, '50%')
+
+    return (
+      <SplitPane
+        disabledClass={''}
+        ref={'splitPane'}
+        split='vertical'
+        defaultSize={'50%'}
+        primary="second"
+        minSize={0}
+        size={size}
+        onDragFinished={this.onDragFinished}
+        allowResize={mode !== MODE_LEFT && mode !== MODE_RIGHT }
+        resizerStyle={{"flex": "0 0 auto", "position": "relative"}}
+      >
+        { left }
+        { right }
+      </SplitPane>
+    )
+  }
+
+}

src/core/plugins/split-pane-mode/components/split-pane-mode.less

@@ -0,0 +1,5 @@
+.swagger-ui {
+  .Resizer.vertical.disabled {
+    display: none;
+  }
+}

src/core/plugins/split-pane-mode/index.js

@@ -0,0 +1,14 @@
+import * as components from "./components"
+
+export default function SplitPaneModePlugin() {
+  return {
+    // statePlugins: {
+    //   layout: {
+    //     actions,
+    //     selectors,
+    //   }
+    // },
+
+    components,
+  }
+}