linking menu updates on input and enter

2 files changed, 104 insertions, 20 deletions

diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index 3c49c2212..e1e6b70b4 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -47,7 +47,7 @@
     border-radius: 3px;
 
     .linkEditor-group-row {
-        // display: flex;
+        display: flex;
         margin-bottom: 3px;
 
         .linkEditor-group-row-label {
@@ -108,6 +108,32 @@
         &:hover {
             background-color: lightgray;
         }
+
+        &.onDown {
+            background-color: gray;
+        }
+    }
+}
+
+.linkEditor-typeButton {
+    // background-color: $dark-color;
+    // color: white;
+    // background-color: $light-color;
+    // background-color: white;
+    background-color: transparent;
+    color: $dark-color;
+    width: 100%;
+    height: 20px;
+    padding: 0 3px;
+    padding-bottom: 2px;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    font-size: 12px;
+    font-weight: bold;
+
+    &:hover {
+        background-color: $light-color;
     }
 }
 
@@ -115,6 +141,7 @@
     height: 20px;
     display: flex;
     justify-content: flex-end;
+    margin-top: 5px;
 
     .linkEditor-button {
         margin-left: 6px;
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 7200e5aa0..02373926e 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -22,11 +22,14 @@ interface GroupTypesDropdownProps {
 // this dropdown could be generalized
 @observer
 class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
-    @observable private _searchTerm: string = "";
+    @observable private _searchTerm: string = this.props.groupType;
     @observable private _groupType: string = this.props.groupType;
+    @observable private _isEditing: boolean = false;
+    // @observable private _ref: React.RefObject<HTMLInputElement> = React.createRef();
 
-    @action setSearchTerm = (value: string): void => { this._searchTerm = value; };
-    @action setGroupType = (value: string): void => { this._groupType = value; };
+    // @action setSearchTerm = (value: string): void => { this._searchTerm = value; };
+    // @action setGroupType = (value: string): void => { this._groupType = value; };
+    // @action setIsEditing = (isEditing: boolean): void => { this._isEditing = isEditing; console.log(this._isEditing); };
 
     @action
     createGroup = (groupType: string): void => {
@@ -34,9 +37,56 @@ class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
         LinkManager.Instance.addGroupType(groupType);
     }
 
+    @action
     onChange = (val: string): void => {
-        this.setSearchTerm(val);
-        this.setGroupType(val);
+        this._searchTerm = val;
+        this._groupType = val;
+        this._isEditing = true;
+    }
+
+    @action
+    onKeyDown = (e: React.KeyboardEvent): void => {
+        if (e.key === "Enter") {
+            let allGroupTypes = Array.from(LinkManager.Instance.getAllGroupTypes());
+            let groupOptions = allGroupTypes.filter(groupType => groupType.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1);
+            let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase());
+
+            if (exactFound > -1) {
+                let groupType = groupOptions[exactFound];
+                this.props.setGroupType(groupType);
+                this._groupType = groupType;
+            } else {
+                this.createGroup(this._searchTerm);
+                this._groupType = this._searchTerm;
+            }
+
+            this._searchTerm = this._groupType;
+            this._isEditing = false;
+            console.log("on key down", this._isEditing);
+        }
+    }
+
+    @action
+    onOptionClick = (value: string, createNew: boolean): void => {
+        if (createNew) {
+            this.createGroup(this._searchTerm);
+            this._groupType = this._searchTerm;
+
+        } else {
+            this.props.setGroupType(value);
+            this._groupType = value;
+
+        }
+        this._searchTerm = this._groupType;
+        this._isEditing = false;
+        console.log("option clicked", this._isEditing);
+    }
+
+    @action
+    onButtonPointerDown = (): void => {
+        this._isEditing = true;
+        console.log("button down", this._isEditing);
+        //make focus on input
     }
 
     renderOptions = (): JSX.Element[] | JSX.Element => {
@@ -47,29 +97,36 @@ class GroupTypesDropdown extends React.Component<GroupTypesDropdownProps> {
         let exactFound = groupOptions.findIndex(groupType => groupType.toUpperCase() === this._searchTerm.toUpperCase()) > -1;
 
         let options = groupOptions.map(groupType => {
-            return <div key={groupType} className="linkEditor-option"
-                onClick={() => { this.props.setGroupType(groupType); this.setGroupType(groupType); this.setSearchTerm(""); }}>{groupType}</div>;
+            let ref = React.createRef<HTMLDivElement>();
+            return <div key={groupType} ref={ref} className="linkEditor-option"
+                onClick={() => this.onOptionClick(groupType, false)}>{groupType}</div>;
         });
 
         // if search term does not already exist as a group type, give option to create new group type
         if (!exactFound && this._searchTerm !== "") {
-            options.push(<div key={""} className="linkEditor-option"
-                onClick={() => { this.createGroup(this._searchTerm); this.setGroupType(this._searchTerm); this.setSearchTerm(""); }}>Define new "{this._searchTerm}" relationship</div>);
+            let ref = React.createRef<HTMLDivElement>();
+            options.push(<div key={""} ref={ref} className="linkEditor-option"
+                onClick={() => this.onOptionClick(this._searchTerm, true)}>Define new "{this._searchTerm}" relationship</div>);
         }
 
         return options;
     }
 
     render() {
-        return (
-            <div className="linkEditor-dropdown">
-                <input type="text" value={this._groupType} placeholder="Search for or create a new group"
-                    onChange={e => this.onChange(e.target.value)}></input>
-                <div className="linkEditor-options-wrapper">
-                    {this.renderOptions()}
-                </div>
-            </div >
-        );
+        console.log("render", this._isEditing);
+        if (this._isEditing || this._groupType === "") {
+            return (
+                <div className="linkEditor-dropdown">
+                    <input type="text" value={this._groupType} placeholder="Search for or create a new group"
+                        onChange={e => this.onChange(e.target.value)} onKeyDown={this.onKeyDown} autoFocus></input>
+                    <div className="linkEditor-options-wrapper">
+                        {this.renderOptions()}
+                    </div>
+                </div >
+            );
+        } else {
+            return <button className="linkEditor-typeButton" onClick={() => this.onButtonPointerDown()}>{this._groupType}</button>;
+        }
     }
 }
 
@@ -276,7 +333,7 @@ export class LinkGroupEditor extends React.Component<LinkGroupEditorProps> {
         }
         return (
             <div className="linkEditor-group">
-                <div className="linkEditor-group-row">
+                <div className="linkEditor-group-row ">
                     <p className="linkEditor-group-row-label">type:</p>
                     <GroupTypesDropdown groupType={groupType} setGroupType={this.setGroupType} />
                 </div>