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

1 files changed, 107 insertions, 91 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 207e1deac..9ffdd812f 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -21,7 +20,8 @@ import { undoable } from '../../../util/UndoManager';
 import { IconButton, Size } from 'browndash-components';
 
 export enum SchemaFieldType {
-    Header, Cell
+    Header,
+    Cell,
 }
 
 export interface SchemaColumnHeaderProps {
@@ -49,7 +49,6 @@ export interface SchemaColumnHeaderProps {
 
 @observer
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
-
     private _inputRef: EditableView | null = null;
     @observable _altTitle: string | undefined = undefined;
     @observable _showMenuIcon: boolean = false;
@@ -58,18 +57,26 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         return this._props.columnKeys[this._props.columnIndex];
     }
 
-    constructor(props: SchemaColumnHeaderProps){
+    constructor(props: SchemaColumnHeaderProps) {
         super(props);
         makeObservable(this);
     }
-    
+
     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};
-    updateKeyDropdown = (value: string) => {this._props.schemaView.updateKeySearch(value)};
-    openKeyDropdown = () => {!this._props.schemaView._colBeingDragged && this._props.schemaView.openNewColumnMenu(this._props.columnIndex, false)};
+    setColumnValues = (field: string, defaultValue: string) => {
+        this._props.schemaView?.setKey(field, defaultValue, this._props.columnIndex);
+    };
+    @action updateAlt = (newAlt: string) => {
+        this._altTitle = newAlt;
+    };
+    updateKeyDropdown = (value: string) => {
+        this._props.schemaView.updateKeySearch(value);
+    };
+    openKeyDropdown = () => {
+        !this._props.schemaView._colBeingDragged && this._props.schemaView.openNewColumnMenu(this._props.columnIndex, false);
+    };
     toggleEditing = (editing: boolean) => {
-        this._inputRef?.setIsEditing(editing); 
+        this._inputRef?.setIsEditing(editing);
         this._inputRef?.setIsFocused(editing);
     };
 
@@ -110,10 +117,10 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         const cursor = !readOnly ? 'text' : 'default';
         const pointerEvents: 'all' | 'none' = 'all';
         return { color, fieldProps, cursor, pointerEvents };
-    }
+    };
 
     @computed get editableView() {
-        const { color, fieldProps, pointerEvents } = this.renderProps(this._props); 
+        const { color, fieldProps, pointerEvents } = this.renderProps(this._props);
 
         return <div className='schema-column-edit-wrapper' onPointerUp={() => {
             SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
@@ -143,107 +150,116 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     else return this.fieldKey;
                 }}
                 SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
-                    if (enterKey) { // if shift & enter, set value of each cell in column
+                    if (enterKey) {
+                        // if shift & enter, set value of each cell in column
                         this.setColumnValues(value, '');
                         this._altTitle = undefined;
                         this._props.finishEdit?.();
                         return true;
                     }
-                    this._props.finishEdit?.(); 
+                    this._props.finishEdit?.();
                     return true;
-                }, 'edit column header')}
-            />
+                }, 'edit column header')}/>
             </div>
     }
 
     public static isDefaultField = (key: string) => {
         const defaultPattern = /EmptyColumnKey/;
-        const isDefault: boolean = (defaultPattern.exec(key) != null);
+        const isDefault: boolean = defaultPattern.exec(key) != null;
         return isDefault;
-    }
+    };
 
-    get headerButton(){
-        const toRender = SchemaColumnHeader.isDefaultField(this.fieldKey) ? 
-        (<IconButton
-            icon={ <FontAwesomeIcon icon="trash" size='sm'/>}
-            size={Size.XSMALL}
-            color={'black'}
-            onPointerDown={e =>
-                setupMoveUpEvents(
-                    this,
-                    e,
-                    returnFalse,
-                    emptyFunction,
-                    undoable(clickEv => {
-                        clickEv.stopPropagation();
-                        this._props.schemaView.removeColumn(this._props.columnIndex);
-                    }, 'open column menu')
-                )
-            }
-        />)
-        : (<IconButton
-            icon={ <FontAwesomeIcon icon="caret-down" size='lg'/>}
-            size={Size.XSMALL}
-            color={'black'}
-            onPointerDown={e =>
-                setupMoveUpEvents(
-                    this,
-                    e,
-                    returnFalse,
-                    emptyFunction,
-                    undoable(clickEv => {
-                        clickEv.stopPropagation();
-                        this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex)
-                    }, 'open column menu')
-                )
-            }
-        />)
+    get headerButton() {
+        const toRender = SchemaColumnHeader.isDefaultField(this.fieldKey) ? (
+            <IconButton
+                icon={<FontAwesomeIcon icon="trash" size="sm" />}
+                size={Size.XSMALL}
+                color={'black'}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        returnFalse,
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                            this._props.schemaView.removeColumn(this._props.columnIndex);
+                        }, 'open column menu')
+                    )
+                }
+            />
+        ) : (
+            <IconButton
+                icon={<FontAwesomeIcon icon="caret-down" size="lg" />}
+                size={Size.XSMALL}
+                color={'black'}
+                onPointerDown={e =>
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        returnFalse,
+                        emptyFunction,
+                        undoable(clickEv => {
+                            clickEv.stopPropagation();
+                            this._props.openContextMenu(e.clientX, e.clientY, this._props.columnIndex);
+                        }, 'open column menu')
+                    )
+                }
+            />
+        );
 
         return toRender;
     }
 
-    @action handlePointerEnter = () => this._showMenuIcon = true;
-    @action handlePointerLeave = () => this._showMenuIcon = false;
+    @action handlePointerEnter = () => { this._showMenuIcon = true; } // prettier-ignore
+    @action handlePointerLeave = () => { this._showMenuIcon = false; } // prettier-ignore
 
-    @computed get displayButton() {return this._showMenuIcon;}
+    @computed get displayButton() {
+        return this._showMenuIcon;
+    }
 
     render() {
         return (
-                <div
-                    className="schema-column-header"
-                    style={{
-                        width: this._props.columnWidths[this._props.columnIndex],
-                    }}
-                    onPointerEnter={() => {this.handlePointerEnter()}}
-                    onPointerLeave={() => {this.handlePointerLeave()}}
-                    onPointerDown={e => {
-                        this.setupDrag(e);
-                        setupMoveUpEvents(
-                            this,
-                            e,
-                            () => {return this._inputRef?.setIsEditing(false) ?? false},
-                            emptyFunction,
-                            emptyFunction,
-                            );
-                        }
+            <div
+                className="schema-column-header"
+                style={{
+                    width: this._props.columnWidths[this._props.columnIndex],
+                }}
+                onPointerEnter={() => {
+                    this.handlePointerEnter();
+                }}
+                onPointerLeave={() => {
+                    this.handlePointerLeave();
+                }}
+                onPointerDown={e => {
+                    this.setupDrag(e);
+                    setupMoveUpEvents(
+                        this,
+                        e,
+                        () => {
+                            return this._inputRef?.setIsEditing(false) ?? false;
+                        },
+                        emptyFunction,
+                        emptyFunction
+                    );
+                }}
+                ref={col => {
+                    if (col) {
+                        this._props.setColRef(this._props.columnIndex, col);
                     }
-                    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, false)} />
-
-                    <div className="schema-header-text">{this.editableView}</div>
-
-                    <div className="schema-header-menu">
-                        <div className="schema-header-button" style={{opacity: this.displayButton ? '1.0' : '0.0'}}>
-                            {this.headerButton}
-                        </div>
-                    </div>  
-
-                    <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
+                }}>
+                <div className="schema-column-resizer left" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, false)} />
+
+                <div className="schema-header-text">{this.editableView}</div>
+
+                <div className="schema-header-menu">
+                    <div className="schema-header-button" style={{ opacity: this.displayButton ? '1.0' : '0.0' }}>
+                        {this.headerButton}
+                    </div>
                 </div>
+
+                <div className="schema-column-resizer right" onPointerDown={e => this._props.resizeColumn(e, this._props.columnIndex, true)} />
+            </div>
         );
     }
-}
\ No newline at end of file
+}