started adding editable schema cells

1 files changed, 35 insertions, 0 deletions

diff --git a/src/views/EditableView.tsx b/src/views/EditableView.tsx
new file mode 100644
index 000000000..5f8d6ebcd
--- /dev/null
+++ b/src/views/EditableView.tsx
@@ -0,0 +1,35 @@
+import React = require('react')
+import { observer } from 'mobx-react';
+import { observable } 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;
+
+    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key == "Enter" && !e.ctrlKey) {
+            this.props.SetValue(e.currentTarget.value);
+            this.editing = false;
+        }
+    }
+
+    render() {
+        if (this.editing) {
+            return <input value={this.props.GetValue()} onKeyDown={this.onKeyDown}></input>
+        } else {
+            return (
+                <div>
+                    {this.props.contents}
+                    <button onClick={() => this.editing = true}>Edit</button>
+                </div>
+            )
+        }
+    }
+}
\ No newline at end of file