blob: 2a96ce458617b72b98715a3078e19bbdc87afacb (
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
import { action, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { DocData } from '../../../fields/DocSymbols';
import { LinkManager } from '../../util/LinkManager';
import './LinkDescriptionPopup.scss';
import { TaskCompletionBox } from './TaskCompletedBox';
import { StrCast } from '../../../fields/Types';
@observer
export class LinkDescriptionPopup extends React.Component<{}> {
public static Instance: LinkDescriptionPopup;
@observable public display: boolean = false;
@observable public showDescriptions: string = 'ON';
@observable public popupX: number = 700;
@observable public popupY: number = 350;
@observable description: string = '';
@observable popupRef = React.createRef<HTMLDivElement>();
constructor(props: any) {
super(props);
makeObservable(this);
LinkDescriptionPopup.Instance = this;
}
@action
descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
this.description = e.currentTarget.value;
};
@action
onDismiss = (add: boolean) => {
this.display = false;
if (add) {
LinkManager.Instance.currentLink && (LinkManager.Instance.currentLink[DocData].link_description = this.description);
}
this.description = '';
};
@action
onClick = (e: PointerEvent) => {
if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
this.display = false;
this.description = '';
TaskCompletionBox.taskCompleted = false;
}
};
componentDidMount() {
document.addEventListener('pointerdown', this.onClick, true);
reaction(
() => this.display,
display => display && (this.description = StrCast(LinkManager.Instance.currentLink?.link_description))
);
}
componentWillUnmount() {
document.removeEventListener('pointerdown', this.onClick, true);
}
render() {
return !this.display ? null : (
<div
className="linkDescriptionPopup"
ref={this.popupRef}
style={{
left: this.popupX ? this.popupX : 700,
top: this.popupY ? this.popupY : 350,
}}>
<input
className="linkDescriptionPopup-input"
onKeyDown={e => {
e.key === 'Enter' && this.onDismiss(true);
e.stopPropagation();
}}
value={this.description}
placeholder={this.description || '(Optional) Enter link description...'}
onChange={e => this.descriptionChanged(e)}
/>
<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>
);
}
}
|
