blob: 3bb52d9fbd389470a823b92b4048c224cb72dea6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import React = require("react");
import { observer } from "mobx-react";
import "./LinkDescriptionPopup.scss";
import { observable, action } from "mobx";
import { EditableView } from "../EditableView";
import { LinkManager } from "../../util/LinkManager";
import { LinkCreatedBox } from "./LinkCreatedBox";
@observer
export class LinkDescriptionPopup extends React.Component<{}> {
@observable public static descriptionPopup: boolean = false;
@observable public static showDescriptions: string = "ON";
@observable public static popupX: number = 700;
@observable public static popupY: number = 350;
@observable description: string = "";
@observable popupRef = React.createRef<HTMLDivElement>();
@action
descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
this.description = e.currentTarget.value;
}
@action
setDescription = () => {
if (LinkManager.currentLink) {
LinkManager.currentLink.description = this.description;
}
LinkDescriptionPopup.descriptionPopup = false;
}
@action
onDismiss = () => {
LinkDescriptionPopup.descriptionPopup = false;
}
@action
onClick = (e: PointerEvent) => {
if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
LinkDescriptionPopup.descriptionPopup = false;
LinkCreatedBox.linkCreated = false;
}
}
@action
componentDidMount() {
document.addEventListener("pointerdown", this.onClick);
}
componentWillUnmount() {
document.removeEventListener("pointerdown", this.onClick);
}
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"
placeholder={"(optional) enter link label..."}
onChange={(e) => this.descriptionChanged(e)}>
</input>
<div className="linkDescriptionPopup-btn">
<div className="linkDescriptionPopup-btn-dismiss"
onPointerDown={this.onDismiss}> Dismiss </div>
<div className="linkDescriptionPopup-btn-add"
onPointerDown={this.setDescription}> Add </div>
</div>
</div>;
}
}
|
