Extract Toolbar from DebugPane.tsx

Author: Mytrill

dist/src/components/DebugPaneToolbar.d.ts

@@ -0,0 +1,7 @@
+import "./DebugPaneToolbar.scss";
+import { State, Actions } from "../api";
+export interface DebugPaneToolbarProps {
+    state: State;
+    actions: Actions;
+}
+export declare function DebugPaneToolbar(props: DebugPaneToolbarProps): JSX.Element;

src/components/DebugPane.scss

@@ -7,18 +7,6 @@
   border: 1px solid black;
   color: black;
 
-  .debug-toolbar {
-    display: flex;
-    justify-content: space-between;
-    flex-shrink: 0;
-    width: 100%;
-    border-bottom: 1px solid black;
-
-    .close-button {
-      margin: 0.4rem;
-    }
-  }
-
   .debug-content {
     flex-grow: 1;
 

src/components/DebugPane.tsx

@@ -3,66 +3,10 @@ import { h } from "hyperapp"
 import { State, Actions, PaneDisplay } from "../api"
 
 import { DebuggerOptions } from "./DebuggerOptions"
+import { DebugPaneToolbar } from "./DebugPaneToolbar"
 
 import "./DebugPane.scss"
 
-interface ToolbarProps {
-  state: State
-  actions: Actions
-}
-
-function Toolbar(props: ToolbarProps) {
-  const { state, actions } = props
-  return (
-    <div class="debug-toolbar">
-      <div class="dropdown">
-        <button class="btn btn-link dropdown-toggle">View</button>
-        <ul class="menu">
-          <li class="menu-item">
-            <a
-              href=""
-              onclick={e => {
-                actions.setPaneDisplay("fullscreen")
-                e.preventDefault()
-              }}
-            >
-              Full Screen
-            </a>
-          </li>
-          <li class="menu-item">
-            <a
-              href=""
-              onclick={e => {
-                actions.setPaneDisplay("right")
-                e.preventDefault()
-              }}
-            >
-              Align Right
-            </a>
-          </li>
-          <li class="menu-item">
-            <a
-              href=""
-              onclick={e => {
-                actions.setPaneDisplay("bottom")
-                e.preventDefault()
-              }}
-            >
-              Align Bottom
-            </a>
-          </li>
-        </ul>
-      </div>
-      <span class="float-right">
-        <button
-          class="btn btn-clear close-button"
-          onclick={() => actions.showPane(false)}
-        />
-      </span>
-    </div>
-  )
-}
-
 export interface DebugPaneProps {
   state: State
   actions: Actions
@@ -73,7 +17,7 @@ export function DebugPane(props: DebugPaneProps) {
 
   return (
     <div class="debug-pane">
-      {Toolbar({ state, actions })}
+      {DebugPaneToolbar({ state, actions })}
       {DebuggerOptions({ state, actions })}
       <div class="debug-content scrollable">
         <pre class="scrollable-content">{JSON.stringify(state, null, 2)}</pre>

src/components/DebugPaneToolbar.scss

@@ -0,0 +1,11 @@
+.debug-pane-toolbar {
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+  width: 100%;
+  border-bottom: 1px solid black;
+
+  .close-button {
+    margin: 0.4rem;
+  }
+}

src/components/DebugPaneToolbar.tsx

@@ -0,0 +1,62 @@
+import { h } from "hyperapp"
+
+import "./DebugPaneToolbar.scss"
+
+import { State, Actions } from "../api"
+
+export interface DebugPaneToolbarProps {
+  state: State
+  actions: Actions
+}
+
+export function DebugPaneToolbar(props: DebugPaneToolbarProps) {
+  const { state, actions } = props
+  return (
+    <div class="debug-pane-toolbar">
+      <div class="dropdown">
+        <button class="btn btn-link dropdown-toggle">View</button>
+        <ul class="menu">
+          <li class="menu-item">
+            <a
+              href=""
+              onclick={e => {
+                actions.setPaneDisplay("fullscreen")
+                e.preventDefault()
+              }}
+            >
+              Full Screen
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href=""
+              onclick={e => {
+                actions.setPaneDisplay("right")
+                e.preventDefault()
+              }}
+            >
+              Align Right
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href=""
+              onclick={e => {
+                actions.setPaneDisplay("bottom")
+                e.preventDefault()
+              }}
+            >
+              Align Bottom
+            </a>
+          </li>
+        </ul>
+      </div>
+      <span class="float-right">
+        <button
+          class="btn btn-clear close-button"
+          onclick={() => actions.showPane(false)}
+        />
+      </span>
+    </div>
+  )
+}

src/components/DebuggerOptions.tsx

@@ -38,12 +38,3 @@ export function DebuggerOptions(props: DebuggerOptionsProps) {
     </div>
   )
 }
-
-/* <label class="form-checkbox">
-<input
-  type="checkbox"
-  checked={state.showFullState}
-  onchange={actions.toggleShowFullState}
-/>
-<i class="form-icon" /> Show full state
-</label> */