completing eslint pass

6 files changed, 62 insertions, 74 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 125dd2781..b8509a005 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.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 { Tooltip } from '@mui/material';
 import { Button, IconButton } from 'browndash-components';
@@ -7,7 +9,7 @@ import * as React from 'react';
 import { FaChevronRight } from 'react-icons/fa';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { DragManager, dropActionType } from '../../../util/DragManager';
+import { DragManager } from '../../../util/DragManager';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch, undoable } from '../../../util/UndoManager';
@@ -16,6 +18,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionMulticolumnView.scss';
 import ResizeBar from './MulticolumnResizer';
 import WidthLabel from './MulticolumnWidthLabel';
+import { dropActionType } from '../../../util/DropActionTypes';
 
 interface WidthSpecifier {
     magnitude: number;
@@ -80,7 +83,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const widthSpecifiers: WidthSpecifier[] = [];
-        this.childLayouts.map(layout => {
+        this.childLayouts.forEach(layout => {
             const unit = StrCast(layout._dimUnit, '*');
             const magnitude = NumCast(layout._dimMagnitude, this.minimumDim);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
@@ -140,6 +143,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
             return this._props.PanelWidth() - (this.totalFixedAllocation + resizerWidth * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._xMargin);
         }
+        return undefined;
     }
 
     /**
@@ -159,6 +163,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         if (this.resolvedLayoutInformation && this.totalRatioAllocation !== undefined) {
             return this.totalRatioAllocation / this.resolvedLayoutInformation.starSum;
         }
+        return undefined;
     }
 
     /**
@@ -175,7 +180,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      * or the ratio width evaluated to a pixel value
      */
     private lookupPixels = (layout: Doc): number => {
-        const columnUnitLength = this.columnUnitLength;
+        const { columnUnitLength } = this;
         if (columnUnitLength === undefined) {
             return 0; // we're still waiting on promises to resolve
         }
@@ -193,19 +198,19 @@ export class CollectionMulticolumnView extends CollectionSubView() {
      * documents before the target.
      */
     private lookupIndividualTransform = (layout: Doc) => {
-        const columnUnitLength = this.columnUnitLength;
+        const { columnUnitLength } = this;
         if (columnUnitLength === undefined) {
             return Transform.Identity(); // we're still waiting on promises to resolve
         }
         let offset = 0;
-        var xf = Transform.Identity();
-        this.childLayouts.map(candidate => {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
-                return (xf = this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0));
+                return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1));
             }
             offset += this.lookupPixels(candidate) + resizerWidth;
-        });
-        return xf;
+        }
+        return Transform.Identity();
     };
 
     @undoBatch
@@ -213,7 +218,9 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         let dropInd = -1;
         if (de.complete.docDragData && this._mainCont) {
             let curInd = -1;
-            de.complete.docDragData?.droppedDocuments.forEach(d => (curInd = this.childDocs.indexOf(d)));
+            de.complete.docDragData?.droppedDocuments.forEach(d => {
+                curInd = this.childDocs.indexOf(d);
+            });
             Array.from(this._mainCont.children).forEach((child, index) => {
                 const brect = child.getBoundingClientRect();
                 if (brect.x < de.x && brect.x + brect.width > de.x) {
@@ -265,7 +272,6 @@ export class CollectionMulticolumnView extends CollectionSubView() {
             this.lookupIndividualTransform(childLayout)
                 .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin))
                 .scale(this._props.NativeDimScaling?.() || 1);
-        const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(childLayout.freeform_fitContentsToBox);
         return (
             <DocumentView
                 Document={childLayout}
@@ -281,11 +287,11 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 dragAction={StrCast(this.Document.childDragAction, this._props.childDragAction) as dropActionType}
                 onClickScript={this.onChildClickHandler}
                 onDoubleClickScript={this.onChildDoubleClickHandler}
-                suppressSetHeight={true}
+                suppressSetHeight
                 ScreenToLocalTransform={dxf}
                 isContentActive={this.isChildContentActive}
                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                hideResizeHandles={childLayout.layout_fitWidth || this._props.childHideResizeHandles ? true : false}
+                hideResizeHandles={!!(childLayout.layout_fitWidth || this._props.childHideResizeHandles)}
                 hideDecorationTitle={this._props.childHideDecorationTitle}
                 fitContentsToBox={this._props.fitContentsToBox}
                 focus={this._props.focus}
@@ -312,17 +318,19 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         const collector: JSX.Element[] = [];
         this.childLayouts.forEach((layout, i) => {
             collector.push(
+                // eslint-disable-next-line react/no-array-index-key
                 <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}>
                     <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
                         {this.getDisplayDoc(layout)}
                         {this.layoutDoc._chromeHidden ? null : (
-                            <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(e => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} />
+                            <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(() => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} />
                         )}
                         <WidthLabel layout={layout} collectionDoc={this.Document} />
                     </div>
                 </Tooltip>,
                 <ResizeBar
                     width={resizerWidth}
+                    // eslint-disable-next-line react/no-array-index-key
                     key={'resizer' + i}
                     styleProvider={this._props.styleProvider}
                     isContentActive={this._props.isContentActive}
@@ -353,14 +361,29 @@ export class CollectionMulticolumnView extends CollectionSubView() {
                 {this.contents}
                 {!this._startIndex ? null : (
                     <Tooltip title="scroll back">
-                        <div style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
-                            <Button tooltip="Scroll back" icon={<FontAwesomeIcon icon="chevron-left" size="lg" />} onClick={action(e => (this._startIndex = Math.max(0, this._startIndex - this.maxShown)))} color={SettingsManager.userColor} />
+                        <div
+                            style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }}
+                            onClick={action(() => {
+                                this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
+                            })}>
+                            <Button
+                                tooltip="Scroll back"
+                                icon={<FontAwesomeIcon icon="chevron-left" size="lg" />}
+                                onClick={action(() => {
+                                    this._startIndex = Math.max(0, this._startIndex - this.maxShown);
+                                })}
+                                color={SettingsManager.userColor}
+                            />
                         </div>
                     </Tooltip>
                 )}
                 {this._startIndex > this.childLayoutPairs.length - 1 || !this.maxShown ? null : (
                     <Tooltip title="scroll forward">
-                        <div style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }} onClick={action(e => (this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown)))}>
+                        <div
+                            style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }}
+                            onClick={action(() => {
+                                this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
+                            })}>
                             <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} />
                         </div>
                     </Tooltip>
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 17bf3e50c..3fe3d5343 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -3,7 +3,8 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { DragManager, dropActionType } from '../../../util/DragManager';
+import { DragManager } from '../../../util/DragManager';
+import { dropActionType } from '../../../util/DropActionTypes';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { DocumentView } from '../../nodes/DocumentView';
@@ -11,6 +12,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionMultirowView.scss';
 import HeightLabel from './MultirowHeightLabel';
 import ResizeBar from './MultirowResizer';
+
 interface HeightSpecifier {
     magnitude: number;
     unit: string;
@@ -63,7 +65,7 @@ export class CollectionMultirowView extends CollectionSubView() {
     private get resolvedLayoutInformation(): LayoutData {
         let starSum = 0;
         const heightSpecifiers: HeightSpecifier[] = [];
-        this.childLayoutPairs.map(pair => {
+        this.childLayoutPairs.forEach(pair => {
             const unit = StrCast(pair.layout._dimUnit, '*');
             const magnitude = NumCast(pair.layout._dimMagnitude, this.minimumDim);
             if (unit && magnitude && magnitude > 0 && resolvedUnits.includes(unit)) {
@@ -123,6 +125,7 @@ export class CollectionMultirowView extends CollectionSubView() {
         if (layoutInfoLen > 0 && this.totalFixedAllocation !== undefined) {
             return this._props.PanelHeight() - (this.totalFixedAllocation + resizerHeight * (layoutInfoLen - 1)) - 2 * NumCast(this.Document._yMargin);
         }
+        return undefined;
     }
 
     /**
@@ -142,6 +145,7 @@ export class CollectionMultirowView extends CollectionSubView() {
         if (this.resolvedLayoutInformation && this.totalRatioAllocation !== undefined) {
             return this.totalRatioAllocation / this.resolvedLayoutInformation.starSum;
         }
+        return undefined;
     }
 
     /**
@@ -158,13 +162,12 @@ export class CollectionMultirowView extends CollectionSubView() {
      * or the ratio width evaluated to a pixel value
      */
     private lookupPixels = (layout: Doc): number => {
-        const rowUnitLength = this.rowUnitLength;
-        if (rowUnitLength === undefined) {
+        if (this.rowUnitLength === undefined) {
             return 0; // we're still waiting on promises to resolve
         }
         let height = NumCast(layout._dimMagnitude, this.minimumDim);
         if (StrCast(layout._dimUnit, '*') === DimUnit.Ratio) {
-            height *= rowUnitLength;
+            height *= this.rowUnitLength;
         }
         return height;
     };
@@ -176,11 +179,11 @@ export class CollectionMultirowView extends CollectionSubView() {
      * documents before the target.
      */
     private lookupIndividualTransform = (layout: Doc) => {
-        const rowUnitLength = this.rowUnitLength;
-        if (rowUnitLength === undefined) {
+        if (this.rowUnitLength === undefined) {
             return Transform.Identity(); // we're still waiting on promises to resolve
         }
         let offset = 0;
+        // eslint-disable-next-line no-restricted-syntax
         for (const { layout: candidate } of this.childLayoutPairs) {
             if (candidate === layout) {
                 return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1));
@@ -195,7 +198,9 @@ export class CollectionMultirowView extends CollectionSubView() {
         let dropInd = -1;
         if (de.complete.docDragData && this._mainCont) {
             let curInd = -1;
-            de.complete.docDragData?.droppedDocuments.forEach(d => (curInd = this.childDocs.indexOf(d)));
+            de.complete.docDragData?.droppedDocuments.forEach(d => {
+                curInd = this.childDocs.indexOf(d);
+            });
             Array.from(this._mainCont.children).forEach((child, index) => {
                 const brect = child.getBoundingClientRect();
                 if (brect.y < de.y && brect.y + brect.height > de.y) {
@@ -247,7 +252,6 @@ export class CollectionMultirowView extends CollectionSubView() {
             this.lookupIndividualTransform(layout)
                 .translate(-NumCast(this.layoutDoc._xMargin), -NumCast(this.layoutDoc._yMargin))
                 .scale(this._props.NativeDimScaling?.() || 1);
-        const shouldNotScale = () => this._props.fitContentsToBox?.() || BoolCast(layout.freeform_fitContentsToBox);
         return (
             <DocumentView
                 Document={layout}
@@ -266,7 +270,7 @@ export class CollectionMultirowView extends CollectionSubView() {
                 ScreenToLocalTransform={dxf}
                 isContentActive={this.isChildContentActive}
                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                hideResizeHandles={layout.layout_fitWidth || this._props.childHideResizeHandles ? true : false}
+                hideResizeHandles={!!(layout.layout_fitWidth || this._props.childHideResizeHandles)}
                 hideDecorationTitle={this._props.childHideDecorationTitle}
                 fitContentsToBox={this._props.fitContentsToBox}
                 focus={this._props.focus}
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
index d580d9c52..49ba85524 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnResizer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -52,27 +53,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         }
     };
 
-    private get isActivated() {
-        const { toLeft, toRight } = this.props;
-        if (toLeft && toRight) {
-            if (StrCast(toLeft._dimUnit, '*') === DimUnit.Pixel && StrCast(toRight._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        } else if (toLeft) {
-            if (StrCast(toLeft._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        } else if (toRight) {
-            if (StrCast(toRight._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        }
-        return false;
-    }
-
     @action
     private onPointerUp = () => {
         window.removeEventListener('pointermove', this.onPointerMove);
@@ -90,7 +70,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     width: this.props.width,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
                 }}>
-                <div className={'multiColumnResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
+                <div className="multiColumnResizer-hdl" onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
index a9579d931..a7a0b3457 100644
--- a/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MulticolumnWidthLabel.tsx
@@ -19,7 +19,7 @@ export default class WidthLabel extends React.Component<WidthLabelProps> {
         const getUnit = () => StrCast(layout.dimUnit);
         const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(3));
         return (
-            <div className={'label-wrapper'}>
+            <div className="label-wrapper">
                 <EditableView
                     GetValue={getMagnitude}
                     SetValue={value => {
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx
index 878c7ff3c..66215f109 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowHeightLabel.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -20,7 +21,7 @@ export default class HeightLabel extends React.Component<HeightLabelProps> {
         const getUnit = () => StrCast(layout.dimUnit);
         const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(decimals ?? 3));
         return (
-            <div className={'label-wrapper'}>
+            <div className="label-wrapper">
                 <EditableView
                     GetValue={getMagnitude}
                     SetValue={value => {
diff --git a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
index 73d08d5ef..ad77c327d 100644
--- a/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
+++ b/src/client/views/collections/collectionMulticolumn/MultirowResizer.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -33,7 +34,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
     };
 
     private onPointerMove = ({ movementY }: PointerEvent) => {
-        const { toTop: toTop, toBottom: toBottom, columnUnitLength } = this.props;
+        const { toTop, toBottom, columnUnitLength } = this.props;
         const movingDown = movementY > 0;
         const toNarrow = movingDown ? toBottom : toTop;
         const toWiden = movingDown ? toTop : toBottom;
@@ -50,27 +51,6 @@ export default class ResizeBar extends React.Component<ResizerProps> {
         }
     };
 
-    private get isActivated() {
-        const { toTop, toBottom } = this.props;
-        if (toTop && toBottom) {
-            if (StrCast(toTop._dimUnit, '*') === DimUnit.Pixel && StrCast(toBottom._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        } else if (toTop) {
-            if (StrCast(toTop._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        } else if (toBottom) {
-            if (StrCast(toBottom._dimUnit, '*') === DimUnit.Pixel) {
-                return false;
-            }
-            return true;
-        }
-        return false;
-    }
-
     @action
     private onPointerUp = () => {
         window.removeEventListener('pointermove', this.onPointerMove);
@@ -88,7 +68,7 @@ export default class ResizeBar extends React.Component<ResizerProps> {
                     height: this.props.height,
                     backgroundColor: !this.props.isContentActive?.() ? '' : this.props.styleProvider?.(undefined, undefined, StyleProp.WidgetColor),
                 }}>
-                <div className={'multiRowResizer-hdl'} onPointerDown={e => this.registerResizing(e)} />
+                <div className="multiRowResizer-hdl" onPointerDown={e => this.registerResizing(e)} />
             </div>
         );
     }