Merge pull request #13 from SafetyCulture/split-pane

Implement a split pane for the network log
SafetyCulture · Apr 17, 2019 · 760d19c · 760d19c
2 parents 72cc0cc + f7e2793
commit 760d19c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "react-json-view": "^1.19.1",
     "react-redux": "^7.0.2",
     "react-scripts": "2.1.8",
+    "react-split": "^2.0.4",
     "redux-starter-kit": "^0.4.3"
   },
   "scripts": {

diff --git a/src/components/MainLayout.css b/src/components/MainLayout.css
@@ -23,4 +23,12 @@
 
 .shadow-split-widget-main {
   flex: auto;
+}
+
+.gutter {
+  cursor: ew-resize;
+  border-left: var(--divider-border);
+  margin-left: -1px;
+  margin-right: -4px;
+  z-index: 9999;
 }
diff --git a/src/components/MainLayout.js b/src/components/MainLayout.js
@@ -1,6 +1,7 @@
 // Copyright (c) 2019 SafetyCulture Pty Ltd. All Rights Reserved.
 
 import React, { Component } from 'react';
+import Split from 'react-split'
 import './MainLayout.css';
 import NetworkDetails from './NetworkDetails';
 import NetworkList from './NetworkList';
@@ -9,16 +10,27 @@ class MainLayout extends Component {
     return (
       <div className="vbox flex-auto">
         <div className="shadow-split-widget hbox widget">
-          <div className="shadow-split-widget-contents shadow-split-widget-sidebar vbox">
+          <Split
+            className="hbox flex-auto"
+            sizes={[30, 70]}
+            gutterSize={5}
+            cursor="ew-resize"
+          >
             <NetworkList />
-          </div>
-          <div className="shadow-split-widget-contents shadow-split-widget-main">
             <NetworkDetails />
-          </div>
+          </Split>
         </div>
       </div>
     );
   }
 }
 
-export default MainLayout
+export default MainLayout
+
+
+// <div className="shadow-split-widget-contents shadow-split-widget-sidebar vbox">
+//             <NetworkList />
+//           </div>
+//           <div className="shadow-split-widget-contents shadow-split-widget-main">
+//             <NetworkDetails />
+//           </div>
diff --git a/src/components/NetworkDetails.js b/src/components/NetworkDetails.js
@@ -17,7 +17,7 @@ class NetworkDetails extends Component {
   _renderContent = (entry) => {
     if (entry) {
       const { method, request, response, error } = entry;
-      return <ReactJson name="grpc" enableClipboard={false} src={ { method, request, response, error } } /> 
+      return <ReactJson name="grpc" enableClipboard={false} src={{ method, request, response, error }} />
     }
   }
 }

diff --git a/src/components/NetworkList.js b/src/components/NetworkList.js
@@ -27,7 +27,7 @@ class NetworkList extends Component {
               <table className="data">
                 <tbody>
                   {network.log.map((req, idx) => (
-                    <tr 
+                    <tr
                       key={idx}
                       onClick={() => selectLogEntry(idx)}
                       title={req.method}

diff --git a/yarn.lock b/yarn.lock
@@ -6868,7 +6868,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -7167,6 +7167,14 @@ react-scripts@2.1.8:
   optionalDependencies:
     fsevents "1.2.4"
 
+react-split@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-split/-/react-split-2.0.4.tgz#db45ec5dfa9e34a3d17e894b9c48dfa8f4239ac3"
+  integrity sha512-NBKm9MaqzG/00laMUaS8GS9RnItVSekNNwItgGLMbFTeUa9w4bIY8Co/LszNBnpza9n2am0MXIw3SmyiMnhs+w==
+  dependencies:
+    prop-types "^15.5.7"
+    split.js "^1.5.9"
+
 react-textarea-autosize@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"
@@ -7949,6 +7957,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+split.js@^1.5.9:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.5.10.tgz#11f63a7ea21780a6022e6dffe8f8eaa18c9c819e"
+  integrity sha512-/J52X5c4ZypVwu4WAhD8E1T9uXQtNokvG6mIBHauzyA1aKH6bmETVSv3RPjBXEz6Gcc4mIThgmjGQL39LD16jQ==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"