columheader editing working!! (kinda hacky using readonly input revisit)

1 files changed, 15 insertions, 7 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 58ac4e45d..f404eb444 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -21,6 +21,7 @@ import { CollectionSchemaView } from './CollectionSchemaView';
 import { SnappingManager } from '../../../util/SnappingManager';
 import { undoable } from '../../../util/UndoManager';
 import { FInfo } from '../../../documents/Documents';
+import { ColumnType } from '../../../../fields/SchemaHeaderField';
 
 export interface SchemaColumnHeaderProps {
     Document: Doc;
@@ -38,7 +39,7 @@ export interface SchemaColumnHeaderProps {
     rowHeight: () => number;
     resizeColumn: (e: any, index: number) => void;
     dragColumn: (e: any, index: number) => boolean;
-    openContextMenu: (x: number, y: number, index: number) => void;
+    openContextMenu: (x: number, y: number, index: number, fieldType: ColumnType) => void;
     setColRef: (index: number, ref: HTMLDivElement) => void;
     rootSelected?: () => boolean;
     columnWidth: () => number;
@@ -49,7 +50,8 @@ export interface SchemaColumnHeaderProps {
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
-    @observable _editing: boolean = false;
+    @observable _editing: boolean | undefined = false;
+    @observable _fieldType: ColumnType = ColumnType.String;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
@@ -125,9 +127,9 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 allowCRs={false}
                 contents={undefined}
                 fieldContents={fieldProps}
-                editing={undefined}
-                isColHeader={true} // tells the EditableView to display the fieldKey itself, and not its value
-                GetValue={() => {console.log(this.fieldKey); return this.fieldKey}}
+                editing={undefined}  
+                showKeyNotVal={true} // tells the EditableView to display the fieldKey itself, and not its value
+                GetValue={() => this.fieldKey}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
                     if (shiftKey && enterKey) { // if shift & enter, set value of each cell in column
                         this.setColumnValues(value, value);
@@ -142,7 +144,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     }
 
     // staticView = () => {
-    //     return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
+    //      return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
     // }
 
     render() {
@@ -153,6 +155,12 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     width: this._props.columnWidths[this._props.columnIndex],
                 }}
                 onPointerDown={this.setupDrag}
+                // onPointerEnter={() => {
+                //     console.log(true);
+                //     this._editing = true}}
+                // onPointerLeave={() => {
+                //     console.log(false);
+                //     this._editing = false}}
                 ref={col => {
                     if (col) {
                         this._props.setColRef(this._props.columnIndex, col);
@@ -163,7 +171,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                 <div>{this.editableView}</div>
 
                 <div className="schema-header-menu">
-                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
+                    <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex, this._fieldType)}>
                         <FontAwesomeIcon icon="ellipsis-h" />
                     </div>
                     <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>