added working relationship search + set

need to debug visibility toggle and refactor handlers

1 files changed, 63 insertions, 0 deletions

diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx
new file mode 100644
index 000000000..f8afa22e1
--- /dev/null
+++ b/src/client/views/linking/LinkRelationshipSearch.tsx
@@ -0,0 +1,63 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, StrListCast } from "../../../fields/Doc";
+import { LinkManager } from "../../util/LinkManager";
+import './LinkEditor.scss';
+import React = require("react");
+import { List } from "../../../fields/List";
+
+interface LinkRelationshipSearchProps {
+    results: string[] | undefined;
+    display: string;
+    //callback fns to set rel + hide dropdown upon setting
+    setRelationshipValue: (value: string) => void;
+    toggleRelationshipResults: () => void;
+    handleRelationshipSearchChange: (result: string) => void;
+}
+@observer
+export class LinkRelationshipSearch extends React.Component<LinkRelationshipSearchProps> {
+    handleResultClick = (e: React.MouseEvent) => {
+        console.log("click");
+        const relationship = (e.target as HTMLParagraphElement).textContent;
+        if (relationship) {
+            console.log("new rel " + relationship);
+            this.props.setRelationshipValue(relationship);
+            this.props.toggleRelationshipResults();
+            this.props.handleRelationshipSearchChange(relationship)
+        }
+    }
+
+    /**
+     * Render an empty div to increase the height of LinkEditor to accommodate 2+ results 
+    */
+    emptyDiv = () => {
+        if (this.props.results && this.props.results.length > 2 && this.props.display == "block") {
+            return <div style={{ height: "50px" }}></div>
+        }
+    }
+
+    render() {
+        return (
+            <div className="linkEditor-relationship-dropdown-container">
+                <div className="linkEditor-relationship-dropdown" style={{ display: this.props.display }}>
+                    {   // return a dropdown of relationship results if there exist results
+                        this.props.results
+                            ? this.props.results.map(result => {
+                                return (<p key={result} onClick={this.handleResultClick}>
+                                    {result}
+                                </p>)
+                            })
+                            : <p>No matching relationships</p>
+
+                    }
+                </div>
+
+                {/*Render an empty div to increase the height of LinkEditor to accommodate 2+ results */}
+                {this.emptyDiv()}
+            </div>
+
+        )
+    }
+}
\ No newline at end of file