cleaned up EditableView a bit

8 files changed, 63 insertions, 108 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index ed7a8265f..e2f171f9d 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,8 +3,6 @@ import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as Autosuggest from 'react-autosuggest';
 import { ObjectField } from '../../fields/ObjectField';
-import { SchemaHeaderField } from '../../fields/SchemaHeaderField';
-import { DragManager } from '../util/DragManager';
 import "./EditableView.scss";
 
 export interface EditableProps {
@@ -12,16 +10,13 @@ export interface EditableProps {
      * Called to get the initial value for editing
      *  */
     GetValue(): string | undefined;
-
     /**
      * Called to apply changes
      * @param value - The string entered by the user to set the value to
      * @returns `true` if setting the value was successful, `false` otherwise
      *  */
     SetValue(value: string, shiftDown?: boolean, enterKey?: boolean): boolean;
-
     OnFillDown?(value: string): void;
-
     OnTab?(shift?: boolean): void;
     OnEmpty?(): void;
 
@@ -45,15 +40,12 @@ export interface EditableProps {
     };
     oneLine?: boolean;
     editing?: boolean;
-    onClick?: (e: React.MouseEvent) => boolean;
     isEditingCallback?: (isEditing: boolean) => void;
     menuCallback?: (x: number, y: number) => void;
     textCallback?: (char: string) => boolean;
     showMenuOnLoad?: boolean;
-    HeadingObject?: SchemaHeaderField | undefined;
     toggle?: () => void;
-    color?: string | undefined;
-    onDrop?: any;
+    background?: string | undefined;
     placeholder?: string;
 }
 
@@ -64,6 +56,8 @@ export interface EditableProps {
  */
 @observer
 export class EditableView extends React.Component<EditableProps> {
+    private _ref = React.createRef<HTMLDivElement>();
+    private _inputref = React.createRef<HTMLInputElement>();
     @observable _editing: boolean = false;
 
     constructor(props: EditableProps) {
@@ -71,17 +65,6 @@ export class EditableView extends React.Component<EditableProps> {
         this._editing = this.props.editing ? true : false;
     }
 
-    // @action
-    // componentDidUpdate(nextProps: EditableProps) {
-    //     // this is done because when autosuggest is turned on, the suggestions are passed in as a prop,
-    //     // so when the suggestions are passed in, and no editing prop is passed in, it used to set it
-    //     // to false. this will no longer do so -syip
-    //     if (nextProps.editing && nextProps.editing !== this._editing) {
-    //         this._editing = nextProps.editing;
-    //         EditableView.loadId = "";
-    //     }
-    // }
-
     @action
     componentDidUpdate() {
         if (this._editing && this.props.editing === false) {
@@ -91,19 +74,10 @@ export class EditableView extends React.Component<EditableProps> {
         }
     }
 
-    @action
-    componentDidMount() {
-        if (this._ref.current && this.props.onDrop) {
-            DragManager.MakeDropTarget(this._ref.current, this.props.onDrop.bind(this));
-        }
-    }
-    @action
     componentWillUnmount() {
         this._inputref.current?.value && this.finalizeEdit(this._inputref.current.value, false, true, false);
     }
 
-    _didShow = false;
-
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         switch (e.key) {
@@ -149,7 +123,7 @@ export class EditableView extends React.Component<EditableProps> {
             e.nativeEvent.stopPropagation();
             if (this._ref.current && this.props.showMenuOnLoad) {
                 this.props.menuCallback?.(this._ref.current.getBoundingClientRect().x, this._ref.current.getBoundingClientRect().y);
-            } else if (!this.props.onClick?.(e)) {
+            } else {
                 this._editing = true;
                 this.props.isEditingCallback?.(true);
             }
@@ -158,7 +132,7 @@ export class EditableView extends React.Component<EditableProps> {
     }
 
     @action
-    private finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
+    finalizeEdit(value: string, shiftDown: boolean, lostFocus: boolean, enterKey: boolean) {
         if (this.props.SetValue(value, shiftDown, enterKey)) {
             this._editing = false;
             this.props.isEditingCallback?.(false,);
@@ -172,9 +146,7 @@ export class EditableView extends React.Component<EditableProps> {
         }
     }
 
-    stopPropagation(e: React.SyntheticEvent) {
-        e.stopPropagation();
-    }
+    stopPropagation(e: React.SyntheticEvent) { e.stopPropagation(); }
 
     @action
     setIsFocused = (value: boolean) => {
@@ -183,8 +155,6 @@ export class EditableView extends React.Component<EditableProps> {
         return wasFocused !== this._editing;
     }
 
-    _ref = React.createRef<HTMLDivElement>();
-    _inputref = React.createRef<HTMLInputElement>();
     renderEditor() {
         return this.props.autosuggestProps
             ? <Autosuggest
@@ -203,14 +173,13 @@ export class EditableView extends React.Component<EditableProps> {
                 }}
             />
             : <input className="editableView-input" ref={this._inputref}
+                style={{ display: this.props.display, fontSize: this.props.fontSize, minWidth: 20, background: this.props.background }}
+                placeholder={this.props.placeholder}
+                onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this.props.GetValue()}
-                onKeyDown={this.onKeyDown}
                 autoFocus={true}
-                onKeyPress={e => e.stopPropagation()}
-                onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
-                onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
-                style={{ display: this.props.display, fontSize: this.props.fontSize, minWidth: 20 }}
-                placeholder={this.props.placeholder}
+                onKeyDown={this.onKeyDown}
+                onKeyPress={this.stopPropagation} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
             />;
     }
 
@@ -225,13 +194,13 @@ export class EditableView extends React.Component<EditableProps> {
                 </div> :
                 this.renderEditor();
         }
-        setTimeout(() => this.props.autosuggestProps?.resetValue(), 0);
+        setTimeout(() => this.props.autosuggestProps?.resetValue());
         return this.props.contents instanceof ObjectField ? (null) :
             <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`} ref={this._ref}
                 style={{ display: this.props.display, textOverflow: this.props.overflow, minHeight: "17px", whiteSpace: "nowrap", height: this.props.height || "auto", maxHeight: this.props.maxHeight }}
                 onClick={this.onClick} placeholder={this.props.placeholder}>
-                <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }} >{
-                    this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
+                <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }} >
+                    {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
                 </span>
             </div>;
     }
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index ff69c7d05..4bdd39194 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -6,7 +6,7 @@ import { Doc, DocListCast, DataSym } from "../../../fields/Doc";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { ScriptField } from "../../../fields/ScriptField";
 import { StrCast, NumCast } from "../../../fields/Types";
-import { numberRange, setupMoveUpEvents, emptyFunction } from "../../../Utils";
+import { numberRange, setupMoveUpEvents, emptyFunction, returnEmptyString } from "../../../Utils";
 import { Docs } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { CompileScript } from "../../util/Scripting";
@@ -249,14 +249,6 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         const rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap))));
         const style = this.props.parent;
         const chromeStatus = this.props.parent.props.Document._chromeStatus;
-        const newEditableViewProps = {
-            GetValue: () => "",
-            SetValue: this.addDocument,
-            textCallback: this.textCallback,
-            contents: "+ NEW",
-            HeadingObject: this.props.headingObject,
-            toggle: this.toggleVisibility,
-        };
         const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled');
         const stackPad = showChrome ? `0px ${this.props.parent.xMargin}px` : `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px 0px ${this.props.parent.xMargin}px `;
         return this.collapsed ? (null) :
@@ -267,7 +259,12 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                             //width: style.columnWidth / style.numGroupColumns,
                             padding: `${NumCast(this.props.parent.layoutDoc._yPadding, this.props.parent.yMargin)}px 0px 0px 0px`
                         }}>
-                        <EditableView {...newEditableViewProps} />
+                        <EditableView
+                            GetValue={returnEmptyString}
+                            SetValue={this.addDocument}
+                            textCallback={this.textCallback}
+                            contents={"+ NEW"}
+                            toggle={this.toggleVisibility} />
                     </div> : null
                 }
                 <div className={`collectionStackingView-masonryGrid`}
@@ -288,17 +285,15 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
         const noChrome = this.props.parent.props.Document._chromeStatus === "disabled";
         const key = StrCast(this.props.parent.props.Document._pivotField);
         const evContents = this.heading ? this.heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
-        const headerEditableViewProps = {
-            GetValue: () => evContents,
-            SetValue: this.headingChanged,
-            contents: evContents,
-            oneLine: true,
-            HeadingObject: this.props.headingObject,
-            toggle: this.toggleVisibility,
-        };
+        const editableHeaderView = <EditableView
+            GetValue={() => evContents}
+            SetValue={this.headingChanged}
+            contents={evContents}
+            oneLine={true}
+            toggle={this.toggleVisibility} />;
         return this.props.parent.props.Document.miniHeaders ?
             <div className="collectionStackingView-miniHeader">
-                <EditableView {...headerEditableViewProps} />
+                {editableHeaderView}
             </div> :
             !this.props.headingObject ? (null) :
                 <div className="collectionStackingView-sectionHeader" ref={this._headerRef} >
@@ -306,7 +301,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
                         title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                             `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                         style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this.color : "lightgrey" }}>
-                        {noChrome ? evContents : <EditableView {...headerEditableViewProps} />}
+                        {noChrome ? evContents : editableHeaderView}
                         {noChrome || evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
                             <div className="collectionStackingView-sectionColor">
                                 <button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}>
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index ec6458d00..0182c2625 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -10,7 +10,7 @@ import { ScriptField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { ImageField } from "../../../fields/URLField";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, setupMoveUpEvents, returnFalse } from "../../../Utils";
+import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils";
 import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager } from "../../util/DragManager";
@@ -294,22 +294,6 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         const columnYMargin = this.props.headingObject ? 0 : NumCast(this.props.parent.yMargin, 5);
         const uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         const evContents = heading ? heading : this.props?.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
-        const headerEditableViewProps = {
-            GetValue: () => evContents,
-            SetValue: this.headingChanged,
-            contents: evContents,
-            oneLine: true,
-            HeadingObject: this.props.headingObject,
-            toggle: this.toggleVisibility,
-        };
-        const newEditableViewProps = {
-            GetValue: () => "",
-            SetValue: this.addDocument,
-            textCallback: this.textCallback,
-            contents: "+ NEW",
-            HeadingObject: this.props.headingObject,
-            toggle: this.toggleVisibility,
-        };
         const headingView = this.props.headingObject ?
             <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
                 style={{
@@ -325,7 +309,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                     title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                     style={{ background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "inherit" }}>
-                    <EditableView {...headerEditableViewProps} />
+                    <EditableView
+                        GetValue={() => evContents}
+                        SetValue={this.headingChanged}
+                        contents={evContents}
+                        oneLine={true}
+                        toggle={this.toggleVisibility} />
                     {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
                         <div className="collectionStackingView-sectionColor">
                             <button className="collectionStackingView-sectionColorButton" onClick={action(e => this._paletteOn = !this._paletteOn)}>
@@ -373,7 +362,13 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                         {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== DocumentType.PRES) ?
                             <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
                                 style={{ width: style.columnWidth / style.numGroupColumns, marginBottom: 10 }}>
-                                <EditableView {...newEditableViewProps} menuCallback={this.menuCallback} />
+                                <EditableView
+                                    GetValue={returnEmptyString}
+                                    SetValue={this.addDocument}
+                                    textCallback={this.textCallback}
+                                    contents={"+ NEW"}
+                                    toggle={this.toggleVisibility}
+                                    menuCallback={this.menuCallback} />
                             </div> : null}
                     </div>
             }
diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index cd91cbf63..857d5e1d7 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -8,7 +8,7 @@ import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec } from "../../../fields/Schema";
 import { ComputedField, ScriptField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, returnEmptyString } from "../../../Utils";
 import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { Scripting } from "../../util/Scripting";
@@ -193,22 +193,22 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) {
     }
 
     @computed get pivotKeyUI() {
-        const newEditableViewProps = {
-            GetValue: () => "",
-            SetValue: (value: any) => {
-                if (value?.length) {
-                    this.layoutDoc._pivotField = value;
-                    return true;
-                }
-                return false;
-            },
-            showMenuOnLoad: true,
-            contents: ":" + StrCast(this.layoutDoc._pivotField),
-            toggle: this.toggleVisibility,
-            color: "#f1efeb" // this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
-        };
         return <div className={"pivotKeyEntry"}>
-            <EditableView {...newEditableViewProps} display={"inline"} menuCallback={this.menuCallback} />
+            <EditableView
+                GetValue={returnEmptyString}
+                SetValue={(value: any) => {
+                    if (value?.length) {
+                        this.layoutDoc._pivotField = value;
+                        return true;
+                    }
+                    return false;
+                }}
+                toggle={this.toggleVisibility}
+                background={"#f1efeb"} // this.props.headingObject ? this.props.headingObject.color : "#f1efeb";
+                contents={":" + StrCast(this.layoutDoc._pivotField)}
+                showMenuOnLoad={true}
+                display={"inline"}
+                menuCallback={this.menuCallback} />
         </div>;
     }
 
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index ec8e63b6c..297796b4b 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -548,6 +548,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             oneLine={true}
             display={"inline-block"}
             editing={true}
+            background={"#7089bb"}
             contents={StrCast(this.doc.title)}
             height={12}
             sizeToContent={true}
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index ce9d8bed5..ebb953dad 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -125,12 +125,9 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
                             contents={contents}
                             maxHeight={36}
                             height={"auto"}
-                            GetValue={() => {
-                                return Field.toKeyValueString(props.Document, props.fieldKey);
-                            }}
+                            GetValue={() => Field.toKeyValueString(props.Document, props.fieldKey)}
                             SetValue={(value: string) =>
-                                KeyValueBox.SetField(props.Document, props.fieldKey, value)}>
-                        </EditableView>
+                                KeyValueBox.SetField(props.Document, props.fieldKey, value)} />
                     </div>
                 </td>
             </tr>
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 720af6c9d..30b272a9a 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -2,7 +2,6 @@ import React = require("react");
 import { observer } from "mobx-react";
 import "./LinkDescriptionPopup.scss";
 import { observable, action } from "mobx";
-import { EditableView } from "../EditableView";
 import { LinkManager } from "../../util/LinkManager";
 import { TaskCompletionBox } from "./TaskCompletedBox";
 
diff --git a/src/debug/Viewer.tsx b/src/debug/Viewer.tsx
index bebd71dcf..ee7dd1fc1 100644
--- a/src/debug/Viewer.tsx
+++ b/src/debug/Viewer.tsx
@@ -138,8 +138,7 @@ class DebugViewer extends React.Component<{ field: FieldResult, setValue(value:
             return <p>Unrecognized field type</p>;
         }
 
-        return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue}
-            contents={content}></EditableView>;
+        return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue} contents={content} />;
     }
 }