From 6a637ac37962dbb402bb3ec1172cadafef9eab20 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 2 Jul 2022 10:41:40 -0400
Subject: fixing  many eslint errors

---
 .../views/nodes/formattedText/DashDocView.tsx      | 181 +++++++++++----------
 1 file changed, 96 insertions(+), 85 deletions(-)

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

diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 1d8e3a2cf..9d203b6cc 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,52 +1,54 @@
-import { IReactionDisposer, reaction, observable, action } from "mobx";
-import { NodeSelection } from "prosemirror-state";
-import { Doc, HeightSym, WidthSym } from "../../../../fields/Doc";
-import { Cast, StrCast, NumCast } from "../../../../fields/Types";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils, returnTransparent } from "../../../../Utils";
-import { DocServer } from "../../../DocServer";
-import { Docs, DocUtils } from "../../../documents/Documents";
-import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
-import { Transform } from "../../../util/Transform";
-import { DocumentView } from "../DocumentView";
-import { FormattedTextBox } from "./FormattedTextBox";
-import React = require("react");
+import { IReactionDisposer, reaction, observable, action } from 'mobx';
+import { NodeSelection } from 'prosemirror-state';
+import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
+import { Cast, StrCast, NumCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils, returnTransparent } from '../../../../Utils';
+import { DocServer } from '../../../DocServer';
+import { Docs, DocUtils } from '../../../documents/Documents';
+import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
+import { Transform } from '../../../util/Transform';
+import { DocumentView } from '../DocumentView';
+import { FormattedTextBox } from './FormattedTextBox';
+import React = require('react');
 import * as ReactDOM from 'react-dom';
-import { observer } from "mobx-react";
-import { ColorScheme } from "../../../util/SettingsManager";
+import { observer } from 'mobx-react';
+import { ColorScheme } from '../../../util/SettingsManager';
 
 export class DashDocView {
-    _fieldWrapper: HTMLSpanElement; // container for label and value
+    dom: HTMLSpanElement; // container for label and value
 
     constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
-        this._fieldWrapper = document.createElement("span");
-        this._fieldWrapper.style.position = "relative";
-        this._fieldWrapper.style.textIndent = "0";
-        this._fieldWrapper.style.border = "1px solid " + StrCast(tbox.layoutDoc.color, (CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark ? "dimgray" : "lightGray"));
-        this._fieldWrapper.style.width = node.attrs.width;
-        this._fieldWrapper.style.height = node.attrs.height;
-        this._fieldWrapper.style.display = node.attrs.hidden ? "none" : "inline-block";
-        (this._fieldWrapper.style as any).float = node.attrs.float;
-        this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); };
-        this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); };
-        this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); };
-        this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); };
-
-        ReactDOM.render(<DashDocViewInternal
-            docid={node.attrs.docid}
-            alias={node.attrs.alias}
-            width={node.attrs.width}
-            height={node.attrs.height}
-            hidden={node.attrs.hidden}
-            fieldKey={node.attrs.fieldKey}
-            tbox={tbox}
-            view={view}
-            node={node}
-            getPos={getPos}
-        />, this._fieldWrapper);
-        (this as any).dom = this._fieldWrapper;
+        this.dom = document.createElement('span');
+        this.dom.style.position = 'relative';
+        this.dom.style.textIndent = '0';
+        this.dom.style.border = '1px solid ' + StrCast(tbox.layoutDoc.color, CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark ? 'dimgray' : 'lightGray');
+        this.dom.style.width = node.attrs.width;
+        this.dom.style.height = node.attrs.height;
+        this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block';
+        (this.dom.style as any).float = node.attrs.float;
+        this.dom.onkeypress = function (e: any) {
+            e.stopPropagation();
+        };
+        this.dom.onkeydown = function (e: any) {
+            e.stopPropagation();
+        };
+        this.dom.onkeyup = function (e: any) {
+            e.stopPropagation();
+        };
+        this.dom.onmousedown = function (e: any) {
+            e.stopPropagation();
+        };
+
+        ReactDOM.render(
+            <DashDocViewInternal docid={node.attrs.docid} alias={node.attrs.alias} width={node.attrs.width} height={node.attrs.height} hidden={node.attrs.hidden} fieldKey={node.attrs.fieldKey} tbox={tbox} view={view} node={node} getPos={getPos} />,
+            this.dom
+        );
+        (this as any).dom = this.dom;
     }
-    destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); }
-    selectNode() { }
+    destroy() {
+        ReactDOM.unmountComponentAtNode(this.dom);
+    }
+    selectNode() {}
 }
 
 interface IDashDocViewInternal {
@@ -70,7 +72,6 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     @observable _finalLayout: any;
     @observable _resolvedDataDoc: any;
 
-
     updateDoc = action((dashDoc: Doc) => {
         this._dashDoc = dashDoc;
         this._finalLayout = this.props.docid ? dashDoc : Doc.expandTemplateLayout(Doc.Layout(dashDoc), dashDoc, this.props.fieldKey);
@@ -81,13 +82,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
             }
             this._resolvedDataDoc = Cast(this._finalLayout.resolvedDataDoc, Doc, null);
         }
-        if (this.props.width !== (this._dashDoc?._width ?? "") + "px" || this.props.height !== (this._dashDoc?._height ?? "") + "px") {
-            try { // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
-                this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
-                    ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
-                }));
+        if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') {
+            try {
+                // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
+                this.props.view.dispatch(
+                    this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+                        ...this.props.node.attrs,
+                        width: (this._dashDoc?._width ?? '') + 'px',
+                        height: (this._dashDoc?._height ?? '') + 'px',
+                    })
+                );
             } catch (e) {
-                console.log("DashDocView:" + e);
+                console.log('DashDocView:' + e);
             }
         }
     });
@@ -98,14 +104,15 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
 
         DocServer.GetRefField(this.props.docid + this.props.alias).then(async dashDoc => {
             if (!(dashDoc instanceof Doc)) {
-                this.props.alias && DocServer.GetRefField(this.props.docid).then(async dashDocBase => {
-                    if (dashDocBase instanceof Doc) {
-                        const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docid + this.props.alias);
-                        aliasedDoc.layoutKey = "layout";
-                        this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
-                        this.updateDoc(aliasedDoc);
-                    }
-                });
+                this.props.alias &&
+                    DocServer.GetRefField(this.props.docid).then(async dashDocBase => {
+                        if (dashDocBase instanceof Doc) {
+                            const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docid + this.props.alias);
+                            aliasedDoc.layoutKey = 'layout';
+                            this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
+                            this.updateDoc(aliasedDoc);
+                        }
+                    });
             } else {
                 this.updateDoc(dashDoc);
             }
@@ -113,67 +120,70 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     }
 
     componentDidMount() {
-        this._disposers.upater = reaction(() => this._dashDoc && (NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width)),
+        this._disposers.upater = reaction(
+            () => this._dashDoc && NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width),
             () => {
                 if (this._dashDoc) {
-                    this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
-                        ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
-                    }));
+                    this.props.view.dispatch(
+                        this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+                            ...this.props.node.attrs,
+                            width: (this._dashDoc?._width ?? '') + 'px',
+                            height: (this._dashDoc?._height ?? '') + 'px',
+                        })
+                    );
                 }
-            });
+            }
+        );
     }
 
-
     removeDoc = () => {
-        this.props.view.dispatch(this.props.view.state.tr
-            .setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos())))
-            .deleteSelection());
+        this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos()))).deleteSelection());
         return true;
-    }
+    };
 
     getDocTransform = () => {
         if (!this._spanRef.current) return Transform.Identity();
         const { scale, translateX, translateY } = Utils.GetScreenTransform(this._spanRef.current);
         return new Transform(-translateX, -translateY, 1).scale(1 / scale);
-    }
-    outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document);  // ideally, this would scroll to show the focus target
+    };
+    outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document); // ideally, this would scroll to show the focus target
 
     onKeyDown = (e: any) => {
         e.stopPropagation();
-        if (e.key === "Tab" || e.key === "Enter") {
+        if (e.key === 'Tab' || e.key === 'Enter') {
             e.preventDefault();
         }
-    }
+    };
 
     onPointerLeave = () => {
-        const ele = document.getElementById("DashDocCommentView-" + this.props.docid) as HTMLDivElement;
-        ele && (ele.style.backgroundColor = "");
-    }
+        const ele = document.getElementById('DashDocCommentView-' + this.props.docid) as HTMLDivElement;
+        ele && (ele.style.backgroundColor = '');
+    };
 
     onPointerEnter = () => {
-        const ele = document.getElementById("DashDocCommentView-" + this.props.docid) as HTMLDivElement;
-        ele && (ele.style.backgroundColor = "orange");
-    }
+        const ele = document.getElementById('DashDocCommentView-' + this.props.docid) as HTMLDivElement;
+        ele && (ele.style.backgroundColor = 'orange');
+    };
 
     componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
 
     render() {
-        return !this._dashDoc || !this._finalLayout || this.props.hidden ? null :
-            <div ref={this._spanRef}
+        return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
+            <div
+                ref={this._spanRef}
                 className="dash-span"
                 style={{
                     width: this.props.width,
                     height: this.props.height,
                     position: 'absolute',
-                    display: 'inline-block'
+                    display: 'inline-block',
                 }}
                 onPointerLeave={this.onPointerLeave}
                 onPointerEnter={this.onPointerEnter}
                 onKeyDown={this.onKeyDown}
                 onKeyPress={e => e.stopPropagation()}
                 onKeyUp={e => e.stopPropagation()}
-                onWheel={e => e.preventDefault()}
-            >
+                onWheel={e => e.preventDefault()}>
                 <DocumentView
                     Document={this._finalLayout}
                     DataDoc={this._resolvedDataDoc}
@@ -200,6 +210,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     ContainingCollectionView={this._textBox.props.ContainingCollectionView}
                     ContainingCollectionDoc={this._textBox.props.ContainingCollectionDoc}
                 />
-            </div>;
+            </div>
+        );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2

