From 186cf33322b6c96386c6e9fdb823025d09c5caeb Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Wed, 21 Aug 2019 11:35:18 -0400
Subject: extended treeview functionality - better indenting, state management,
 drag dropping.

---
 src/client/views/EditableView.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

(limited to 'src/client/views/EditableView.tsx')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index c3612fee9..dd5395802 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import { observable, action, trace } from 'mobx';
 import "./EditableView.scss";
 import * as Autosuggest from 'react-autosuggest';
+import { undoBatch } from '../util/UndoManager';
 
 export interface EditableProps {
     /**
@@ -70,14 +71,12 @@ export class EditableView extends React.Component<EditableProps> {
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Tab") {
             e.stopPropagation();
+            this.finalizeEdit(e.currentTarget.value, e.shiftKey);
             this.props.OnTab && this.props.OnTab();
         } else if (e.key === "Enter") {
             e.stopPropagation();
             if (!e.ctrlKey) {
-                if (this.props.SetValue(e.currentTarget.value, e.shiftKey)) {
-                    this._editing = false;
-                    this.props.isEditingCallback && this.props.isEditingCallback(false);
-                }
+                this.finalizeEdit(e.currentTarget.value, e.shiftKey);
             } else if (this.props.OnFillDown) {
                 this.props.OnFillDown(e.currentTarget.value);
                 this._editing = false;
@@ -100,6 +99,14 @@ export class EditableView extends React.Component<EditableProps> {
         e.stopPropagation();
     }
 
+    @action
+    private finalizeEdit(value: string, shiftDown: boolean) {
+        if (this.props.SetValue(value, shiftDown)) {
+            this._editing = false;
+            this.props.isEditingCallback && this.props.isEditingCallback(false);
+        }
+    }
+
     stopPropagation(e: React.SyntheticEvent) {
         e.stopPropagation();
     }
@@ -118,7 +125,7 @@ export class EditableView extends React.Component<EditableProps> {
                         className: "editableView-input",
                         onKeyDown: this.onKeyDown,
                         autoFocus: true,
-                        onBlur: action(() => this._editing = false),
+                        onBlur: e => this.finalizeEdit(e.currentTarget.value, false),
                         onPointerDown: this.stopPropagation,
                         onClick: this.stopPropagation,
                         onPointerUp: this.stopPropagation,
@@ -126,9 +133,14 @@ export class EditableView extends React.Component<EditableProps> {
                         onChange: this.props.autosuggestProps.onChange
                     }}
                 />
-                : <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus
-                    onBlur={action(() => { this._editing = false; this.props.isEditingCallback && this.props.isEditingCallback(false); })} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
-                    style={{ display: this.props.display, fontSize: this.props.fontSize }} />;
+                : <input className="editableView-input"
+                    defaultValue={this.props.GetValue()}
+                    onKeyDown={this.onKeyDown}
+                    autoFocus={true}
+                    onBlur={e => this.finalizeEdit(e.currentTarget.value, false)}
+                    onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
+                    style={{ display: this.props.display, fontSize: this.props.fontSize }}
+                />;
         } else {
             if (this.props.autosuggestProps) this.props.autosuggestProps.resetValue();
             return (
-- 
cgit v1.2.3-70-g09d2