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
94
|
import { InfoWindow } from '@react-google-maps/api';
import { action } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { emptyFunction, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { CollectionNoteTakingView } from '../../collections/CollectionNoteTakingView';
import { CollectionStackingView } from '../../collections/CollectionStackingView';
import { ViewBoxAnnotatableProps } from '../../DocComponent';
import { FieldViewProps } from '../FieldView';
import { FormattedTextBox } from '../formattedText/FormattedTextBox';
import './MapBox.scss';
interface MapBoxInfoWindowProps {
place: Doc;
renderDepth: number;
markerMap: { [id: string]: google.maps.Marker };
isAnyChildContentActive: () => boolean;
}
@observer
export class MapBoxInfoWindow extends React.Component<MapBoxInfoWindowProps & ViewBoxAnnotatableProps & FieldViewProps> {
@action
private handleInfoWindowClose = () => {
if (this.props.place.infoWindowOpen) {
this.props.place.infoWindowOpen = false;
}
this.props.place.infoWindowOpen = false;
};
addNoteClick = (e: React.PointerEvent) => {
setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => {
const newBox = Docs.Create.TextDocument('Note', { _autoHeight: true });
FormattedTextBox.SelectOnLoad = newBox[Id]; // track the new text box so we can give it a prop that tells it to focus itself when it's displayed
Doc.AddDocToList(this.props.place, 'data', newBox);
this._stack?.scrollToBottom();
e.stopPropagation();
e.preventDefault();
});
};
_stack: CollectionStackingView | CollectionNoteTakingView | null | undefined;
childFitWidth = (doc: Doc) => doc.type === DocumentType.RTF;
addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.AddDocToList(this.props.place, 'data', d), true as boolean);
removeDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((p, d) => p && Doc.RemoveDocFromList(this.props.place, 'data', d), true as boolean);
render() {
return (
<InfoWindow anchor={this.props.markerMap[this.props.place[Id]]} onCloseClick={this.handleInfoWindowClose}>
<div className="mapbox-infowindow">
<div style={{ width: this.props.PanelWidth(), height: this.props.PanelHeight() }}>
<CollectionStackingView
ref={r => (this._stack = r)}
{...this.props}
setContentView={emptyFunction}
Document={this.props.place}
DataDoc={undefined}
fieldKey="data"
NativeWidth={returnZero}
NativeHeight={returnZero}
docFilters={returnEmptyFilter}
setHeight={emptyFunction}
isAnnotationOverlay={false}
select={emptyFunction}
NativeDimScaling={returnOne}
isContentActive={returnTrue}
chromeHidden={true}
rootSelected={returnFalse}
childHideResizeHandles={returnTrue}
childHideDecorationTitle={returnTrue}
childFitWidth={this.childFitWidth}
// childDocumentsActive={returnFalse}
removeDocument={this.removeDoc}
addDocument={this.addDoc}
renderDepth={this.props.renderDepth + 1}
viewType={CollectionViewType.Stacking}
pointerEvents={returnAll}
/>
</div>
<hr />
<div
onPointerDown={this.addNoteClick}
onClick={e => {
e.stopPropagation();
e.preventDefault();
}}>
Add Note
</div>
</div>
</InfoWindow>
);
}
}
|
