diff options
| author | ljungster <parkerljung@gmail.com> | 2022-08-09 11:52:07 -0500 |
|---|---|---|
| committer | ljungster <parkerljung@gmail.com> | 2022-08-09 11:52:07 -0500 |
| commit | da3cb00f809a482a9fdf732f6a656fbc467cce27 (patch) | |
| tree | 9eb1fd278bc71d080d71bbfb7e3aec482d35f439 /src/client/views/nodes/LinkDescriptionPopup.tsx | |
| parent | 1638527259a072dfc2ab286bd27bbb1751e8434e (diff) | |
| parent | 26670c8b9eb6e2fd981c3a0997bff5556b60504b (diff) | |
Merge branch 'parker' of https://github.com/brown-dash/Dash-Web into parker
Diffstat (limited to 'src/client/views/nodes/LinkDescriptionPopup.tsx')
| -rw-r--r-- | src/client/views/nodes/LinkDescriptionPopup.tsx | 73 |
1 files changed, 40 insertions, 33 deletions
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index a9d33f161..91bd505c5 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -1,26 +1,24 @@ -import React = require("react"); -import { action, observable } from "mobx"; -import { observer } from "mobx-react"; -import { Doc } from "../../../fields/Doc"; -import { LinkManager } from "../../util/LinkManager"; -import "./LinkDescriptionPopup.scss"; -import { TaskCompletionBox } from "./TaskCompletedBox"; - +import React = require('react'); +import { action, observable } from 'mobx'; +import { observer } from 'mobx-react'; +import { Doc } from '../../../fields/Doc'; +import { LinkManager } from '../../util/LinkManager'; +import './LinkDescriptionPopup.scss'; +import { TaskCompletionBox } from './TaskCompletedBox'; @observer export class LinkDescriptionPopup extends React.Component<{}> { - @observable public static descriptionPopup: boolean = false; - @observable public static showDescriptions: string = "ON"; + @observable public static showDescriptions: string = 'ON'; @observable public static popupX: number = 700; @observable public static popupY: number = 350; - @observable description: string = ""; + @observable description: string = ''; @observable popupRef = React.createRef<HTMLDivElement>(); @action descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.currentTarget.value; - } + }; @action onDismiss = (add: boolean) => { @@ -28,7 +26,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { if (add) { LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).description = this.description); } - } + }; @action onClick = (e: PointerEvent) => { @@ -36,34 +34,43 @@ export class LinkDescriptionPopup extends React.Component<{}> { LinkDescriptionPopup.descriptionPopup = false; TaskCompletionBox.taskCompleted = false; } - } + }; @action componentDidMount() { - document.addEventListener("pointerdown", this.onClick); + document.addEventListener('pointerdown', this.onClick, true); } componentWillUnmount() { - document.removeEventListener("pointerdown", this.onClick); + document.removeEventListener('pointerdown', this.onClick, true); } render() { - return <div className="linkDescriptionPopup" ref={this.popupRef} - style={{ - left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700, - top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350, - }}> - <input className="linkDescriptionPopup-input" - onKeyPress={e => e.key === "Enter" && this.onDismiss(true)} - placeholder={"(Optional) Enter link description..."} - onChange={(e) => this.descriptionChanged(e)}> - </input> - <div className="linkDescriptionPopup-btn"> - <div className="linkDescriptionPopup-btn-dismiss" - onPointerDown={e => this.onDismiss(false)}> Dismiss </div> - <div className="linkDescriptionPopup-btn-add" - onPointerDown={e => this.onDismiss(true)}> Add </div> + return ( + <div + className="linkDescriptionPopup" + ref={this.popupRef} + style={{ + left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700, + top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350, + }}> + <input + className="linkDescriptionPopup-input" + onKeyDown={e => e.stopPropagation()} + onKeyPress={e => e.key === 'Enter' && this.onDismiss(true)} + placeholder={'(Optional) Enter link description...'} + onChange={e => this.descriptionChanged(e)}></input> + <div className="linkDescriptionPopup-btn"> + <div className="linkDescriptionPopup-btn-dismiss" onPointerDown={e => this.onDismiss(false)}> + {' '} + Dismiss{' '} + </div> + <div className="linkDescriptionPopup-btn-add" onPointerDown={e => this.onDismiss(true)}> + {' '} + Add{' '} + </div> + </div> </div> - </div>; + ); } -}
\ No newline at end of file +} |
