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

1 files changed, 31 insertions, 13 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 011b6c77a..4c4ef227a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as Autosuggest from 'react-autosuggest';
@@ -55,7 +55,7 @@ export interface EditableProps {
     placeholder?: string;
     wrap?: string; // nowrap, pre-wrap, etc
 
-    isColHeader?: boolean;
+    showKeyNotVal?: boolean;
 }
 
 /**
@@ -277,9 +277,35 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         );
     }
 
+    display = () => {
+        let toDisplay;
+        const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
+        if (this._props.showKeyNotVal){
+            toDisplay = <input className="editableView-input"
+            value={this._props.GetValue()}
+            readOnly
+            style={{ display: this._props.display, overflow: 'auto', pointerEvents: 'none', fontSize: this._props.fontSize, width: '100%', margin: 0, background: this._props.background}}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+        />
+        } else {
+            toDisplay = (<span
+            style={{
+                fontStyle: this._props.fontStyle,
+                fontSize: this._props.fontSize,
+            }}>
+            {
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+            }
+        </span>)
+        }
+
+        return toDisplay;
+    }
+
     render() {
         const gval = this._props.GetValue()?.replace(/\n/g, '\\r\\n');
-        if ((this._editing && gval !== undefined) || this._props.isColHeader) {
+        if ((this._editing && gval !== undefined)) {
             return this._props.sizeToContent ? (
                 <div style={{ display: 'grid', minWidth: 100 }}>
                     <div style={{ display: 'inline-block', position: 'relative', height: 0, width: '100%', overflow: 'hidden' }}>{gval}</div>
@@ -300,21 +326,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     minHeight: '10px',
                     whiteSpace: this._props.oneLine ? 'nowrap' : 'pre-line',
                     height: this._props.height,
+                    width: '100%',
                     maxHeight: this._props.maxHeight,
                     fontStyle: this._props.fontStyle,
                     fontSize: this._props.fontSize,
                 }}
                 onClick={this.onClick}>
-                <span
-                    style={{
-                        fontStyle: this._props.fontStyle,
-                        fontSize: this._props.fontSize,
-                    }}>
-                    {
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
-                    }
-                </span>
+                {this.display()}
             </div>
         );
     }