Merge branch 'master' of https://github.com/brown-dash/Dash-Web into nathan-starter

1 files changed, 20 insertions, 19 deletions

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 3fe3d5343..bda8e91ac 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -6,9 +6,8 @@ import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types
 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';
-import { CollectionSubView } from '../CollectionSubView';
+import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
 import './CollectionMultirowView.scss';
 import HeightLabel from './MultirowHeightLabel';
 import ResizeBar from './MultirowResizer';
@@ -33,7 +32,7 @@ const resizerHeight = 8;
 
 @observer
 export class CollectionMultirowView extends CollectionSubView() {
-    constructor(props: any) {
+    constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
     }
@@ -193,15 +192,14 @@ export class CollectionMultirowView extends CollectionSubView() {
         return Transform.Identity(); // type coersion, this case should never be hit
     };
 
-    @undoBatch
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         let dropInd = -1;
-        if (de.complete.docDragData && this._mainCont) {
+        if (de.complete.docDragData && this._contRef.current) {
             let curInd = -1;
             de.complete.docDragData?.droppedDocuments.forEach(d => {
                 curInd = this.childDocs.indexOf(d);
             });
-            Array.from(this._mainCont.children).forEach((child, index) => {
+            Array.from(this._contRef.current.children).forEach((child, index) => {
                 const brect = child.getBoundingClientRect();
                 if (brect.y < de.y && brect.y + brect.height > de.y) {
                     if (curInd !== -1 && curInd === Math.floor(index / 2)) {
@@ -284,7 +282,7 @@ export class CollectionMultirowView extends CollectionSubView() {
                 whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged}
                 addDocTab={this._props.addDocTab}
                 pinToPres={this._props.pinToPres}
-                dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as any} // 'y', 'x', 'xy'
+                dontCenter={StrCast(this.layoutDoc.layout_dontCenter) as 'y' | 'x' | 'xy'}
             />
         );
     };
@@ -318,20 +316,23 @@ export class CollectionMultirowView extends CollectionSubView() {
         return collector;
     }
 
+    _contRef = React.createRef<HTMLDivElement>();
     render() {
         return (
-            <div
-                className="collectionMultirowView_contents"
-                style={{
-                    width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
-                    height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
-                    marginLeft: NumCast(this.Document._xMargin),
-                    marginRight: NumCast(this.Document._xMargin),
-                    marginTop: NumCast(this.Document._yMargin),
-                    marginBottom: NumCast(this.Document._yMargin),
-                }}
-                ref={this.createDashEventsTarget}>
-                {this.contents}
+            <div className="collectionMultirowView_drop" ref={this.createDashEventsTarget}>
+                <div
+                    ref={this._contRef}
+                    className="collectionMultirowView_contents"
+                    style={{
+                        width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
+                        height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
+                        marginLeft: NumCast(this.Document._xMargin),
+                        marginRight: NumCast(this.Document._xMargin),
+                        marginTop: NumCast(this.Document._yMargin),
+                        marginBottom: NumCast(this.Document._yMargin),
+                    }}>
+                    {this.contents}
+                </div>
             </div>
         );
     }