@opentripplanner/map-popup 3.1.2 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/index.js +20 -14
- package/esm/index.js.map +1 -1
- package/esm/styled.js +0 -21
- package/esm/styled.js.map +1 -1
- package/lib/index.d.ts +2 -4
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +19 -20
- package/lib/index.js.map +1 -1
- package/lib/styled.d.ts +0 -8
- package/lib/styled.d.ts.map +1 -1
- package/lib/styled.js +1 -33
- package/lib/styled.js.map +1 -1
- package/package.json +6 -4
- package/src/MapPopup.story.tsx +1 -11
- package/src/__snapshots__/MapPopup.story.tsx.snap +177 -222
- package/src/index.tsx +26 -20
- package/src/styled.ts +0 -29
- package/tsconfig.tsbuildinfo +1 -1
- package/esm/FocusTrapWrapper.js +0 -99
- package/esm/FocusTrapWrapper.js.map +0 -1
- package/lib/FocusTrapWrapper.d.ts +0 -26
- package/lib/FocusTrapWrapper.d.ts.map +0 -1
- package/lib/FocusTrapWrapper.js +0 -116
- package/lib/FocusTrapWrapper.js.map +0 -1
- package/src/FocusTrapWrapper.tsx +0 -95
|
@@ -1,250 +1,193 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Map Popup FloatingCarEntity smoke-test 1`] = `
|
|
4
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
4
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
5
|
+
<div id="focus-car_6861-popup-focus-trap"
|
|
6
|
+
role="presentation"
|
|
7
|
+
>
|
|
8
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
9
|
+
MILES Car: 0541
|
|
10
|
+
</header>
|
|
11
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
12
|
+
<strong>
|
|
13
|
+
Plan a trip:
|
|
14
|
+
</strong>
|
|
15
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
16
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
17
|
+
<svg viewbox="0 0 512 512"
|
|
18
|
+
height="0.9em"
|
|
19
|
+
width="0.9em"
|
|
20
|
+
aria-hidden="true"
|
|
21
|
+
focusable="false"
|
|
22
|
+
fill="currentColor"
|
|
23
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
25
25
|
>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
26
|
+
<path fill="currentColor"
|
|
27
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
28
|
+
>
|
|
29
|
+
</path>
|
|
30
|
+
</svg>
|
|
31
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
32
|
+
From here
|
|
33
|
+
</button>
|
|
34
|
+
</span>
|
|
35
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
36
|
+
<svg viewbox="0 0 384 512"
|
|
37
|
+
height="0.9em"
|
|
38
|
+
width="0.9em"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
focusable="false"
|
|
41
|
+
fill="currentColor"
|
|
42
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
43
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
44
44
|
>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
<path fill="currentColor"
|
|
46
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
47
|
+
>
|
|
48
|
+
</path>
|
|
49
|
+
</svg>
|
|
50
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
51
|
+
To here
|
|
52
|
+
</button>
|
|
53
|
+
</span>
|
|
50
54
|
</span>
|
|
51
|
-
</
|
|
52
|
-
</
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
53
57
|
</div>
|
|
54
58
|
`;
|
|
55
59
|
|
|
56
60
|
exports[`Map Popup FloatingVehicleEntity smoke-test 1`] = `
|
|
57
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
61
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
62
|
+
<div id="focus-bike_6861-popup-focus-trap"
|
|
63
|
+
role="presentation"
|
|
64
|
+
>
|
|
65
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
66
|
+
BIKETOWN Free-floating bike: 0541
|
|
67
|
+
</header>
|
|
68
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
69
|
+
<strong>
|
|
70
|
+
Plan a trip:
|
|
71
|
+
</strong>
|
|
72
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
73
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
74
|
+
<svg viewbox="0 0 512 512"
|
|
75
|
+
height="0.9em"
|
|
76
|
+
width="0.9em"
|
|
77
|
+
aria-hidden="true"
|
|
78
|
+
focusable="false"
|
|
79
|
+
fill="currentColor"
|
|
80
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
81
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
78
82
|
>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
83
|
+
<path fill="currentColor"
|
|
84
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
85
|
+
>
|
|
86
|
+
</path>
|
|
87
|
+
</svg>
|
|
88
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
89
|
+
From here
|
|
90
|
+
</button>
|
|
91
|
+
</span>
|
|
92
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
93
|
+
<svg viewbox="0 0 384 512"
|
|
94
|
+
height="0.9em"
|
|
95
|
+
width="0.9em"
|
|
96
|
+
aria-hidden="true"
|
|
97
|
+
focusable="false"
|
|
98
|
+
fill="currentColor"
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
97
101
|
>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
<path fill="currentColor"
|
|
103
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
104
|
+
>
|
|
105
|
+
</path>
|
|
106
|
+
</svg>
|
|
107
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
108
|
+
To here
|
|
109
|
+
</button>
|
|
110
|
+
</span>
|
|
103
111
|
</span>
|
|
104
|
-
</
|
|
105
|
-
</
|
|
112
|
+
</p>
|
|
113
|
+
</div>
|
|
106
114
|
</div>
|
|
107
115
|
`;
|
|
108
116
|
|
|
109
117
|
exports[`Map Popup StationEntity smoke-test 1`] = `
|
|
110
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
118
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
119
|
+
<div id="focus-hub_1580-popup-focus-trap"
|
|
120
|
+
role="presentation"
|
|
121
|
+
>
|
|
122
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
123
|
+
BIKETOWN SW Morrison at 18th
|
|
124
|
+
</header>
|
|
125
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
126
|
+
<div>
|
|
127
|
+
Available bikes: 6
|
|
128
|
+
</div>
|
|
129
|
+
<div>
|
|
130
|
+
Available docks: 11
|
|
131
|
+
</div>
|
|
132
|
+
</p>
|
|
133
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
134
|
+
<strong>
|
|
135
|
+
Plan a trip:
|
|
136
|
+
</strong>
|
|
137
|
+
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
138
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
139
|
+
<svg viewbox="0 0 512 512"
|
|
140
|
+
height="0.9em"
|
|
141
|
+
width="0.9em"
|
|
142
|
+
aria-hidden="true"
|
|
143
|
+
focusable="false"
|
|
144
|
+
fill="currentColor"
|
|
145
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
146
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
139
147
|
>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
148
|
+
<path fill="currentColor"
|
|
149
|
+
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
150
|
+
>
|
|
151
|
+
</path>
|
|
152
|
+
</svg>
|
|
153
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
154
|
+
From here
|
|
155
|
+
</button>
|
|
156
|
+
</span>
|
|
157
|
+
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
158
|
+
<svg viewbox="0 0 384 512"
|
|
159
|
+
height="0.9em"
|
|
160
|
+
width="0.9em"
|
|
161
|
+
aria-hidden="true"
|
|
162
|
+
focusable="false"
|
|
163
|
+
fill="currentColor"
|
|
164
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
165
|
+
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
158
166
|
>
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
167
|
+
<path fill="currentColor"
|
|
168
|
+
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
169
|
+
>
|
|
170
|
+
</path>
|
|
171
|
+
</svg>
|
|
172
|
+
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
173
|
+
To here
|
|
174
|
+
</button>
|
|
175
|
+
</span>
|
|
164
176
|
</span>
|
|
165
|
-
</
|
|
166
|
-
</
|
|
177
|
+
</p>
|
|
178
|
+
</div>
|
|
167
179
|
</div>
|
|
168
180
|
`;
|
|
169
181
|
|
|
170
182
|
exports[`Map Popup StopEntity smoke-test 1`] = `
|
|
171
|
-
<div class="styled__MapOverlayPopup-sc-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
<strong>
|
|
177
|
-
Stop ID: 9526
|
|
178
|
-
</strong>
|
|
179
|
-
<button class="styled__ViewStopButton-sc-12v7ov3-0 jdXQjY">
|
|
180
|
-
Stop Viewer
|
|
181
|
-
</button>
|
|
182
|
-
</p>
|
|
183
|
-
<p class="styled__PopupRow-sc-12v7ov3-3 bGmFCM">
|
|
184
|
-
<strong>
|
|
185
|
-
Plan a trip:
|
|
186
|
-
</strong>
|
|
187
|
-
<span class="styled__FromToPickerSpan-sc-vb4790-1 hmUShj">
|
|
188
|
-
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
189
|
-
<svg viewbox="0 0 512 512"
|
|
190
|
-
height="0.9em"
|
|
191
|
-
width="0.9em"
|
|
192
|
-
aria-hidden="true"
|
|
193
|
-
focusable="false"
|
|
194
|
-
fill="currentColor"
|
|
195
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
196
|
-
class="StyledIconBase-ea9ulj-0 hPhvO styled__FromIcon-sc-n5xcvc-0 jTjMOf"
|
|
197
|
-
>
|
|
198
|
-
<path fill="currentColor"
|
|
199
|
-
d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"
|
|
200
|
-
>
|
|
201
|
-
</path>
|
|
202
|
-
</svg>
|
|
203
|
-
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
204
|
-
From here
|
|
205
|
-
</button>
|
|
206
|
-
</span>
|
|
207
|
-
<span class="styled__LocationPickerSpan-sc-vb4790-0 gwsIFy">
|
|
208
|
-
<svg viewbox="0 0 384 512"
|
|
209
|
-
height="0.9em"
|
|
210
|
-
width="0.9em"
|
|
211
|
-
aria-hidden="true"
|
|
212
|
-
focusable="false"
|
|
213
|
-
fill="currentColor"
|
|
214
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
215
|
-
class="StyledIconBase-ea9ulj-0 hPhvO styled__ToIcon-sc-n5xcvc-2 ipFnZE"
|
|
216
|
-
>
|
|
217
|
-
<path fill="currentColor"
|
|
218
|
-
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"
|
|
219
|
-
>
|
|
220
|
-
</path>
|
|
221
|
-
</svg>
|
|
222
|
-
<button class="styled__Button-sc-vb4790-2 hNNoVB">
|
|
223
|
-
To here
|
|
224
|
-
</button>
|
|
225
|
-
</span>
|
|
226
|
-
</span>
|
|
227
|
-
</p>
|
|
228
|
-
</div>
|
|
229
|
-
`;
|
|
230
|
-
|
|
231
|
-
exports[`Map Popup StopEntityNoHandlers smoke-test 1`] = `
|
|
232
|
-
<div class="styled__MapOverlayPopup-sc-12v7ov3-2 hLIcgt">
|
|
233
|
-
<header class="styled__PopupTitle-sc-12v7ov3-4 jMeCoZ">
|
|
234
|
-
W Burnside & SW 2nd
|
|
235
|
-
</header>
|
|
236
|
-
</div>
|
|
237
|
-
`;
|
|
238
|
-
|
|
239
|
-
exports[`Map Popup StopEntityWithFocusTrap smoke-test 1`] = `
|
|
240
|
-
<div id="storybook-stop-popup-focus-trap"
|
|
241
|
-
role="presentation"
|
|
242
|
-
>
|
|
243
|
-
<div class="styled__MapOverlayPopup-sc-12v7ov3-2 hLIcgt">
|
|
244
|
-
<header class="styled__PopupTitle-sc-12v7ov3-4 jMeCoZ">
|
|
183
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
184
|
+
<div id="focus-9526-popup-focus-trap"
|
|
185
|
+
role="presentation"
|
|
186
|
+
>
|
|
187
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
245
188
|
W Burnside & SW 2nd
|
|
246
189
|
</header>
|
|
247
|
-
<p class="styled__PopupRow-sc-
|
|
190
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
248
191
|
<strong>
|
|
249
192
|
Stop ID: 9526
|
|
250
193
|
</strong>
|
|
@@ -252,7 +195,7 @@ exports[`Map Popup StopEntityWithFocusTrap smoke-test 1`] = `
|
|
|
252
195
|
Stop Viewer
|
|
253
196
|
</button>
|
|
254
197
|
</p>
|
|
255
|
-
<p class="styled__PopupRow-sc-
|
|
198
|
+
<p class="styled__PopupRow-sc-12kjso7-2 gahTQU">
|
|
256
199
|
<strong>
|
|
257
200
|
Plan a trip:
|
|
258
201
|
</strong>
|
|
@@ -300,3 +243,15 @@ exports[`Map Popup StopEntityWithFocusTrap smoke-test 1`] = `
|
|
|
300
243
|
</div>
|
|
301
244
|
</div>
|
|
302
245
|
`;
|
|
246
|
+
|
|
247
|
+
exports[`Map Popup StopEntityNoHandlers smoke-test 1`] = `
|
|
248
|
+
<div class="styled__MapOverlayPopup-sc-12kjso7-1 idXkMr">
|
|
249
|
+
<div id="focus-9526-popup-focus-trap"
|
|
250
|
+
role="presentation"
|
|
251
|
+
>
|
|
252
|
+
<header class="styled__PopupTitle-sc-12kjso7-3 cjkEhb">
|
|
253
|
+
W Burnside & SW 2nd
|
|
254
|
+
</header>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
`;
|
package/src/index.tsx
CHANGED
|
@@ -5,10 +5,12 @@ import coreUtils from "@opentripplanner/core-utils";
|
|
|
5
5
|
// eslint-disable-next-line prettier/prettier
|
|
6
6
|
import type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from "@opentripplanner/types";
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { FocusTrapWrapper } from "@opentripplanner/building-blocks";
|
|
9
9
|
import { flatten } from "flat";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
10
|
+
import { FormattedMessage, useIntl } from "react-intl";
|
|
11
|
+
import { Styled } from "@opentripplanner/base-map";
|
|
12
|
+
|
|
13
|
+
import { ViewStopButton } from "./styled";
|
|
12
14
|
|
|
13
15
|
// Load the default messages.
|
|
14
16
|
import defaultEnglishMessages from "../i18n/en-US.yml";
|
|
@@ -33,7 +35,7 @@ const generateLocation = (entity: Entity, name: string) => {
|
|
|
33
35
|
|
|
34
36
|
const StationHubDetails = ({ station }: { station: Station }) => {
|
|
35
37
|
return (
|
|
36
|
-
<
|
|
38
|
+
<Styled.PopupRow>
|
|
37
39
|
<div>
|
|
38
40
|
<FormattedMessage
|
|
39
41
|
defaultMessage={
|
|
@@ -54,13 +56,13 @@ const StationHubDetails = ({ station }: { station: Station }) => {
|
|
|
54
56
|
values={{ value: station.spacesAvailable }}
|
|
55
57
|
/>
|
|
56
58
|
</div>
|
|
57
|
-
</
|
|
59
|
+
</Styled.PopupRow>
|
|
58
60
|
)
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {
|
|
62
64
|
return (
|
|
63
|
-
<
|
|
65
|
+
<Styled.PopupRow>
|
|
64
66
|
<strong>
|
|
65
67
|
<FormattedMessage
|
|
66
68
|
defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
|
|
@@ -71,19 +73,20 @@ const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => v
|
|
|
71
73
|
}}
|
|
72
74
|
/>
|
|
73
75
|
</strong>
|
|
74
|
-
<
|
|
76
|
+
<ViewStopButton onClick={setViewedStop}>
|
|
75
77
|
<FormattedMessage
|
|
76
78
|
defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
|
|
77
79
|
description="Text for link that opens the stop viewer"
|
|
78
80
|
id="otpUi.MapPopup.stopViewer"
|
|
79
81
|
/>
|
|
80
|
-
</
|
|
81
|
-
</
|
|
82
|
+
</ViewStopButton>
|
|
83
|
+
</Styled.PopupRow>
|
|
82
84
|
)
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
type Entity = Stop | Station
|
|
86
88
|
type Props = {
|
|
89
|
+
closePopup?: (arg?: any) => void
|
|
87
90
|
configCompanies?: ConfiguredCompany[];
|
|
88
91
|
entity: Entity
|
|
89
92
|
getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
|
|
@@ -98,7 +101,7 @@ function entityIsStation(entity: Entity): entity is Station {
|
|
|
98
101
|
/**
|
|
99
102
|
* Renders a map popup for a stop, scooter, or shared bike
|
|
100
103
|
*/
|
|
101
|
-
export function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
|
|
104
|
+
export function MapPopup({ closePopup = null, configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
|
|
102
105
|
const intl = useIntl()
|
|
103
106
|
if (!entity) return <></>
|
|
104
107
|
|
|
@@ -111,16 +114,20 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
|
|
|
111
114
|
const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
|
|
112
115
|
const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
|
|
113
116
|
|
|
117
|
+
// Double quotes make the query invalid, so remove them from the id just in case
|
|
118
|
+
const id = `focus-${entity.id}-popup`.replace(/"/g, "")
|
|
119
|
+
|
|
114
120
|
return (
|
|
115
|
-
<
|
|
116
|
-
<
|
|
121
|
+
<Styled.MapOverlayPopup>
|
|
122
|
+
<FocusTrapWrapper closePopup={closePopup} id={id}>
|
|
123
|
+
<Styled.PopupTitle>
|
|
117
124
|
<FormattedMessage
|
|
118
125
|
defaultMessage={defaultMessages["otpUi.MapPopup.popupTitle"]}
|
|
119
126
|
description="Text for title of the popup, contains an optional company name"
|
|
120
127
|
id="otpUi.MapPopup.popupTitle"
|
|
121
128
|
values={{ name, stationNetwork }}
|
|
122
129
|
/>
|
|
123
|
-
</
|
|
130
|
+
</Styled.PopupTitle>
|
|
124
131
|
{/* render dock info if it is available */}
|
|
125
132
|
{entityIsStationHub && <StationHubDetails station={entity} />}
|
|
126
133
|
|
|
@@ -134,19 +141,18 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
|
|
|
134
141
|
|
|
135
142
|
{/* The "Set as [from/to]" ButtonGroup */}
|
|
136
143
|
{setLocation && (
|
|
137
|
-
<
|
|
144
|
+
<Styled.PopupRow>
|
|
138
145
|
<FromToLocationPicker
|
|
139
146
|
label
|
|
140
147
|
location={generateLocation(entity, name)}
|
|
141
148
|
setLocation={setLocation}
|
|
142
149
|
/>
|
|
143
|
-
</
|
|
150
|
+
</Styled.PopupRow>
|
|
144
151
|
)}
|
|
145
|
-
|
|
152
|
+
</FocusTrapWrapper>
|
|
153
|
+
|
|
154
|
+
</Styled.MapOverlayPopup>
|
|
146
155
|
);
|
|
147
156
|
}
|
|
148
157
|
|
|
149
|
-
export default MapPopup;
|
|
150
|
-
|
|
151
|
-
// Rename styled components for export.
|
|
152
|
-
export { S as Styled, FocusTrapWrapper };
|
|
158
|
+
export default MapPopup;
|
package/src/styled.ts
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
|
|
3
|
-
import { Popup as MapGlPopup } from "react-map-gl";
|
|
4
|
-
|
|
5
3
|
/* eslint-disable-next-line import/prefer-default-export */
|
|
6
4
|
export const ViewStopButton = styled.button`
|
|
7
5
|
background: none;
|
|
@@ -14,30 +12,3 @@ export const ViewStopButton = styled.button`
|
|
|
14
12
|
margin-left: 5px;
|
|
15
13
|
padding-top: 0;
|
|
16
14
|
`;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Adds a box shadow and tweaks border radius to make popups easier to read.
|
|
20
|
-
*/
|
|
21
|
-
export const Popup = styled(MapGlPopup)`
|
|
22
|
-
& > .maplibregl-popup-content,
|
|
23
|
-
& > .mapboxgl-popup-content {
|
|
24
|
-
border-radius: 10px;
|
|
25
|
-
box-shadow: 0 3px 14px 4px rgb(0 0 0 / 20%);
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
|
-
|
|
29
|
-
export const MapOverlayPopup = styled.div`
|
|
30
|
-
font-size: 12px;
|
|
31
|
-
line-height: 1.5;
|
|
32
|
-
min-width: 250px;
|
|
33
|
-
`;
|
|
34
|
-
|
|
35
|
-
export const PopupRow = styled.p`
|
|
36
|
-
margin-top: 6px;
|
|
37
|
-
`;
|
|
38
|
-
|
|
39
|
-
export const PopupTitle = styled.header`
|
|
40
|
-
font-size: 18px;
|
|
41
|
-
font-weight: 500;
|
|
42
|
-
margin-bottom: 6px;
|
|
43
|
-
`;
|