diff options
Diffstat (limited to 'src')
4 files changed, 128 insertions, 11 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 0c44df64c..59891b7a1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -182,7 +182,6 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo const linkColorList = Doc.UserDoc().linkColorList as List<string>; //access stroke color using index of the relationship in the color list (default black) const strokeColor = linkRelationshipList.indexOf(linkRelationship) == -1 ? "black" : linkColorList[linkRelationshipList.indexOf(linkRelationship)]; - console.log(strokeColor); return !a.width || !b.width || ((!this.props.LinkDocs[0].linkDisplay) && !aActive && !bActive) ? (null) : (<> <path className="collectionfreeformlinkview-linkLine" style={{ opacity: this._opacity, strokeDasharray: "2 2", stroke: strokeColor }} d={`M ${pt1[0]} ${pt1[1]} C ${pt1[0] + pt1norm[0]} ${pt1[1] + pt1norm[1]}, ${pt2[0] + pt2norm[0]} ${pt2[1] + pt2norm[1]}, ${pt2[0]} ${pt2[1]}`} /> diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index e45a91d57..875e1672d 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -106,6 +106,20 @@ } } +.linkEditor-relationship-dropdown { + position: absolute; + width: 154px; + max-height: 90px; + overflow: auto; + background: white; + + p { + padding: 3px; + cursor: pointer; + border: 1px solid $medium-gray; + } +} + .linkEditor-followingDropdown { padding-left: 26px; padding-right: 6.5px; diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 7d6f4caf2..4e104549d 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -10,6 +10,7 @@ import './LinkEditor.scss'; import React = require("react"); import { listSpec } from "../../../fields/Schema"; import { List } from "../../../fields/List"; +import { LinkRelationshipSearch } from "./LinkRelationshipSearch"; interface LinkEditorProps { @@ -28,6 +29,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> { @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } @observable private buttonColor: string = ""; @observable private relationshipButtonColor: string = ""; + @observable private relationshipSearchVisibility: string = "none"; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -48,8 +50,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> { linkRelationshipList.push(value); const randColor = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"; linkColorList.push(randColor) - console.log(randColor) - console.log("linkRelList size: " + linkRelationshipList.length); } this.relationshipButtonColor = "rgb(62, 133, 55)"; setTimeout(action(() => this.relationshipButtonColor = ""), 750); @@ -57,6 +57,26 @@ export class LinkEditor extends React.Component<LinkEditorProps> { } }); + /** + * returns list of strings with possible existing relationships that contain what is currently in the input field + */ + @action + getRelationshipResults = () => { + const query = this.relationship; //current content in input box + const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList) + if (linkRelationshipList) { + return linkRelationshipList.filter(rel => rel.includes(query)); + } + } + + /** + * toggles visibility of the relationship search results when the input field is focused on + */ + @action + toggleRelationshipResults = () => { + this.relationshipSearchVisibility = this.relationshipSearchVisibility == "none" ? "block" : "none"; + } + @undoBatch setDescripValue = action((value: string) => { if (LinkManager.currentLink) { @@ -67,7 +87,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> { } }); - onKey = (e: React.KeyboardEvent<HTMLInputElement>) => { + onDescriptionKey = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { this.setDescripValue(this.description); document.getElementById('input')?.blur(); @@ -81,14 +101,27 @@ export class LinkEditor extends React.Component<LinkEditorProps> { } } - onDown = () => this.setDescripValue(this.description); + onDescriptionDown = () => this.setDescripValue(this.description); onRelationshipDown = () => this.setRelationshipValue(this.relationship); + onBlur = () => { + // this.toggleRelationshipResults(); + } + onFocus = () => { + this.toggleRelationshipResults(); + } + @action - handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; } + handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; } @action - handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.relationship = e.target.value; } + handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { + this.relationship = e.target.value; + } + @action + handleRelationshipSearchChange = (result: string) => { + this.relationship = result; + } @computed get editRelationship() { return <div className="linkEditor-description"> @@ -103,8 +136,16 @@ export class LinkEditor extends React.Component<LinkEditorProps> { // color={"rgb(88, 88, 88)"} onKeyDown={this.onRelationshipKey} onChange={this.handleRelationshipChange} - onBlur={this.onRelationshipDown} + onClick={this.toggleRelationshipResults} + onBlur={this.onBlur} ></input> + <LinkRelationshipSearch + results={this.getRelationshipResults()} + display={this.relationshipSearchVisibility} + setRelationshipValue={this.setRelationshipValue} + toggleRelationshipResults={this.toggleRelationshipResults} + handleRelationshipSearchChange={this.handleRelationshipSearchChange} + /> </div> <div className="linkEditor-description-add-button" style={{ background: this.relationshipButtonColor }} @@ -125,13 +166,13 @@ export class LinkEditor extends React.Component<LinkEditorProps> { value={this.description} placeholder={"Enter link description"} // color={"rgb(88, 88, 88)"} - onKeyDown={this.onKey} - onChange={this.handleChange} + onKeyDown={this.onDescriptionKey} + onChange={this.handleDescriptionChange} ></input> </div> <div className="linkEditor-description-add-button" style={{ background: this.buttonColor }} - onPointerDown={this.onDown}>Set</div> + onPointerDown={this.onDescriptionDown}>Set</div> </div> </div>; } 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 |