From f6a741f38a33bdb30b3a1d88215656dcd3d0712d Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 29 Apr 2024 23:00:22 -0400
Subject: eslint fixes.

---
 src/client/views/newlightbox/NewLightboxView.tsx | 335 ++++++++++++-----------
 1 file changed, 169 insertions(+), 166 deletions(-)

(limited to 'src/client/views/newlightbox/NewLightboxView.tsx')

diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx
index 6de4efc0d..6616abad1 100644
--- a/src/client/views/newlightbox/NewLightboxView.tsx
+++ b/src/client/views/newlightbox/NewLightboxView.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -26,11 +28,11 @@ import './NewLightboxView.scss';
 import { RecommendationList } from './RecommendationList';
 import { IRecommendation } from './components';
 
-enum LightboxStatus {
-    RECOMMENDATIONS = 'recommendations',
-    ANNOTATIONS = 'annotations',
-    NONE = 'none',
-}
+// enum LightboxStatus {
+//     RECOMMENDATIONS = 'recommendations',
+//     ANNOTATIONS = 'annotations',
+//     NONE = 'none',
+// }
 
 interface LightboxViewProps {
     PanelWidth: number;
@@ -47,10 +49,6 @@ type LightboxSavedState = {
 };
 @observer
 export class NewLightboxView extends React.Component<LightboxViewProps> {
-    @computed public static get LightboxDoc() {
-        return this._doc;
-    }
-    private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate;
     @observable private static _layoutTemplate: Opt<Doc> = undefined;
     @observable private static _layoutTemplateString: Opt<string> = undefined;
     @observable private static _doc: Opt<Doc> = undefined;
@@ -63,59 +61,39 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
 
     // keywords
     @observable private static _keywords: string[] = [];
-    @action public static SetKeywords(kw: string[]) {
-        this._keywords = kw;
-    }
-    @computed public static get Keywords() {
-        return this._keywords;
-    }
-
-    // query
     @observable private static _query: string = '';
-    @action public static SetQuery(query: string) {
-        this._query = query;
-    }
-    @computed public static get Query() {
-        return this._query;
-    }
-
-    // keywords
     @observable private static _recs: IRecommendation[] = [];
-    @action public static SetRecs(recs: IRecommendation[]) {
-        this._recs = recs;
-    }
-    @computed public static get Recs() {
-        return this._recs;
-    }
-
-    // bounds
     @observable private static _bounds: IBounds = emptyBounds;
-    @action public static SetBounds(bounds: IBounds) {
-        this._bounds = bounds;
-    }
-    @computed public static get Bounds() {
-        return this._bounds;
-    }
-
-    // explore
     @observable private static _explore: Opt<boolean> = false;
-    @action public static SetExploreMode(status: Opt<boolean>) {
-        this._explore = status;
-    }
-    @computed public static get ExploreMode() {
-        return this._explore;
-    }
-
-    // newLightbox sidebar status
     @observable private static _sidebarStatus: Opt<string> = '';
-    @action public static SetSidebarStatus(sidebarStatus: Opt<string>) {
-        this._sidebarStatus = sidebarStatus;
+    static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = [];
+    private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate;
+    public static GetSavedState(doc: Doc) {
+        return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined;
     }
-    @computed public static get SidebarStatus() {
-        return this._sidebarStatus;
+    // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie
+    @action
+    public static SetCookie(cookie: string) {
+        if (this.LightboxDoc && cookie) {
+            this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`);
+        }
     }
+    public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => {
+        SelectionManager.DeselectAll();
+        const doc = toList(docsIn).lastElement();
+        return (
+            doc &&
+            NewLightboxView.SetNewLightboxDoc(
+                doc,
+                undefined,
+                [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort(
+                    (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
+                ),
+                layoutTemplate
+            )
+        );
+    };
 
-    static path: { doc: Opt<Doc>; target: Opt<Doc>; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt<Doc[]>; saved: Opt<LightboxSavedState> }[] = [];
     @action public static SetNewLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
         if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) {
             if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX;
@@ -133,7 +111,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
             const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
             CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.());
-            //TabDocView.PinDoc(doc, { hidePresBox: true });
+            // TabDocView.PinDoc(doc, { hidePresBox: true });
             this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]);
             if (doc !== LightboxView.LightboxDoc) {
                 this._savedState = {
@@ -167,60 +145,6 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
     public static IsNewLightboxDocView(path: DocumentView[]) {
         return (path ?? []).includes(this._docView!);
     }
-    @computed get leftBorder() {
-        return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
-    }
-    @computed get topBorder() {
-        return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]);
-    }
-    newLightboxWidth = () => this.props.PanelWidth - 420;
-    newLightboxHeight = () => this.props.PanelHeight - 140;
-    newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
-    navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => {
-        return (
-            <div
-                className="newLightboxView-navBtn-frame"
-                style={{
-                    display: display(),
-                    left,
-                    width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
-                    bottom,
-                }}>
-                <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}>
-                    <div style={{ height: 10 }}>{color}</div>
-                    <FontAwesomeIcon icon={icon as any} size="3x" />
-                </div>
-            </div>
-        );
-    };
-    public static GetSavedState(doc: Doc) {
-        return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined;
-    }
-
-    // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie
-    @action
-    public static SetCookie(cookie: string) {
-        if (this.LightboxDoc && cookie) {
-            this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`);
-        }
-    }
-    public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => {
-        SelectionManager.DeselectAll();
-        const doc = toList(docsIn).lastElement();
-        return (
-            doc &&
-            NewLightboxView.SetNewLightboxDoc(
-                doc,
-                undefined,
-                [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort(
-                    (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow)
-                ),
-                layoutTemplate
-            )
-        );
-    };
-    docFilters = () => NewLightboxView._docFilters || [];
-    addDocTab = NewLightboxView.AddDocTab;
     @action public static Next() {
         const doc = NewLightboxView._doc!;
         const target = (NewLightboxView._docTarget = this._future?.pop());
@@ -230,26 +154,24 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
             DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 });
             if (NewLightboxView._history?.lastElement().target !== target) NewLightboxView._history?.push({ doc, target });
-        } else {
-            if (!target && NewLightboxView.path.length) {
-                const saved = NewLightboxView._savedState;
-                if (LightboxView.LightboxDoc && saved) {
-                    LightboxView.LightboxDoc._freeform_panX = saved.panX;
-                    LightboxView.LightboxDoc._freeform_panY = saved.panY;
-                    LightboxView.LightboxDoc._freeform_scale = saved.scale;
-                    LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop;
-                }
-                const pop = NewLightboxView.path.pop();
-                if (pop) {
-                    NewLightboxView._doc = pop.doc;
-                    NewLightboxView._docTarget = pop.target;
-                    NewLightboxView._future = pop.future;
-                    NewLightboxView._history = pop.history;
-                    NewLightboxView._savedState = pop.saved;
-                }
-            } else {
-                NewLightboxView.SetNewLightboxDoc(target);
+        } else if (!target && NewLightboxView.path.length) {
+            const saved = NewLightboxView._savedState;
+            if (LightboxView.LightboxDoc && saved) {
+                LightboxView.LightboxDoc._freeform_panX = saved.panX;
+                LightboxView.LightboxDoc._freeform_panY = saved.panY;
+                LightboxView.LightboxDoc._freeform_scale = saved.scale;
+                LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop;
+            }
+            const pop = NewLightboxView.path.pop();
+            if (pop) {
+                NewLightboxView._doc = pop.doc;
+                NewLightboxView._docTarget = pop.target;
+                NewLightboxView._future = pop.future;
+                NewLightboxView._history = pop.history;
+                NewLightboxView._savedState = pop.saved;
             }
+        } else {
+            NewLightboxView.SetNewLightboxDoc(target);
         }
     }
 
@@ -269,6 +191,118 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
         }
         if (NewLightboxView._future?.lastElement() !== previous.target || previous.doc) NewLightboxView._future?.push(previous.target || previous.doc);
     }
+
+    @action public static SetKeywords(kw: string[]) {
+        this._keywords = kw;
+    }
+    @computed public static get Keywords() {
+        return this._keywords;
+    }
+    @computed public static get LightboxDoc() {
+        return this._doc;
+    }
+
+    // query
+    @action public static SetQuery(query: string) {
+        this._query = query;
+    }
+    @computed public static get Query() {
+        return this._query;
+    }
+
+    // keywords
+    @action public static SetRecs(recs: IRecommendation[]) {
+        this._recs = recs;
+    }
+    @computed public static get Recs() {
+        return this._recs;
+    }
+
+    // bounds
+    @action public static SetBounds(bounds: IBounds) {
+        this._bounds = bounds;
+    }
+    @computed public static get Bounds() {
+        return this._bounds;
+    }
+    // newLightbox sidebar status
+    @action public static SetSidebarStatus(sidebarStatus: Opt<string>) {
+        this._sidebarStatus = sidebarStatus;
+    }
+
+    // explore
+    @action public static SetExploreMode(status: Opt<boolean>) {
+        this._explore = status;
+    }
+
+    addDocTab = NewLightboxView.AddDocTab;
+
+    @computed public static get ExploreMode() {
+        return this._explore;
+    }
+
+    @computed public static get SidebarStatus() {
+        return this._sidebarStatus;
+    }
+    @computed get leftBorder() {
+        return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]);
+    }
+    @computed get topBorder() {
+        return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]);
+    }
+
+    @computed
+    get documentView() {
+        if (!LightboxView.LightboxDoc) return null;
+        return (
+            <GestureOverlay isActive>
+                <DocumentView
+                    ref={action((r: DocumentView | null) => {
+                        NewLightboxView._docView = r !== null ? r : undefined;
+                    })}
+                    Document={LightboxView.LightboxDoc}
+                    PanelWidth={this.newLightboxWidth}
+                    PanelHeight={this.newLightboxHeight}
+                    LayoutTemplate={NewLightboxView.LightboxDocTemplate}
+                    isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
+                    isContentActive={returnTrue}
+                    styleProvider={DefaultStyleProvider}
+                    ScreenToLocalTransform={this.newLightboxScreenToLocal}
+                    renderDepth={0}
+                    containerViewPath={returnEmptyDoclist}
+                    childFilters={this.docFilters}
+                    childFiltersByRanges={returnEmptyFilter}
+                    searchFilterDocs={returnEmptyDoclist}
+                    addDocument={undefined}
+                    removeDocument={undefined}
+                    whenChildContentsActiveChanged={emptyFunction}
+                    addDocTab={this.addDocTab}
+                    pinToPres={TabDocView.PinDoc}
+                    focus={emptyFunction}
+                />
+            </GestureOverlay>
+        );
+    }
+    newLightboxWidth = () => this.props.PanelWidth - 420;
+    newLightboxHeight = () => this.props.PanelHeight - 140;
+    newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
+    navBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => (
+        <div
+            className="newLightboxView-navBtn-frame"
+            style={{
+                display: display(),
+                left,
+                width: bottom !== undefined ? undefined : Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]),
+                bottom,
+            }}>
+            <div className="newLightboxView-navBtn" title={color} style={{ top, color: color ? 'red' : 'white', background: color ? 'white' : undefined }} onClick={click}>
+                <div style={{ height: 10 }}>{color}</div>
+                <FontAwesomeIcon icon={icon as any} size="3x" />
+            </div>
+        </div>
+    );
+
+    docFilters = () => NewLightboxView._docFilters || [];
     @action
     stepInto = () => {
         NewLightboxView.path.push({
@@ -290,43 +324,11 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
         }
     };
 
-    @computed
-    get documentView() {
-        if (!LightboxView.LightboxDoc) return null;
-        else
-            return (
-                <GestureOverlay isActive={true}>
-                    <DocumentView
-                        ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))}
-                        Document={LightboxView.LightboxDoc}
-                        PanelWidth={this.newLightboxWidth}
-                        PanelHeight={this.newLightboxHeight}
-                        LayoutTemplate={NewLightboxView.LightboxDocTemplate}
-                        isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
-                        isContentActive={returnTrue}
-                        styleProvider={DefaultStyleProvider}
-                        ScreenToLocalTransform={this.newLightboxScreenToLocal}
-                        renderDepth={0}
-                        containerViewPath={returnEmptyDoclist}
-                        childFilters={this.docFilters}
-                        childFiltersByRanges={returnEmptyFilter}
-                        searchFilterDocs={returnEmptyDoclist}
-                        addDocument={undefined}
-                        removeDocument={undefined}
-                        whenChildContentsActiveChanged={emptyFunction}
-                        addDocTab={this.addDocTab}
-                        pinToPres={TabDocView.PinDoc}
-                        focus={emptyFunction}
-                    />
-                </GestureOverlay>
-            );
-    }
-
     future = () => NewLightboxView._future;
     render() {
-        let newLightboxHeaderHeight = 100;
-        let downx = 0,
-            downy = 0;
+        const newLightboxHeaderHeight = 100;
+        let downx = 0;
+        let downy = 0;
         return !LightboxView.LightboxDoc ? null : (
             <div
                 className="newLightboxView-frame"
@@ -339,7 +341,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
                         NewLightboxView.SetNewLightboxDoc(undefined);
                     }
                 }}>
-                <div className={`app-document`} style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}>
+                <div className="app-document" style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}>
                     <div
                         className="newLightboxView-contents"
                         style={{
@@ -354,7 +356,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
                                 {this.documentView}
                             </div>
                         ) : (
-                            <div className={`explore`}>
+                            <div className="explore">
                                 <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds} />
                             </div>
                         )}
@@ -367,6 +369,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
 }
 interface NewLightboxTourBtnProps {
     navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element;
+    // eslint-disable-next-line react/no-unused-prop-types
     future: () => Opt<Doc[]>;
     stepInto: () => void;
 }
@@ -378,7 +381,7 @@ export class NewLightboxTourBtn extends React.Component<NewLightboxTourBtnProps>
             0,
             0,
             'chevron-down',
-            () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'),
+            () => (LightboxView.LightboxDoc /* && this.props.future()?.length */ ? '' : 'none'),
             e => {
                 e.stopPropagation();
                 this.props.stepInto();
-- 
cgit v1.2.3-70-g09d2

