From 501bf6a5d6c81ea1e58509e51ab8c252eaf178ca Mon Sep 17 00:00:00 2001
From: 0x85FB9C51 <77808164+0x85FB9C51@users.noreply.github.com>
Date: Mon, 28 Jun 2021 16:57:56 -0400
Subject: resolved bugs and removes console.log

---
 .../CollectionSchemaMovableTableHOC.tsx            | 92 +++++++++++-----------
 1 file changed, 48 insertions(+), 44 deletions(-)

(limited to 'src/client/views/collections/CollectionSchemaMovableTableHOC.tsx')

diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 881246bd4..a842d629e 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -143,16 +143,20 @@ export class MovableRow extends React.Component<MovableRowProps> {
     private _header?: React.RefObject<HTMLDivElement> = React.createRef();
     private _rowDropDisposer?: DragManager.DragDropDisposer;
 
+    // Event listeners are only necessary when the user is hovering over the table
+    // Create one when the mouse starts hovering...
     onPointerEnter = (e: React.PointerEvent): void => {
         if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
             this._header!.current!.className = "collectionSchema-row-wrapper";
             document.addEventListener("pointermove", this.onDragMove, true);
         }
     }
+    // ... and delete it when the mouse leaves
     onPointerLeave = (e: React.PointerEvent): void => {
         this._header!.current!.className = "collectionSchema-row-wrapper";
         document.removeEventListener("pointermove", this.onDragMove, true);
     }
+    // The method for the event listener, reorders columns when dragged to their new locations.
     onDragMove = (e: PointerEvent): void => {
         const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
         const rect = this._header!.current!.getBoundingClientRect();
@@ -167,14 +171,14 @@ export class MovableRow extends React.Component<MovableRowProps> {
 
         this._rowDropDisposer?.();
     }
-
+    //
     createRowDropTarget = (ele: HTMLDivElement) => {
         this._rowDropDisposer?.();
         if (ele) {
             this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this));
         }
     }
-
+    // Controls what hppens when a row is dragged and dropped
     rowDrop = (e: Event, de: DragManager.DropEvent) => {
         this.onPointerLeave(e as any);
         const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc));
@@ -200,59 +204,59 @@ export class MovableRow extends React.Component<MovableRowProps> {
         return false;
     }
 
-    onRowContextMenu = (e: React.MouseEvent): void => {
+    onRowContextMenu = (e: React.MouseEvent): void =>
         e.preventDefault();
-        const description = this.props.rowWrapped ? "Unwrap text on row" : "Text wrap row";
-        ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: "file-pdf" });
+    const description = this.props.rowWrapped ? "Unwrap text on row" : "Text wrap row";
+    ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: "file-pdf" });
     }
 
-    @undoBatch
-    @action
-    move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
-        const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
-        return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
-    }
+@undoBatch
+@action
+move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
+    const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
+    return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
+}
 
-    @action
-    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log("yes");
-        if (e.key === "Backspace" || e.key === "Delete") {
-            undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
-        }
+@action
+onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    console.log("yes");
+    if (e.key === "Backspace" || e.key === "Delete") {
+        undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
     }
+}
 
-    render() {
-        const { children = null, rowInfo } = this.props;
+render() {
+    const { children = null, rowInfo } = this.props;
 
-        if (!rowInfo) {
-            return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
-        }
+    if (!rowInfo) {
+        return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
+    }
 
-        const { original } = rowInfo;
-        const doc = FieldValue(Cast(original, Doc));
+    const { original } = rowInfo;
+    const doc = FieldValue(Cast(original, Doc));
 
-        if (!doc) return (null);
+    if (!doc) return (null);
 
-        const reference = React.createRef<HTMLDivElement>();
-        const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
+    const reference = React.createRef<HTMLDivElement>();
+    const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
 
-        let className = "collectionSchema-row";
-        if (this.props.rowFocused) className += " row-focused";
-        if (this.props.rowWrapped) className += " row-wrapped";
+    let className = "collectionSchema-row";
+    if (this.props.rowFocused) className += " row-focused";
+    if (this.props.rowWrapped) className += " row-wrapped";
 
-        return (
-            <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
-                <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown} >
-                        <div className="row-dragger">
-                            <div className="row-option" style={{ left: 5 }} onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
-                            <div className="row-option" style={{ cursor: "grab", left: 25 }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
-                            <div className="row-option" style={{ left: 40 }} onClick={() => this.props.addDocTab(this.props.rowInfo.original, "add:right")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
-                        </div>
-                        {children}
-                    </ReactTableDefaults.TrComponent>
-                </div>
+    return (
+        <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
+            <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
+                <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown} >
+                    <div className="row-dragger">
+                        <div className="row-option" style={{ left: 5 }} onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
+                        <div className="row-option" style={{ cursor: "grab", left: 25 }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
+                        <div className="row-option" style={{ left: 40 }} onClick={() => this.props.addDocTab(this.props.rowInfo.original, "add:right")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
+                    </div>
+                    {children}
+                </ReactTableDefaults.TrComponent>
             </div>
-        );
-    }
+        </div>
+    );
+}
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2