Merge branch 'restoringEslint' into alyssa-starter

1 files changed, 70 insertions, 41 deletions

diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 6a3cb759e..e2ad5b31d 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -1,7 +1,11 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* 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, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { DivHeight, DivWidth, returnEmptyString, setupMoveUpEvents } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { RichTextField } from '../../../fields/RichTextField';
 import { PastelSchemaPalette, SchemaHeaderField } from '../../../fields/SchemaHeaderField';
@@ -9,10 +13,13 @@ import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, NumCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
-import { DivHeight, DivWidth, emptyFunction, returnEmptyString, setupMoveUpEvents } from '../../../Utils';
-import { Docs, DocUtils } from '../../documents/Documents';
+import { emptyFunction } from '../../../Utils';
+import { DocumentFromField } from '../../documents/DocFromField';
+import { Docs } from '../../documents/Documents';
 import { DocumentType } from '../../documents/DocumentTypes';
+import { DocUtils } from '../../documents/DocUtils';
 import { DragManager } from '../../util/DragManager';
+import { dropActionType } from '../../util/DropActionTypes';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
@@ -66,11 +73,26 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
 
     _ele: HTMLElement | null = null;
 
+    protected onInternalPreDrop = (e: Event, de: DragManager.DropEvent, targetDropAction: dropActionType) => {
+        const dragData = de.complete.docDragData;
+        if (dragData) {
+            const sourceDragAction = dragData.dropAction;
+            const sameCollection = !dragData.draggedDocuments.some(d => !this._props.docList.includes(d));
+            dragData.dropAction = !sameCollection // if doc from another tree
+                ? sourceDragAction || targetDropAction // then use the source's dragAction otherwise the target's
+                : sourceDragAction === dropActionType.inPlace // if source drag is inPlace
+                  ? sourceDragAction // keep the doc in place
+                  : dropActionType.same; // otherwise use same tree semantics to move within tree
+
+            e.stopPropagation();
+        }
+    };
+
     // This is likely similar to what we will be doing. Why do we need to make these refs?
     // is that the only way to have drop targets?
     createColumnDropRef = (ele: HTMLDivElement | null) => {
         this.dropDisposer?.();
-        if (ele) this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document);
+        if (ele) this.dropDisposer = DragManager.MakeDropTarget(ele, this.columnDrop.bind(this), this._props.Document, this.onInternalPreDrop.bind(this));
         else if (this._ele) this.props.refList.splice(this.props.refList.indexOf(this._ele), 1);
         this._ele = ele;
     };
@@ -80,7 +102,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         this._ele && this.props.refList.push(this._ele);
         this._disposers.collapser = reaction(
             () => this._props.headingObject?.collapsed,
-            collapsed => (this.collapsed = collapsed !== undefined ? BoolCast(collapsed) : false),
+            collapsed => { this.collapsed = collapsed !== undefined ? BoolCast(collapsed) : false; }, // prettier-ignore
             { fireImmediately: true }
         );
     }
@@ -90,7 +112,6 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         this._ele = null;
     }
 
-    //TODO: what is scripting? I found it in SetInPlace def but don't know what that is
     @undoBatch
     columnDrop = action((e: Event, de: DragManager.DropEvent) => {
         const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) };
@@ -106,13 +127,13 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
     };
 
     @action
-    headingChanged = (value: string, shiftDown?: boolean) => {
+    headingChanged = (value: string /* , shiftDown?: boolean */) => {
         const castedValue = this.getValue(value);
         if (castedValue) {
             if (this._props.colHeaderData?.map(i => i.heading).indexOf(castedValue.toString()) !== -1) {
                 return false;
             }
-            this._props.docList.forEach(d => (d[this._props.pivotField] = castedValue));
+            this._props.pivotField && this._props.docList.forEach(d => { d[this._props.pivotField] = castedValue; }) // prettier-ignore
             if (this._props.headingObject) {
                 this._props.headingObject.setHeading(castedValue.toString());
                 this._heading = this._props.headingObject.heading;
@@ -128,27 +149,30 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         this._color = color;
     };
 
-    @action pointerEntered = () => SnappingManager.IsDragging && (this._background = '#b4b4b4');
-    @action pointerLeave = () => (this._background = 'inherit');
-    @undoBatch typedNote = (char: string) => this.addNewTextDoc('-typed text-', false, true);
+    @action pointerEntered = () => { SnappingManager.IsDragging && (this._background = '#b4b4b4'); } // prettier-ignore
+    @action pointerLeave = () => { this._background = 'inherit'}; // prettier-ignore
+    @undoBatch typedNote = () => this.addNewTextDoc('-typed text-', false, true);
 
     @action
     addNewTextDoc = (value: string, shiftDown?: boolean, forceEmptyNote?: boolean) => {
         if (!value && !forceEmptyNote) return false;
         const key = this._props.pivotField;
         const newDoc = Docs.Create.TextDocument(value, { _height: 18, _width: 200, _layout_fitWidth: true, title: value, _layout_autoHeight: true });
-        newDoc[key] = this.getValue(this._props.heading);
-        const maxHeading = this._props.docList.reduce((maxHeading, doc) => (NumCast(doc.heading) > maxHeading ? NumCast(doc.heading) : maxHeading), 0);
+        key && (newDoc[key] = this.getValue(this._props.heading));
+        const maxHeading = this._props.docList.reduce((prevHeading, doc) => (NumCast(doc.heading) > prevHeading ? NumCast(doc.heading) : prevHeading), 0);
         const heading = maxHeading === 0 || this._props.docList.length === 0 ? 1 : maxHeading === 1 ? 2 : 3;
         newDoc.heading = heading;
-        FormattedTextBox.SetSelectOnLoad(newDoc);
+        Doc.SetSelectOnLoad(newDoc);
         FormattedTextBox.SelectOnLoadChar = forceEmptyNote ? '' : ' ';
         return this._props.addDocument?.(newDoc) || false;
     };
 
     @action
     deleteColumn = () => {
-        this._props.docList.forEach(d => (d[this._props.pivotField] = undefined));
+        this._props.pivotField &&
+            this._props.docList.forEach(d => {
+                d[this._props.pivotField] = undefined;
+            });
         if (this._props.colHeaderData && this._props.headingObject) {
             const index = this._props.colHeaderData.indexOf(this._props.headingObject);
             this._props.colHeaderData.splice(index, 1);
@@ -163,8 +187,8 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
 
     headerDown = (e: React.PointerEvent<HTMLDivElement>) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
 
-    //TODO: I think this is where I'm supposed to edit stuff
-    startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+    // TODO: I think this is where I'm supposed to edit stuff
+    startDrag = (e: PointerEvent) => {
         // is MakeEmbedding a way to make a copy of a doc without rendering it?
         const embedding = Doc.MakeEmbedding(this._props.Document);
         embedding._width = this._props.columnWidth / (this._props.colHeaderData?.length || 1);
@@ -195,23 +219,21 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         );
     };
 
-    renderMenu = () => {
-        return (
-            <div className="collectionStackingView-optionPicker">
-                <div className="optionOptions">
-                    <div className={'optionPicker' + (true ? ' active' : '')} onClick={action(() => {})}>
-                        Add options here
-                    </div>
-                </div>
+    renderMenu = () => (
+        <div className="collectionStackingView-optionPicker">
+            <div className="optionOptions">
+                <div className="optionPicker active">Add options here</div>
             </div>
-        );
-    };
+        </div>
+    );
 
     @observable private collapsed: boolean = false;
 
-    private toggleVisibility = action(() => (this.collapsed = !this.collapsed));
+    private toggleVisibility = action(() => {
+        this.collapsed = !this.collapsed;
+    });
 
-    menuCallback = (x: number, y: number) => {
+    menuCallback = () => {
         ContextMenu.Instance.clearItems();
         const layoutItems: ContextMenuProps[] = [];
         const docItems: ContextMenuProps[] = [];
@@ -220,7 +242,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         const height = this._ele ? DivHeight(this._ele) : 0;
         DocUtils.addDocumentCreatorMenuItems(
             doc => {
-                FormattedTextBox.SetSelectOnLoad(doc);
+                Doc.SetSelectOnLoad(doc);
                 return this._props.addDocument?.(doc);
             },
             this._props.addDocument,
@@ -235,13 +257,14 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                 docItems.push({
                     description: ':' + fieldKey,
                     event: () => {
-                        const created = DocUtils.DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this._props.Document));
+                        const created = DocumentFromField(dataDoc, fieldKey, Doc.GetProto(this._props.Document));
                         if (created) {
                             if (this._props.Document.isTemplateDoc) {
                                 Doc.MakeMetadataFieldTemplate(created, this._props.Document);
                             }
                             return this._props.addDocument?.(created);
                         }
+                        return false;
                     },
                     icon: 'compress-arrows-alt',
                 })
@@ -261,6 +284,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                             }
                             return this._props.addDocument?.(created) || false;
                         }
+                        return false;
                     },
                     icon: 'compress-arrows-alt',
                 })
@@ -292,7 +316,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
         const columnYMargin = this._props.headingObject ? 0 : this._props.yMargin;
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         const noValueHeader = `NO ${key.toUpperCase()} VALUE`;
-        const evContents = heading ? heading : this._props?.type === 'number' ? '0' : noValueHeader;
+        const evContents = heading || (this._props?.type === 'number' ? '0' : noValueHeader);
         const headingView = this._props.headingObject ? (
             <div
                 key={heading}
@@ -309,14 +333,19 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                     onPointerDown={this.headerDown}
                     title={evContents === noValueHeader ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ''}
                     style={{ background: evContents !== noValueHeader ? this._color : 'inherit' }}>
-                    <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
+                    <EditableView GetValue={() => evContents} SetValue={this.headingChanged} contents={evContents} oneLine />
                     <div className="collectionStackingView-sectionColor" style={{ display: evContents === noValueHeader ? 'none' : undefined }}>
-                        <button className="collectionStackingView-sectionColorButton" onClick={action(e => (this._paletteOn = !this._paletteOn))}>
+                        <button
+                            type="button"
+                            className="collectionStackingView-sectionColorButton"
+                            onClick={action(() => {
+                                this._paletteOn = !this._paletteOn;
+                            })}>
                             <FontAwesomeIcon icon="palette" size="lg" />
                         </button>
                         {this._paletteOn ? this.renderColorPicker() : null}
                     </div>
-                    <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
+                    <button type="button" className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
                         <FontAwesomeIcon icon="trash" size="lg" />
                     </button>
                     {/* {evContents === noValueHeader ? null : (
@@ -337,7 +366,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
             </div>
         ) : null;
         const templatecols = `${this._props.columnWidth / this._props.numGroupColumns}px `;
-        const type = this._props.Document.type;
+        const { type } = this._props.Document;
         return (
             <>
                 {this._props.Document._columnsHideIfEmpty ? null : headingView}
@@ -345,11 +374,11 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                     <div>
                         <div
                             key={`${heading}-stack`}
-                            className={`collectionStackingView-masonrySingle`}
+                            className="collectionStackingView-masonrySingle"
                             style={{
                                 padding: `${columnYMargin}px ${0}px ${this._props.yMargin}px ${0}px`,
                                 margin: 'auto',
-                                width: 'max-content', //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
+                                width: 'max-content', // singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`,
                                 height: 'max-content',
                                 position: 'relative',
                                 gridGap: this._props.gridGap,
@@ -361,10 +390,10 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                         {!this._props.chromeHidden && type !== DocumentType.PRES ? (
                             // TODO: this is the "new" button: see what you can work with here
                             // change cursor to pointer for this, and update dragging cursor
-                            //TODO: there is a bug that occurs when adding a freeform document and trying to move it around
-                            //TODO: would be great if there was additional space beyond the frame, so that you can actually see your
+                            //  TODO: there is a bug that occurs when adding a freeform document and trying to move it around
+                            //  TODO: would be great if there was additional space beyond the frame, so that you can actually see your
                             // bottom note
-                            //TODO: ok, so we are using a single column, and this is it!
+                            // TODO: ok, so we are using a single column, and this is it!
                             <div
                                 key={`${heading}-add-document`}
                                 onKeyDown={e => e.stopPropagation()}
@@ -375,7 +404,7 @@ export class CollectionStackingViewFieldColumn extends ObservableReactComponent<
                                     SetValue={this.addNewTextDoc}
                                     textCallback={this.typedNote}
                                     placeholder={"Type ':' for commands"}
-                                    contents={<FontAwesomeIcon icon={'plus'} />}
+                                    contents={<FontAwesomeIcon icon="plus" />}
                                     menuCallback={this.menuCallback}
                                 />
                             </div>