diff options
Diffstat (limited to 'src/client/views/linking/LinkRelationshipSearch.tsx')
-rw-r--r-- | src/client/views/linking/LinkRelationshipSearch.tsx | 52 |
1 files changed, 26 insertions, 26 deletions
diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx index 53da880e4..9662b2fea 100644 --- a/src/client/views/linking/LinkRelationshipSearch.tsx +++ b/src/client/views/linking/LinkRelationshipSearch.tsx @@ -1,8 +1,8 @@ -import { observer } from "mobx-react"; +import { observer } from 'mobx-react'; import './LinkEditor.scss'; -import React = require("react"); +import React = require('react'); -interface LinkRelationshipSearchProps { +interface link_relationshipSearchProps { results: string[] | undefined; display: string; //callback fn to set rel + hide dropdown upon setting @@ -10,48 +10,48 @@ interface LinkRelationshipSearchProps { toggleSearch: () => void; } @observer -export class LinkRelationshipSearch extends React.Component<LinkRelationshipSearchProps> { - +export class link_relationshipSearch extends React.Component<link_relationshipSearchProps> { handleResultClick = (e: React.MouseEvent) => { const relationship = (e.target as HTMLParagraphElement).textContent; if (relationship) { 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 - */ + * 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" }} />; + if (this.props.results && this.props.results.length > 2 && this.props.display === 'block') { + return <div style={{ height: '50px' }} />; } - } + }; render() { return ( <div className="linkEditor-relationship-dropdown-container"> - <div className="linkEditor-relationship-dropdown" - style={{ display: this.props.display }} - onMouseEnter={this.handleMouseEnter} - onMouseLeave={this.handleMouseLeave} - > - { // 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>; + <div className="linkEditor-relationship-dropdown" style={{ display: this.props.display }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> + { + // 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> + ) : ( + <p>No matching relationships</p> + ) } </div> @@ -60,4 +60,4 @@ export class LinkRelationshipSearch extends React.Component<LinkRelationshipSear </div> ); } -}
\ No newline at end of file +} |