From 6b52b5d97ec5bf49923801e0b04a67925a37eda8 Mon Sep 17 00:00:00 2001
From: Brandon <brandon_li@brown.edu>
Date: Tue, 5 Mar 2019 18:47:19 -0500
Subject: Finished kvp again

---
 src/client/views/nodes/KeyValueBox.tsx | 54 ++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/KeyValueBox.tsx')

diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index e8ebd50be..6192cd278 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -4,12 +4,18 @@ import { observer } from "mobx-react";
 import { EditorView } from 'prosemirror-view';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Opt, FieldWaiting } from '../../../fields/Field';
+import { Opt, FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import { KeyValuePair } from "./KeyValuePair";
 import "./KeyValueBox.scss";
 import React = require("react")
+import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
+import { useState } from 'react'
+import { Key } from '../../../fields/Key';
+import { TextField } from '../../../fields/TextField';
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
@@ -18,12 +24,18 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
+    private _newKey = '';
+    private _newValue = '';
 
 
     constructor(props: FieldViewProps) {
         super(props);
 
         this._ref = React.createRef();
+        this.state = {
+            key: '',
+            value: ''
+        }
     }
 
 
@@ -32,6 +44,26 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return false;
     }
 
+    onEnterKey = (e: React.KeyboardEvent): void => {
+        if (e.key == 'Enter') {
+            if (this._newKey != '' && this._newValue != '') {
+                let doc = this.props.doc.GetT(KeyStore.Data, Document);
+                if (!doc || doc == FieldWaiting) {
+                    return
+                }
+                let realDoc = doc;
+                realDoc.Set(new Key(this._newKey), new TextField(this._newValue));
+                if (this.refs.newKVPKey instanceof HTMLInputElement) {
+                    this.refs.newKVPKey.value = ''
+                }
+                if (this.refs.newKVPValue instanceof HTMLInputElement) {
+                    this.refs.newKVPValue.value = ''
+                }
+                this._newKey = ''
+                this._newValue = ''
+            }
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && this.props.isSelected()) {
@@ -52,7 +84,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         let ids: { [key: string]: string } = {};
         let protos = doc.GetAllPrototypes();
         for (const proto of protos) {
-            proto._proxies.forEach((val, key) => {
+            proto._proxies.forEach((val: any, key: string) => {
                 if (!(key in ids)) {
                     ids[key] = key;
                 }
@@ -67,9 +99,24 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newKey = e.currentTarget.value;
+    }
 
-    render() {
+    valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._newValue = e.currentTarget.value;
+    }
 
+    newKeyValue = () => {
+        return (
+            <tr>
+                <td><input type="text" ref="newKVPKey" id="key" placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" ref="newKVPValue" id="value" placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+            </tr>
+        )
+    }
+
+    render() {
         return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
             <table className="keyValueBox-table">
                 <tbody>
@@ -78,6 +125,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                         <th>Fields</th>
                     </tr>
                     {this.createTable()}
+                    {this.newKeyValue()}
                 </tbody>
             </table>
         </div>)
-- 
cgit v1.2.3-70-g09d2


From 1f753c81fe6b3ea5858890bf5da8173a5fe56c41 Mon Sep 17 00:00:00 2001
From: Brandon <brandon_li@brown.edu>
Date: Mon, 11 Mar 2019 18:52:33 -0400
Subject: finished kvp?

---
 package-lock.json                      | 77 ++++++++++++++++++++++++++--------
 src/client/views/nodes/KeyValueBox.tsx | 36 ++++++++++------
 2 files changed, 83 insertions(+), 30 deletions(-)

(limited to 'src/client/views/nodes/KeyValueBox.tsx')

diff --git a/package-lock.json b/package-lock.json
index f0a83dc58..bf49ee920 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3574,14 +3574,18 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
           }
         }
       }
@@ -3710,7 +3714,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3731,12 +3736,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3751,17 +3758,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3878,7 +3888,8 @@
         "inherits": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3890,6 +3901,7 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3904,6 +3916,7 @@
           "version": "3.0.4",
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3911,12 +3924,14 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3935,6 +3950,7 @@
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4015,7 +4031,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4027,6 +4044,7 @@
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4112,7 +4130,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4148,6 +4167,7 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4167,6 +4187,7 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4210,12 +4231,14 @@
         "wrappy": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
+          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
+          "optional": true
         }
       }
     },
@@ -12154,6 +12177,26 @@
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "string_decoder": {
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 8025f00d6..7de5bda92 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -16,6 +16,7 @@ import { Key } from '../../../fields/Key';
 import { TextField } from '../../../fields/TextField';
 import { EditorView } from "prosemirror-view";
 import { IReactionDisposer } from "mobx";
+import { observable, action } from "mobx";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
@@ -26,16 +27,14 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
     private _reactionDisposer: Opt<IReactionDisposer>;
     private _newKey = '';
     private _newValue = '';
+    @observable private _keyInput: string = "";
+    @observable private _valueInput: string = "";
 
 
     constructor(props: FieldViewProps) {
         super(props);
 
         this._ref = React.createRef();
-        this.state = {
-            key: '',
-            value: ''
-        }
     }
 
 
@@ -52,13 +51,22 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
                     return
                 }
                 let realDoc = doc;
-                realDoc.Set(new Key(this._newKey), new TextField(this._newValue));
-                if (this.refs.newKVPKey instanceof HTMLInputElement) {
-                    this.refs.newKVPKey.value = ''
+
+                let script = CompileScript(this._newValue, undefined, true);
+                if (!script.compiled) {
+                    return;
                 }
-                if (this.refs.newKVPValue instanceof HTMLInputElement) {
-                    this.refs.newKVPValue.value = ''
+                let field = script();
+                if (field instanceof Field) {
+                    realDoc.Set(new Key(this._newKey), field);
+                } else {
+                    let dataField = ToField(field);
+                    if (dataField) {
+                        realDoc.Set(new Key(this._newKey), field);
+                    }
                 }
+                this._keyInput = ""
+                this._valueInput = ""
                 this._newKey = ''
                 this._newValue = ''
             }
@@ -99,19 +107,21 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return rows;
     }
 
+    @action
     keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this._newKey = e.currentTarget.value;
+        this._keyInput = e.currentTarget.value;
     }
 
+    @action
     valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this._newValue = e.currentTarget.value;
+        this._valueInput = e.currentTarget.value;
     }
 
     newKeyValue = () => {
         return (
             <tr>
-                <td><input type="text" ref="newKVPKey" id="key" placeholder="Key" onChange={this.keyChanged} /></td>
-                <td><input type="text" ref="newKVPValue" id="value" placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+                <td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
+                <td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
             </tr>
         )
     }
-- 
cgit v1.2.3-70-g09d2


From 3090bc53ba13427d739e4ba292705c25d2bb02cd Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 16 Mar 2019 23:32:16 -0400
Subject: Fixes and cleanup

---
 src/client/views/nodes/KeyValueBox.tsx | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

(limited to 'src/client/views/nodes/KeyValueBox.tsx')

diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 7de5bda92..283c1f732 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -2,39 +2,26 @@
 import { observer } from "mobx-react";
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import { Document } from '../../../fields/Document';
-import { Opt, FieldWaiting, Field } from '../../../fields/Field';
+import { FieldWaiting, Field } from '../../../fields/Field';
 import { KeyStore } from '../../../fields/KeyStore';
 import { FieldView, FieldViewProps } from './FieldView';
 import "./KeyValueBox.scss";
 import { KeyValuePair } from "./KeyValuePair";
 import React = require("react")
-import { Server } from "../../Server"
-import { EditableView } from "../EditableView";
 import { CompileScript, ToField } from "../../util/Scripting";
-import { useState } from 'react'
 import { Key } from '../../../fields/Key';
-import { TextField } from '../../../fields/TextField';
-import { EditorView } from "prosemirror-view";
-import { IReactionDisposer } from "mobx";
 import { observable, action } from "mobx";
 
 @observer
 export class KeyValueBox extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
-    private _ref: React.RefObject<HTMLDivElement>;
-    private _editorView: Opt<EditorView>;
-    private _reactionDisposer: Opt<IReactionDisposer>;
-    private _newKey = '';
-    private _newValue = '';
     @observable private _keyInput: string = "";
     @observable private _valueInput: string = "";
 
 
     constructor(props: FieldViewProps) {
         super(props);
-
-        this._ref = React.createRef();
     }
 
 
@@ -43,32 +30,31 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
         return false;
     }
 
+    @action
     onEnterKey = (e: React.KeyboardEvent): void => {
         if (e.key == 'Enter') {
-            if (this._newKey != '' && this._newValue != '') {
+            if (this._keyInput && this._valueInput) {
                 let doc = this.props.doc.GetT(KeyStore.Data, Document);
                 if (!doc || doc == FieldWaiting) {
                     return
                 }
                 let realDoc = doc;
 
-                let script = CompileScript(this._newValue, undefined, true);
+                let script = CompileScript(this._valueInput, undefined, true);
                 if (!script.compiled) {
                     return;
                 }
                 let field = script();
                 if (field instanceof Field) {
-                    realDoc.Set(new Key(this._newKey), field);
+                    realDoc.Set(new Key(this._keyInput), field);
                 } else {
                     let dataField = ToField(field);
                     if (dataField) {
-                        realDoc.Set(new Key(this._newKey), field);
+                        realDoc.Set(new Key(this._keyInput), dataField);
                     }
                 }
                 this._keyInput = ""
                 this._valueInput = ""
-                this._newKey = ''
-                this._newValue = ''
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2

