From 6b52b5d97ec5bf49923801e0b04a67925a37eda8 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 5 Mar 2019 18:47:19 -0500 Subject: Finished kvp again --- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/KeyValueBox.tsx | 54 +++++++++++++++++++++++++++++++-- src/client/views/nodes/KeyValuePair.tsx | 31 ++++++++++++++++++- 3 files changed, 82 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e01e1d4cd..5ce8bb637 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed } from "mobx" import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; 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 { @@ -18,12 +24,18 @@ export class KeyValueBox extends React.Component { private _ref: React.RefObject; private _editorView: Opt; private _reactionDisposer: Opt; + 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 { 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 { 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 { return rows; } + keyChanged = (e: React.ChangeEvent) => { + this._newKey = e.currentTarget.value; + } - render() { + valueChanged = (e: React.ChangeEvent) => { + this._newValue = e.currentTarget.value; + } + newKeyValue = () => { + return ( + + + + + ) + } + + render() { return (
@@ -78,6 +125,7 @@ export class KeyValueBox extends React.Component { {this.createTable()} + {this.newKeyValue()}
Fields
) diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index a97e98313..111f85a05 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -8,6 +8,8 @@ import { observable, action } from 'mobx'; import { Document } from '../../../fields/Document'; import { Key } from '../../../fields/Key'; import { Server } from "../../Server" +import { EditableView } from "../EditableView"; +import { CompileScript, ToField } from "../../util/Scripting"; // Represents one row in a key value plane @@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component { bindings: {}, selectOnLoad: false, } + let contents = ( + + ); return ( {this.key.Name} - + { + let field = props.doc.Get(props.fieldKey); + if (field && field instanceof Field) { + return field.ToScriptString(); + } + return field || ""; + }} + SetValue={(value: string) => { + let script = CompileScript(value, undefined, true); + if (!script.compiled) { + return false; + } + let field = script(); + if (field instanceof Field) { + props.doc.Set(props.fieldKey, field); + return true; + } else { + let dataField = ToField(field); + if (dataField) { + props.doc.Set(props.fieldKey, dataField); + return true; + } + } + return false; + }}> ) } -- cgit v1.2.3-70-g09d2 From 1f753c81fe6b3ea5858890bf5da8173a5fe56c41 Mon Sep 17 00:00:00 2001 From: Brandon 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') 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 { @@ -26,16 +27,14 @@ export class KeyValueBox extends React.Component { private _reactionDisposer: Opt; 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 { 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 { return rows; } + @action keyChanged = (e: React.ChangeEvent) => { - this._newKey = e.currentTarget.value; + this._keyInput = e.currentTarget.value; } + @action valueChanged = (e: React.ChangeEvent) => { - this._newValue = e.currentTarget.value; + this._valueInput = e.currentTarget.value; } newKeyValue = () => { return ( - - + + ) } -- cgit v1.2.3-70-g09d2 From 3090bc53ba13427d739e4ba292705c25d2bb02cd Mon Sep 17 00:00:00 2001 From: Tyler Schicke 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') 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 { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) } - private _ref: React.RefObject; - private _editorView: Opt; - private _reactionDisposer: Opt; - 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 { 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