c

1 files changed, 35 insertions, 31 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 6e2f85cc0..4f9d53d18 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -32,6 +32,7 @@ export interface SchemaColumnHeaderProps {
     sortField: string;
     sortDesc: boolean;
     schemaView: CollectionSchemaView;
+    keysDropdown: React.JSX.Element;
     //cleanupField: (s: string) => string;
     isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined;
     setSort: (field: string | undefined, desc?: boolean) => void;
@@ -51,17 +52,12 @@ export interface SchemaColumnHeaderProps {
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _altTitle: string | undefined = undefined;
+    @observable _displayKeysDropdown: boolean = false;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
     }
-
-    isDefaultTitle = (key: string) => {
-        const defaultPattern = /EmptyColumnKey/;
-        let isDefault: boolean = (defaultPattern.exec(key) != null);
-        return isDefault;
-    }
-
+    
     getFinfo = computedFn((fieldKey: string) => this._props.schemaView?.fieldInfos.get(fieldKey));
     setColumnValues = (field: string, defaultValue: string) => {this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);}
     @action updateAlt = (newAlt: string) => {this._altTitle = newAlt;}
@@ -79,6 +75,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         }
     };
 
+    openKeyDropdown = () => {
+        this._props.schemaView.openColumnMenu(this._props.columnIndex, false)
+        this._displayKeysDropdown = true;
+    }
+
     @action
     setupDrag = (e: React.PointerEvent) => {
         this._props.isContentActive(true) && setupMoveUpEvents(this, e, moveEv => this._props.dragColumn(moveEv, this._props.columnIndex), emptyFunction, emptyFunction);
@@ -121,7 +122,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
     @computed get editableView() {
         const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
 
-        return <div className='schema-column-edit-wrapper' 
+        return <div className='schema-column-edit-wrapper' onPointerUp={() => this._props.schemaView.openColumnMenu(this._props.columnIndex, false)}
         style={{
             color,
             width: '100%',
@@ -148,6 +149,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                         this._props.finishEdit?.();
                         return true;
                     } else if (enterKey) this.updateAlt(value);
+                    
                     this._props.finishEdit?.(); 
                     return true;
                 }, 'edit column header')}
@@ -155,36 +157,38 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
             </div>
     }
 
-    // staticView = () => {
-    //      return <div className="schema-column-title" onPointerDown={e => {this._editing = true; console.log(this._editing)}}>{this.fieldKey}</div>
-    // }
+    isDefaultTitle = (key: string) => {
+        const defaultPattern = /EmptyColumnKey/;
+        let isDefault: boolean = (defaultPattern.exec(key) != null);
+        return isDefault;
+    }
 
     render() {
         return (
-            <div
-                className="schema-column-header"
-                style={{
-                    width: this._props.columnWidths[this._props.columnIndex],
-                }}
-                onPointerDown={this.setupDrag}
-                ref={col => {
-                    if (col) {
-                        this._props.setColRef(this._props.columnIndex, col);
-                    }
-                }}>
-                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
+                <div
+                    className="schema-column-header"
+                    style={{
+                        width: this._props.columnWidths[this._props.columnIndex],
+                    }}
+                    onPointerDown={this.setupDrag}
+                    ref={col => {
+                        if (col) {
+                            this._props.setColRef(this._props.columnIndex, col);
+                        }
+                    }}>
+                    <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex)} />
 
-                <div>{this.editableView}</div>
+                    <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)}>
-                        <FontAwesomeIcon icon="ellipsis-h" />
-                    </div>
-                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
-                        <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                    <div className="schema-header-menu">
+                        <div className="schema-header-button" onPointerDown={e => this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)}>
+                            <FontAwesomeIcon icon="ellipsis-h" />
+                        </div>
+                        <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this._props.sortField === this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
+                            <FontAwesomeIcon icon="caret-right" style={this._props.sortField === this.fieldKey ? { transform: `rotate(${this._props.sortDesc ? '270deg' : '90deg'})` } : {}} />
+                        </div>
                     </div>
                 </div>
-            </div>
         );
     }
 }