aboutsummaryrefslogtreecommitdiff
path: root/src/debug/Viewer.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-04-05 22:44:03 -0400
committerbobzel <zzzman@gmail.com>2023-04-05 22:44:03 -0400
commit9b41da1af16b982ee8ac2fc09f2f8b5d67eac9fb (patch)
treebc3f57cd5b31fd453d272c925f6d5b728ab63bae /src/debug/Viewer.tsx
parent9dae453967183b294bf4f7444b948023a1d52d39 (diff)
parent8f7e99641f84ad15f34ba9e4a60b664ac93d2e5d (diff)
Merge branch 'master' into data-visualization-view-naafi
Diffstat (limited to 'src/debug/Viewer.tsx')
-rw-r--r--src/debug/Viewer.tsx72
1 files changed, 35 insertions, 37 deletions
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index ee7dd1fc1..02038c426 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -1,5 +1,4 @@
import { action, configure, observable, ObservableMap, Lambda } from 'mobx';
-import "normalize.css";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { observer } from 'mobx-react';
@@ -21,7 +20,6 @@ URLField;
ScriptField;
CursorField;
-
function applyToDoc(doc: { [index: string]: FieldResult }, key: string, scriptString: string): boolean;
function applyToDoc(doc: { [index: number]: FieldResult }, key: number, scriptString: string): boolean;
function applyToDoc(doc: any, key: string | number, scriptString: string): boolean {
@@ -37,11 +35,11 @@ function applyToDoc(doc: any, key: string | number, scriptString: string): boole
}
configure({
- enforceActions: "observed"
+ enforceActions: 'observed',
});
@observer
-class ListViewer extends React.Component<{ field: List<Field> }>{
+class ListViewer extends React.Component<{ field: List<Field> }> {
@observable
expanded = false;
@@ -49,14 +47,16 @@ class ListViewer extends React.Component<{ field: List<Field> }>{
onClick = (e: React.MouseEvent) => {
this.expanded = !this.expanded;
e.stopPropagation();
- }
+ };
render() {
let content;
if (this.expanded) {
content = (
<div>
- {this.props.field.map((field, index) => <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} />)}
+ {this.props.field.map((field, index) => (
+ <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} />
+ ))}
</div>
);
} else {
@@ -66,7 +66,7 @@ class ListViewer extends React.Component<{ field: List<Field> }>{
<div>
<button onClick={this.onClick}>Toggle</button>
{content}
- </div >
+ </div>
);
}
}
@@ -80,7 +80,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
onClick = (e: React.MouseEvent) => {
this.expanded = !this.expanded;
e.stopPropagation();
- }
+ };
render() {
let content;
@@ -96,10 +96,7 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
});
content = (
<div>
- Document ({this.props.field[Id]})
- <div style={{ paddingLeft: "25px" }}>
- {fields}
- </div>
+ Document ({this.props.field[Id]})<div style={{ paddingLeft: '25px' }}>{fields}</div>
</div>
);
} else {
@@ -109,24 +106,23 @@ class DocumentViewer extends React.Component<{ field: Doc }> {
<div>
<button onClick={this.onClick}>Toggle</button>
{content}
- </div >
+ </div>
);
}
}
@observer
-class DebugViewer extends React.Component<{ field: FieldResult, setValue(value: string): boolean }> {
-
+class DebugViewer extends React.Component<{ field: FieldResult; setValue(value: string): boolean }> {
render() {
let content;
const field = this.props.field;
if (field instanceof List) {
- content = (<ListViewer field={field} />);
+ content = <ListViewer field={field} />;
} else if (field instanceof Doc) {
- content = (<DocumentViewer field={field} />);
- } else if (typeof field === "string") {
+ content = <DocumentViewer field={field} />;
+ } else if (typeof field === 'string') {
content = <p>"{field}"</p>;
- } else if (typeof field === "number" || typeof field === "boolean") {
+ } else if (typeof field === 'number' || typeof field === 'boolean') {
content = <p>{field}</p>;
} else if (field instanceof RichTextField) {
content = <p>RTF: {field.Data}</p>;
@@ -153,28 +149,30 @@ class Viewer extends React.Component {
@action
inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
this.idToAdd = e.target.value;
- }
+ };
@action
onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
- if (e.key === "Enter") {
- DocServer.GetRefField(this.idToAdd).then(action((field: any) => {
- if (field !== undefined) {
- this.fields.push(field);
- }
- }));
- this.idToAdd = "";
+ if (e.key === 'Enter') {
+ DocServer.GetRefField(this.idToAdd).then(
+ action((field: any) => {
+ if (field !== undefined) {
+ this.fields.push(field);
+ }
+ })
+ );
+ this.idToAdd = '';
}
- }
+ };
render() {
return (
<>
- <input value={this.idToAdd}
- onChange={this.inputOnChange}
- onKeyDown={this.onKeyPress} />
+ <input value={this.idToAdd} onChange={this.inputOnChange} onKeyDown={this.onKeyPress} />
<div>
- {this.fields.map((field, index) => <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>)}
+ {this.fields.map((field, index) => (
+ <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>
+ ))}
</div>
</>
);
@@ -182,11 +180,11 @@ class Viewer extends React.Component {
}
(async function () {
- await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, "viewer");
- ReactDOM.render((
- <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+ await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, 'viewer');
+ ReactDOM.render(
+ <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
<Viewer />
- </div>),
+ </div>,
document.getElementById('root')
);
-})(); \ No newline at end of file
+})();