blob: c45045a8a7dc4df267c7eac5d70a8f89b225eb67 (
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
|
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).link_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, true);
}
componentWillUnmount() {
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"
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>
);
}
}
|
