Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

1 files changed, 14 insertions, 2 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index e21d431b1..ee3ce1cf3 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -5,6 +5,7 @@ import * as Autosuggest from 'react-autosuggest';
 import { ObjectField } from '../../fields/ObjectField';
 import { SchemaHeaderField } from '../../fields/SchemaHeaderField';
 import "./EditableView.scss";
+import { DragManager } from '../util/DragManager';
 
 export interface EditableProps {
     /**
@@ -48,6 +49,8 @@ export interface EditableProps {
     HeadingObject?: SchemaHeaderField | undefined;
     toggle?: () => void;
     color?: string | undefined;
+    onDrop?: any;
+    placeholder?: string;
 }
 
 /**
@@ -78,6 +81,13 @@ 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));
+        }
+    }
+
     _didShow = false;
 
     @action
@@ -169,6 +179,7 @@ export class EditableView extends React.Component<EditableProps> {
                     onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true)}
                     onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
                     style={{ display: this.props.display, fontSize: this.props.fontSize }}
+                    placeholder={this.props.placeholder}
                 />;
         } else {
             this.props.autosuggestProps?.resetValue();
@@ -176,8 +187,9 @@ export class EditableView extends React.Component<EditableProps> {
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
                     ref={this._ref}
                     style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
-                    onClick={this.onClick}>
-                    <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize }}>{this.props.contents}</span>
+                    onClick={this.onClick} placeholder={this.props.placeholder}>
+
+                    <span style={{ fontStyle: this.props.fontStyle, fontSize: this.props.fontSize, color: this.props.contents ? "black" : "grey" }}>{this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}</span>
                 </div>
             );
         }