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, observable } from 'mobx';
import { observer } from 'mobx-react';
import { EditorView } from 'prosemirror-view';
import * as React from 'react';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
import { Doc } from '../../../fields/Doc';
import { Transform } from '../../util/Transform';
import { undoBatch } from '../../util/UndoManager';
import { DefaultStyleProvider } from '../StyleProvider';
import { OpenWhere, returnEmptyDocViewList } from '../nodes/DocumentView';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { SearchBox } from '../search/SearchBox';
import './LinkPopup.scss';
interface LinkPopupProps {
linkFrom?: () => Doc | undefined;
linkCreateAnchor?: () => Doc | undefined;
linkCreated?: (link: Doc) => void;
// groupType: string;
// linkDoc: Doc;
// docView: DocumentView;
// sourceDoc: Doc;
}
/**
* Popup component for creating links from text to Dash documents
*/
@observer
export class LinkPopup extends React.Component<LinkPopupProps> {
@observable private linkURL: string = '';
@observable public view?: EditorView = undefined;
// TODO: should check for valid URL
@undoBatch
makeLinkToURL = (target: string, lcoation: string) => ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, OpenWhere.addRight, target, target);
@action
onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => (this.linkURL = e.target.value);
getPWidth = () => 500;
getPHeight = () => 500;
render() {
const linkDoc = this.props.linkFrom ? this.props.linkFrom : undefined;
return (
<div className="linkPopup-container">
{/* <div className="linkPopup-url-container">
<input autoComplete="off" type="text" value={this.linkURL} placeholder="Enter URL..." onChange={this.onLinkChange} />
<button onPointerDown={e => this.makeLinkToURL(this.linkURL, "add:right")}
style={{ display: "block", margin: "10px auto", }}>Apply hyperlink</button>
</div>
<div className="divider">
<div className="line"></div>
<p className="divider-text">or</p>
</div> */}
<div className="linkPopup-document-search-container">
{/* <i></i>
<input defaultValue={""} autoComplete="off" type="text" placeholder="Search for Document..." id="search-input"
className="linkPopup-searchBox searchBox-input" /> */}
<SearchBox
Document={Doc.MySearcher}
docViewPath={returnEmptyDocViewList}
linkFrom={linkDoc}
linkCreateAnchor={this.props.linkCreateAnchor}
linkSearch={true}
linkCreated={this.props.linkCreated}
fieldKey="data"
isSelected={returnTrue}
isContentActive={returnTrue}
select={returnTrue}
addDocument={undefined}
addDocTab={returnTrue}
pinToPres={emptyFunction}
rootSelected={returnFalse}
styleProvider={DefaultStyleProvider}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
PanelWidth={this.getPWidth}
PanelHeight={this.getPHeight}
renderDepth={0}
focus={emptyFunction}
whenChildContentsActiveChanged={emptyFunction}
childFilters={returnEmptyFilter}
childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
/>
</div>
</div>
);
}
}
|