diff options
Diffstat (limited to 'src/debug/Viewer.tsx')
-rw-r--r-- | src/debug/Viewer.tsx | 72 |
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 +})(); |