From 9d69ab27de83ead3e499edc9028ba85749407a1e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 23 Apr 2024 18:35:59 -0400
Subject: more lint cleanup

---
 src/client/views/LightboxView.tsx | 82 ++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 32 deletions(-)

(limited to 'src/client/views/LightboxView.tsx')

diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index c34554b56..24433cd01 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable no-use-before-define */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Toggle, ToggleType, Type } from 'browndash-components';
@@ -43,6 +46,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
      */
     public static Contains(view?:DocumentView) { return view && LightboxView.Instance?._docView && (view.containerViewPath?.() ?? []).concat(view).includes(LightboxView.Instance?._docView); } // prettier-ignore
     public static get LightboxDoc() { return LightboxView.Instance?._doc; } // prettier-ignore
+    // eslint-disable-next-line no-use-before-define
     static Instance: LightboxView;
     private _path: {
         doc: Opt<Doc>; //
@@ -72,11 +76,18 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     @action
     public SetLightboxDoc(doc: Opt<Doc>, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) {
         const lightDoc = this._doc;
-        lightDoc && lightDoc !== doc && savedKeys.forEach(key => (lightDoc[key] = this._savedState[key]));
+        lightDoc &&
+            lightDoc !== doc &&
+            savedKeys.forEach(key => {
+                lightDoc[key] = this._savedState[key];
+            });
         this._savedState = {};
 
         if (doc) {
-            lightDoc !== doc && savedKeys.map(key => (this._savedState[key] = Doc.Get(doc, key, true)));
+            lightDoc !== doc &&
+                savedKeys.forEach(key => {
+                    this._savedState[key] = Doc.Get(doc, key, true);
+                });
             const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
             CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.());
@@ -107,8 +118,9 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
         return true;
     }
 
-    public AddDocTab = (doc: Doc, location: OpenWhere, layoutTemplate?: Doc | string) =>
-        this.SetLightboxDoc(
+    public AddDocTab = (docs: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => {
+        const doc = (docs instanceof Doc ? [docs] : docs).lastElement();
+        return this.SetLightboxDoc(
             doc,
             undefined,
             [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...this._future].sort(
@@ -116,6 +128,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
             ),
             layoutTemplate
         );
+    };
     @action
     next = () => {
         const lightDoc = this._doc;
@@ -180,8 +193,12 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
             this.SetLightboxDoc(undefined);
         }
     };
-    toggleFitWidth = () => this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth);
-    togglePen = () => (Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen);
+    toggleFitWidth = () => {
+        this._doc && (this._doc._layout_fitWidth = !this._doc._layout_fitWidth);
+    };
+    togglePen = () => {
+        Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
+    };
     toggleExplore = () => SnappingManager.SetExploreMode(!SnappingManager.ExploreMode);
 
     lightboxDoc = () => this._doc;
@@ -191,33 +208,31 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
     lightboxDocTemplate = () => this._layoutTemplate;
     future = () => this._future;
 
-    renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => {
-        return (
+    renderNavBtn = (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => (
+        <div
+            className="lightboxView-navBtn-frame"
+            style={{
+                display: display ? '' : 'none',
+                left,
+                width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
+                bottom,
+            }}>
             <div
-                className="lightboxView-navBtn-frame"
-                style={{
-                    display: display ? '' : 'none',
-                    left,
-                    width: bottom !== undefined ? undefined : Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]),
-                    bottom,
+                className="lightboxView-navBtn"
+                title={color}
+                style={{ top, color: SettingsManager.userColor, background: undefined }}
+                onClick={e => {
+                    e.stopPropagation();
+                    click();
                 }}>
-                <div
-                    className="lightboxView-navBtn"
-                    title={color}
-                    style={{ top, color: SettingsManager.userColor, background: undefined }}
-                    onClick={e => {
-                        e.stopPropagation();
-                        click();
-                    }}>
-                    <div style={{ height: 10 }}>{color}</div>
-                    <FontAwesomeIcon icon={icon} size="3x" />
-                </div>
+                <div style={{ height: 10 }}>{color}</div>
+                <FontAwesomeIcon icon={icon} size="3x" />
             </div>
-        );
-    };
+        </div>
+    );
     render() {
-        let downx = 0,
-            downy = 0;
+        let downx = 0;
+        let downy = 0;
         const toggleBtn = (classname: string, tooltip: string, toggleBackground: any, icon: IconProp, icon2: IconProp | string, onClick: () => void) => (
             <div className={classname}>
                 <Toggle
@@ -253,10 +268,12 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                         clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
                         background: SettingsManager.userBackgroundColor,
                     }}>
-                    <GestureOverlay isActive={true}>
+                    <GestureOverlay isActive>
                         <DocumentView
                             key={this._doc.title + this._doc[Id]} // this makes a new DocumentView when the document changes which makes link following work, otherwise no DocView is registered for the new Doc
-                            ref={action((r: DocumentView | null) => (this._docView = r !== null ? r : undefined))}
+                            ref={action((r: DocumentView | null) => {
+                                this._docView = r !== null ? r : undefined;
+                            })}
                             Document={this._doc}
                             PanelWidth={this.lightboxWidth}
                             PanelHeight={this.lightboxHeight}
@@ -266,7 +283,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
                             styleProvider={DefaultStyleProvider}
                             ScreenToLocalTransform={this.lightboxScreenToLocal}
                             renderDepth={0}
-                            suppressSetHeight={this._doc._layout_fitWidth ? true : false}
+                            suppressSetHeight={!!this._doc._layout_fitWidth}
                             containerViewPath={returnEmptyDoclist}
                             childFilters={returnEmptyFilter}
                             childFiltersByRanges={returnEmptyFilter}
@@ -303,6 +320,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
 }
 interface LightboxTourBtnProps {
     navBtn: (left: Opt<string | number>, bottom: Opt<number>, top: number, icon: IconProp, display: any, click: () => void, color?: string) => JSX.Element;
+    // eslint-disable-next-line react/no-unused-prop-types
     future: () => Opt<Doc[]>;
     stepInto: () => void;
     lightboxDoc: () => Opt<Doc>;
-- 
cgit v1.2.3-70-g09d2