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
|
import { InfoWindow } from '@react-google-maps/api';
import { action, computed } from 'mobx';
import { observer } from "mobx-react";
import * as React from "react";
import { Doc } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
import { emptyFunction, OmitKeys, returnAll, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents } from '../../../../Utils';
import { Docs } from '../../../documents/Documents';
import { DocumentType } from '../../../documents/DocumentTypes';
import { CollectionStackingView } from '../../collections/CollectionStackingView';
import { CollectionViewType } from '../../collections/CollectionView';
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 | 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}
{...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
Document={this.props.place}
DataDoc={undefined}
fieldKey="data"
CollectionView={undefined}
NativeWidth={returnZero}
NativeHeight={returnZero}
docFilters={returnEmptyFilter}
setHeight={emptyFunction}
isAnnotationOverlay={false}
select={emptyFunction}
scaling={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>;
}
}
|
