column drag in progress

1 files changed, 13 insertions, 8 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 42626697a..e648356f4 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -26,8 +26,9 @@ export interface SchemaColumnHeaderProps {
     setSort: (field: string, desc: boolean) => void;
     removeColumn: (index: number) => void;
     resizeColumn: (e: any, index: number, left: boolean) => void;
-    // dragColumn: (e: any, index: number) => boolean;
+    dragColumn: (e: any, index: number) => boolean;
     openContextMenu: (x: number, y: number, index: number) => void;
+    setColRef: (index: number, ref: HTMLDivElement) => void;
 }
 
 @observer
@@ -47,16 +48,20 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
         }
     };
 
-    // @action
-    // onPointerDown = (e: React.PointerEvent) => {
-    //     e.stopPropagation();
-
-    //     setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction);
-    // };
+    @action
+    onPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction);
+    };
 
     render() {
         return (
-            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
+            <div
+                className="schema-column-header"
+                style={{ width: this.props.columnWidths[this.props.columnIndex] }}
+                onPointerDown={this.onPointerDown}
+                ref={(col: HTMLDivElement | null) => {
+                    col && this.props.setColRef(this.props.columnIndex, col);
+                }}>
                 <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
                 <div className="schema-column-title">{this.fieldKey}</div>