Remove form and write on enter

Author: thegecko

README.md

@@ -45,7 +45,3 @@ Web Components library for micro:bit
 
 ### Firmware
 - [ ] Update Firmware
-
-
-buttons disappear with no text
-remove form, enter chsnre too

src/components.d.ts

@@ -183,7 +183,7 @@ export namespace Components {
     /**
     * The text shown on the button
     */
-    'buttonText': string;
+    'buttonLabel': string;
     /**
     * The speed to scroll the text
     */
@@ -194,7 +194,7 @@ export namespace Components {
     /**
     * The text shown on the button
     */
-    'buttonText'?: string;
+    'buttonLabel'?: string;
     /**
     * The speed to scroll the text
     */

src/components/information/microbit-name.tsx

@@ -14,12 +14,6 @@ export class MicrobitName {
     @Prop() disconnectedText: string = "Disconnected";
 
     render() {
-        return (
-            <div>{this.getText()}</div>
-        );
-    }
-
-    private getText(): string {
         return this.device ? this.device.name : this.disconnectedText;
     }
 }

src/components/led/microbit-text.tsx

@@ -12,7 +12,7 @@ export class MicrobitText {
     /**
      * The text shown on the button
      */
-    @Prop() buttonText: string = "Write";
+    @Prop() buttonLabel: string = "";
 
     /**
      * The speed to scroll the text
@@ -33,20 +33,37 @@ export class MicrobitText {
     }
 
     render() {
+        let button: JSX.Element;
+        
+        if (this.buttonLabel) {
+            button = <input
+                type="submit"
+                disabled={this.disabled}
+                value={this.buttonLabel}
+                onClick={() => this.writeText()}></input>;
+        }
+
         return (
-            <form onSubmit={e => this.handleSubmit(e)}>
-                <input type="input" disabled={this.disabled} maxLength={20} onChange={text => this.handleChange(text)}></input>
-                <input type="submit" disabled={this.disabled} value={this.buttonText}></input>
-            </form>
+            <span>
+                <input
+                    type="input"
+                    disabled={this.disabled}
+                    maxLength={20}
+                    onKeyPress={e => this.handleKeyPress(e)}></input>
+                {button}
+            </span>
         );
     }
 
-    private handleChange(event) {
-        this.text = event.target.value;
+    private handleKeyPress(event) {
+        if (event.keyCode == 13) {
+            this.writeText();
+        } else {
+            this.text = event.target.value;
+        }
     }
 
-    private handleSubmit(event) {
-        event.preventDefault();
+    private writeText() {
         this.services.ledService.writeText(this.text);
     }
 }

src/index.html

@@ -32,7 +32,7 @@
             <microbit-temperature></microbit-temperature>
         </div>
         <div>
-            <microbit-text></microbit-text>
+            <microbit-text button-label="Write"></microbit-text>
         </div>
     </microbit-app>
 </body>