blob: a9d33f161e1f0ead0e851c72c931b1979f0b55ed (
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
|
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 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
onDismiss = (add: boolean) => {
LinkDescriptionPopup.descriptionPopup = false;
if (add) {
LinkManager.currentLink && (Doc.GetProto(LinkManager.currentLink).description = this.description);
}
}
@action
onClick = (e: PointerEvent) => {
if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
LinkDescriptionPopup.descriptionPopup = false;
TaskCompletionBox.taskCompleted = 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"
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>;
}
}
|
