Update with dev

xnkevinnguyen · xnkevinnguyen · commit 3a2071254c7f · 2020-03-19T12:46:32.000-07:00
diff --git a/src/view/components/Dropdown.tsx b/src/view/components/Dropdown.tsx
@@ -20,7 +20,7 @@ const Dropdown: React.FC<IDropdownProps> = props => {
     const defaultText =
         props.lastChosen !== ""
             ? CONSTANTS.CURRENTLY_RUNNING(parsedPath[1])
-            : CONSTANTS.NO_FILES_AVAILABLE;
+            : CONSTANTS.FILES_PLACEHOLDER;
     return (
         <div>
             <select
diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx
@@ -8,7 +8,6 @@ import { sendMessage } from "../../utils/MessageUtils";
 import "../../styles/Simulator.css";
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
-import Dropdown from "../Dropdown";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./Cpx_svg_style";
 import { CpxImage, updatePinTouch, updateSwitch } from "./CpxImage";
@@ -30,6 +29,7 @@ interface IState {
     selected_file: string;
     cpx: ICpxState;
     play_button: boolean;
+    currently_selected_file: string;
 }
 
 const DEFAULT_CPX_STATE: ICpxState = {
@@ -63,6 +63,7 @@ class Simulator extends React.Component<{}, IState> {
             play_button: false,
             running_file: "",
             selected_file: "",
+            currently_selected_file: "",
         };
 
         this.handleClick = this.handleClick.bind(this);
@@ -72,7 +73,6 @@ class Simulator extends React.Component<{}, IState> {
         this.onMouseLeave = this.onMouseLeave.bind(this);
         this.togglePlayClick = this.togglePlayClick.bind(this);
         this.refreshSimulatorClick = this.refreshSimulatorClick.bind(this);
-        this.onSelectBlur = this.onSelectBlur.bind(this);
     }
 
     handleMessage = (event: any): void => {
@@ -98,8 +98,11 @@ class Simulator extends React.Component<{}, IState> {
                 });
                 break;
             case "activate-play":
+                const newRunningFile = this.state.currently_selected_file;
+
                 this.setState({
                     play_button: !this.state.play_button,
+                    running_file: newRunningFile,
                 });
                 break;
             case "visible-editors":
@@ -113,9 +116,16 @@ class Simulator extends React.Component<{}, IState> {
                 break;
             case "current-file":
                 console.log("Setting current file", message.state.running_file);
-                this.setState({
-                    running_file: message.state.running_file,
-                });
+                if (this.state.play_button) {
+                    this.setState({
+                        currently_selected_file: message.state.running_file,
+                    });
+                } else {
+                    this.setState({
+                        running_file: message.state.running_file,
+                        currently_selected_file: message.state.running_file,
+                    });
+                }
                 break;
         }
     };
@@ -136,14 +146,9 @@ class Simulator extends React.Component<{}, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    <Dropdown
-                        label={"file-dropdown"}
-                        styleLabel={"dropdown"}
-                        lastChosen={this.state.running_file}
-                        width={300}
-                        textOptions={this.state.active_editors}
-                        onBlur={this.onSelectBlur}
-                    />
+                    {this.state.running_file && this.state.play_button
+                        ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
+                        : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
                 <div className="cpx-container">
                     <CpxImage
@@ -191,11 +196,6 @@ class Simulator extends React.Component<{}, IState> {
         sendMessage(WEBVIEW_MESSAGES.REFRESH_SIMULATOR, true);
     }
 
-    protected onSelectBlur(event: React.FocusEvent<HTMLSelectElement>) {
-        this.setState({
-            selected_file: event.currentTarget.value,
-        });
-    }
     protected onKeyEvent(event: KeyboardEvent, active: boolean) {
         let element;
         const target = event.target as SVGElement;
diff --git a/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap b/src/view/components/cpx/__snapshots__/Cpx.spec.tsx.snap
@@ -8,21 +8,7 @@ Array [
     <div
       className="file-selector"
     >
-      <div>
-        <select
-          className="dropdown"
-          id="file-dropdown"
-          onBlur={[Function]}
-        >
-          <option
-            disabled={true}
-            selected={true}
-            value=""
-          >
-            Choose a .py file to run on the Simulator
-          </option>
-        </select>
-      </div>
+      The simulator will run the .py file you have focused on.
     </div>
     <div
       className="cpx-container"
diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx
@@ -8,7 +8,6 @@ import {
 import PlayLogo from "../../svgs/play_svg";
 import StopLogo from "../../svgs/stop_svg";
 import { sendMessage } from "../../utils/MessageUtils";
-import Dropdown from "../Dropdown";
 import ActionBar from "../simulator/ActionBar";
 import { BUTTONS_KEYS, MicrobitImage } from "./MicrobitImage";
 
@@ -25,7 +24,8 @@ const DEFAULT_MICROBIT_STATE: IMicrobitState = {
 
 interface IState {
     active_editors: string[];
-    running_file: string;
+    running_file?: string;
+    currently_selected_file: string;
     play_button: boolean;
     selected_file: string;
     microbit: IMicrobitState;
@@ -44,7 +44,8 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             play_button: false,
             selected_file: "",
             active_editors: [],
-            running_file: "",
+            running_file: undefined,
+            currently_selected_file: "",
         };
         this.onKeyEvent = this.onKeyEvent.bind(this);
     }
@@ -71,8 +72,10 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "activate-play":
+                const newRunningFile = this.state.currently_selected_file;
                 this.setState({
                     play_button: !this.state.play_button,
+                    running_file: newRunningFile,
                 });
                 break;
             case "visible-editors":
@@ -81,9 +84,17 @@ export class MicrobitSimulator extends React.Component<any, IState> {
                 });
                 break;
             case "current-file":
-                this.setState({
-                    running_file: message.state.running_file,
-                });
+                if (this.state.play_button) {
+                    this.setState({
+                        currently_selected_file: message.state.running_file,
+                    });
+                } else {
+                    this.setState({
+                        running_file: message.state.running_file,
+                        currently_selected_file: message.state.running_file,
+                    });
+                }
+
                 break;
         }
     };
@@ -100,14 +111,9 @@ export class MicrobitSimulator extends React.Component<any, IState> {
         return (
             <div className="simulator">
                 <div className="file-selector">
-                    <Dropdown
-                        label={"file-dropdown"}
-                        styleLabel={"dropdown"}
-                        lastChosen={this.state.running_file}
-                        width={300}
-                        textOptions={this.state.active_editors}
-                        onBlur={this.onSelectFile}
-                    />
+                    {this.state.running_file && this.state.play_button
+                        ? CONSTANTS.CURRENTLY_RUNNING(this.state.running_file)
+                        : CONSTANTS.FILES_PLACEHOLDER}
                 </div>
                 <div className="microbit-container">
                     <MicrobitImage
@@ -130,6 +136,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             </div>
         );
     }
+
     protected togglePlayClick = () => {
         const button =
             window.document.getElementById(CONSTANTS.ID_NAME.PLAY_BUTTON) ||
@@ -142,11 +149,7 @@ export class MicrobitSimulator extends React.Component<any, IState> {
             state: !this.state.play_button,
         });
     };
-    protected onSelectFile(event: React.FocusEvent<HTMLSelectElement>) {
-        this.setState({
-            selected_file: event.currentTarget.value,
-        });
-    }
+
     protected refreshSimulatorClick = () => {
         const button = window.document.getElementById(
             CONSTANTS.ID_NAME.REFRESH_BUTTON
diff --git a/src/view/constants.ts b/src/view/constants.ts
@@ -42,7 +42,8 @@ export const CONSTANTS = {
         NUMERIC_SIX: "Digit6",
         NUMERIC_SEVEN: "Digit7",
     },
-    NO_FILES_AVAILABLE: "Choose a .py file to run on the Simulator",
+    FILES_PLACEHOLDER:
+        "The simulator will run the .py file you have focused on.",
     SIMULATOR_BUTTON_WIDTH: 60,
     TOOLBAR_INFO: `Explore what's on the board:`,
 };
diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap
@@ -10,21 +10,7 @@ exports[`Device component  should render correctly 1`] = `
     <div
       className="file-selector"
     >
-      <div>
-        <select
-          className="dropdown"
-          id="file-dropdown"
-          onBlur={[Function]}
-        >
-          <option
-            disabled={true}
-            selected={true}
-            value=""
-          >
-            Choose a .py file to run on the Simulator
-          </option>
-        </select>
-      </div>
+      The simulator will run the .py file you have focused on.
     </div>
     <div
       className="microbit-container"
diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css
@@ -18,6 +18,10 @@
 
 .file-selector {
     padding: 20px;
+    width: 80%;
+    height: 30px;
+    border: 1px solid var(--vscode-debugToolBar-background);
+    border-radius: 3px;
 }
 
 .shake-pressed {
@@ -70,4 +74,5 @@
 }
 .cpx-container {
     width: 100%;
+    padding-top: 10px;
 }

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,10 @@`
`18`	`18`
`19`	`19`	`.file-selector {`
`20`	`20`	`padding: 20px;`
	`21`	`+ width: 80%;`
	`22`	`+ height: 30px;`
	`23`	`+ border: 1px solid var(--vscode-debugToolBar-background);`
	`24`	`+ border-radius: 3px;`
`21`	`25`	`}`
`22`	`26`
`23`	`27`	`.shake-pressed {`
`@@ -70,4 +74,5 @@`
`70`	`74`	`}`
`71`	`75`	`.cpx-container {`
`72`	`76`	`width: 100%;`
	`77`	`+ padding-top: 10px;`
`73`	`78`	`}`