cleaned up EditableView a bit

4 files changed, 46 insertions, 55 deletions

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}