more lint fixes to schema view changes.

1 files changed, 144 insertions, 120 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index c5cdac8af..47918f9c1 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,139 +117,156 @@ 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); 
-
-        return <div className='schema-column-edit-wrapper' onPointerUp={() => {
-            SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
-            this._props.schemaView.deselectAllCells();
-        }}
-        style={{
-            color,
-            width: '100%',
-            pointerEvents,
-        }}>
-            <EditableView
-                ref={r => {this._inputRef = r; this._props.autoFocus && r?.setIsFocused(true)}}
-                oneLine={true}
-                allowCRs={false}
-                contents={''}
-                onClick={this.openKeyDropdown}
-                fieldContents={fieldProps}
-                editing={undefined}  
-                placeholder={'Add key'}
-                updateAlt={this.updateAlt} // alternate title to display
-                updateSearch={this.updateKeyDropdown}
-                schemaFieldType={SchemaFieldType.Header} 
-                GetValue={() => {
-                    if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
-                    else if (this._altTitle) return this._altTitle;
-                    else return this.fieldKey;
+        const { color, fieldProps, pointerEvents } = this.renderProps(this._props);
+
+        return (
+            <div
+                className="schema-column-edit-wrapper"
+                onPointerUp={() => {
+                    SchemaColumnHeader.isDefaultField(this.fieldKey) && this.openKeyDropdown();
+                    this._props.schemaView.deselectAllCells();
                 }}
-                SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
-                    if (enterKey) { // if shift & enter, set value of each cell in column
-                        this.setColumnValues(value, '');
-                        this._altTitle = undefined;
+                style={{
+                    color,
+                    width: '100%',
+                    pointerEvents,
+                }}>
+                <EditableView
+                    ref={r => {
+                        this._inputRef = r;
+                        this._props.autoFocus && r?.setIsFocused(true);
+                    }}
+                    oneLine={true}
+                    allowCRs={false}
+                    contents={''}
+                    onClick={this.openKeyDropdown}
+                    fieldContents={fieldProps}
+                    editing={undefined}
+                    placeholder={'Add key'}
+                    updateAlt={this.updateAlt} // alternate title to display
+                    updateSearch={this.updateKeyDropdown}
+                    schemaFieldType={SchemaFieldType.Header}
+                    GetValue={() => {
+                        if (SchemaColumnHeader.isDefaultField(this.fieldKey)) return '';
+                        else if (this._altTitle) return this._altTitle;
+                        else return this.fieldKey;
+                    }}
+                    SetValue={undoable((value: string, shiftKey?: boolean, enterKey?: boolean) => {
+                        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?.();
                         return true;
-                    }
-                    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-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-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-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
+}