From 11134bc5ce01d0a025d311a4f83e67ff6e63ce1c Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 9 Feb 2019 19:13:24 -0500
Subject: Moved client code to client folder

---
 src/client/views/EditableView.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/client/views/EditableView.tsx

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
new file mode 100644
index 000000000..2e784d3f9
--- /dev/null
+++ b/src/client/views/EditableView.tsx
@@ -0,0 +1,39 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable, action } from 'mobx';
+
+export interface EditableProps {
+    GetValue(): string;
+    SetValue(value: string): boolean;
+    contents: any;
+}
+
+@observer
+export class EditableView extends React.Component<EditableProps> {
+    @observable
+    editing: boolean = false;
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            this.props.SetValue(e.currentTarget.value);
+            this.editing = false;
+        } else if (e.key == "Escape") {
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)}
+                style={{ width: "100%" }}></input>
+        } else {
+            return (
+                <div>
+                    {this.props.contents}
+                    <button onClick={action(() => this.editing = true)}>Edit</button>
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2