From f75810f3466fcbd2449bc5006316fea4865c2cd9 Mon Sep 17 00:00:00 2001 From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com> Date: Sun, 22 Aug 2021 21:26:04 -0400 Subject: fixed link relationship search visibility issues relationship search box now properly disappears on blur and reappears on focus without compromising relationship setting. Also refactored search result click handling --- src/client/views/linking/LinkEditor.scss | 4 +++ src/client/views/linking/LinkEditor.tsx | 28 +++++++++++-------- .../views/linking/LinkRelationshipSearch.tsx | 31 +++++++++++----------- 3 files changed, 37 insertions(+), 26 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 875e1672d..abd413f57 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -118,6 +118,10 @@ cursor: pointer; border: 1px solid $medium-gray; } + + p:hover { + background: $light-blue; + } } .linkEditor-followingDropdown { diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 4e104549d..2d6a6942b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -3,14 +3,12 @@ import { Tooltip } from "@material-ui/core"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, StrListCast } from "../../../fields/Doc"; -import { Cast, DateCast, StrCast } from "../../../fields/Types"; +import { DateCast, StrCast } from "../../../fields/Types"; import { LinkManager } from "../../util/LinkManager"; import { undoBatch } from "../../util/UndoManager"; import './LinkEditor.scss'; -import React = require("react"); -import { listSpec } from "../../../fields/Schema"; -import { List } from "../../../fields/List"; import { LinkRelationshipSearch } from "./LinkRelationshipSearch"; +import React = require("react"); interface LinkEditorProps { @@ -30,6 +28,7 @@ export class LinkEditor extends React.Component { @observable private buttonColor: string = ""; @observable private relationshipButtonColor: string = ""; @observable private relationshipSearchVisibility: string = "none"; + @observable private searchIsActive: boolean = false; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -105,25 +104,35 @@ export class LinkEditor extends React.Component { onRelationshipDown = () => this.setRelationshipValue(this.relationship); onBlur = () => { - // this.toggleRelationshipResults(); + //only hide the search results if the user clicks out of the input AND not on any of the search results + // i.e. if search is not active + if (!this.searchIsActive) { + this.toggleRelationshipResults(); + } } onFocus = () => { this.toggleRelationshipResults(); } + toggleSearchIsActive = () => { + this.searchIsActive = !this.searchIsActive; + console.log("toggle search to " + this.searchIsActive) + } @action handleDescriptionChange = (e: React.ChangeEvent) => { this.description = e.target.value; } @action handleRelationshipChange = (e: React.ChangeEvent) => { - this.relationship = e.target.value; } @action handleRelationshipSearchChange = (result: string) => { + this.setRelationshipValue(result); + this.toggleRelationshipResults(); this.relationship = result; } @computed get editRelationship() { + //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS return
Link Relationship:
@@ -133,18 +142,16 @@ export class LinkEditor extends React.Component { id="input" value={this.relationship} placeholder={"Enter link relationship"} - // color={"rgb(88, 88, 88)"} onKeyDown={this.onRelationshipKey} onChange={this.handleRelationshipChange} - onClick={this.toggleRelationshipResults} + onFocus={this.onFocus} onBlur={this.onBlur} >
{ id="input" value={this.description} placeholder={"Enter link description"} - // color={"rgb(88, 88, 88)"} onKeyDown={this.onDescriptionKey} onChange={this.handleDescriptionChange} > diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx index f8afa22e1..bb128f746 100644 --- a/src/client/views/linking/LinkRelationshipSearch.tsx +++ b/src/client/views/linking/LinkRelationshipSearch.tsx @@ -1,34 +1,33 @@ -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; + //callback fn to set rel + hide dropdown upon setting handleRelationshipSearchChange: (result: string) => void; + toggleSearch: () => void; } @observer export class LinkRelationshipSearch extends React.Component { + 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) } } + handleMouseEnter = () => { + this.props.toggleSearch(); + } + + handleMouseLeave = () => { + this.props.toggleSearch(); + } + /** * Render an empty div to increase the height of LinkEditor to accommodate 2+ results */ @@ -41,7 +40,11 @@ export class LinkRelationshipSearch extends React.Component -
+
{ // return a dropdown of relationship results if there exist results this.props.results ? this.props.results.map(result => { @@ -50,14 +53,12 @@ export class LinkRelationshipSearch extends React.Component) }) :

No matching relationships

- }
{/*Render an empty div to increase the height of LinkEditor to accommodate 2+ results */} {this.emptyDiv()}
- ) } } \ No newline at end of file -- cgit v1.2.3-70-g09d2