From 8e45625865b20a9e25b120d6938d3ec31aa880e3 Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 13 Jul 2019 20:12:27 -0400
Subject: Kinda added auto complete

---
 package.json                             |  2 ++
 src/client/views/DocumentDecorations.tsx |  2 +-
 src/client/views/MetadataEntryMenu.tsx   | 49 ++++++++++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 6681c4c1c..22b3a6b21 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
         "@types/prosemirror-view": "^1.3.1",
         "@types/pug": "^2.0.4",
         "@types/react": "^16.8.7",
+        "@types/react-autosuggest": "^9.3.9",
         "@types/react-color": "^2.14.1",
         "@types/react-measure": "^2.0.4",
         "@types/react-table": "^6.7.22",
@@ -169,6 +170,7 @@
         "raw-loader": "^1.0.0",
         "react": "^16.8.4",
         "react-anime": "^2.2.0",
+        "react-autosuggest": "^9.4.3",
         "react-bootstrap": "^1.0.0-beta.5",
         "react-bootstrap-dropdown-menu": "^1.1.15",
         "react-color": "^2.17.0",
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 56fbd75a0..2cb3de50f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -639,7 +639,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         return (
             <div className="linkButtonWrapper">
                 <Flyout anchorPoint={anchorPoints.TOP_LEFT}
-                    content={<MetadataEntryMenu docs={() => SelectionManager.SelectedDocuments().map(dv => dv.props.Document)} />}>{/* tfs: @bcz This might need to be the data document? */}
+                    content={<MetadataEntryMenu docs={() => SelectionManager.SelectedDocuments().map(dv => dv.props.Document)} suggestWithFunction />}>{/* tfs: @bcz This might need to be the data document? */}
                     <div className="docDecs-tagButton" title="Add fields"><FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" /></div>
                 </Flyout>
             </div>
diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index 0dc7e0220..0c8fd3909 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -1,20 +1,23 @@
 import * as React from 'react';
 import "./MetadataEntryMenu.scss";
 import { observer } from 'mobx-react';
-import { observable, action } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { Doc } from '../../new_fields/Doc';
+import * as Autosuggest from 'react-autosuggest';
 
 export type DocLike = Doc | Doc[] | Promise<Doc> | Promise<Doc[]>;
 export interface MetadataEntryProps {
     docs: DocLike | (() => DocLike);
     onError?: () => boolean;
+    suggestWithFunction?: boolean;
 }
 
 @observer
 export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
     @observable private _currentKey: string = "";
     @observable private _currentValue: string = "";
+    @observable private suggestions: string[] = [];
 
     @action
     onKeyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -61,11 +64,53 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
         this._currentValue = "";
     }
 
+    getKeySuggestions = async (value: string): Promise<string[]> => {
+        value = value.toLowerCase();
+        let docs = this.props.docs;
+        if (typeof docs === "function") {
+            if (this.props.suggestWithFunction) {
+                docs = docs();
+            } else {
+                return [];
+            }
+        }
+        docs = await docs;
+        if (docs instanceof Doc) {
+            return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
+        } else {
+            const keys = new Set<string>();
+            docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
+            return Array.from(keys).filter(key => key.toLowerCase().startsWith(value));
+        }
+    }
+    getSuggestionValue = (suggestion: string) => suggestion;
+
+    renderSuggestion = (suggestion: string) => {
+        return <p>{suggestion}</p>;
+    }
+
+    onSuggestionFetch = async ({ value }: { value: string }) => {
+        const sugg = await this.getKeySuggestions(value);
+        runInAction(() => {
+            this.suggestions = sugg;
+        });
+    }
+
+    @action
+    onSuggestionClear = () => {
+        this.suggestions = [];
+    }
+
     render() {
         return (
             <div className="metadataEntry-outerDiv">
                 Key:
-                <input className="metadataEntry-input" value={this._currentKey} onChange={this.onKeyChange} />
+                <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange, className: "metadataEntry-input" }}
+                    getSuggestionValue={this.getSuggestionValue}
+                    suggestions={this.suggestions}
+                    renderSuggestion={this.renderSuggestion}
+                    onSuggestionsFetchRequested={this.onSuggestionFetch}
+                    onSuggestionsClearRequested={this.onSuggestionClear} />
                 Value:
                 <input className="metadataEntry-input" value={this._currentValue} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
             </div>
-- 
cgit v1.2.3-70-g09d2