@bloom-housing/ui-components 13.0.1 → 13.0.3
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/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/index.ts +0 -1
- package/package.json +5 -7
- package/src/global/tables.scss +12 -11
- package/src/headers/SiteHeader.scss +7 -7
- package/src/headers/StepHeader.scss +4 -3
- package/dist/__tests__/page_components/ListingMap.test.d.ts +0 -1
- package/dist/__tests__/page_components/ListingMap.test.js +0 -14
- package/dist/__tests__/page_components/ListingMap.test.js.map +0 -1
- package/dist/src/page_components/listing/ListingMap.d.ts +0 -24
- package/dist/src/page_components/listing/ListingMap.js +0 -96
- package/dist/src/page_components/listing/ListingMap.js.map +0 -1
- package/dist/src/page_components/listing/ListingMap.stories.d.ts +0 -6
- package/dist/src/page_components/listing/ListingMap.stories.js +0 -11
- package/dist/src/page_components/listing/ListingMap.stories.js.map +0 -1
- package/src/page_components/listing/ListingMap.scss +0 -40
- package/src/page_components/listing/ListingMap.stories.tsx +0 -14
- package/src/page_components/listing/ListingMap.tsx +0 -153
package/dist/index.d.ts
CHANGED
|
@@ -88,7 +88,6 @@ export * from "./src/page_components/listing/ContentAccordion";
|
|
|
88
88
|
export * from "./src/page_components/listing/ListingCard";
|
|
89
89
|
export * from "./src/page_components/listing/ListingDetailHeader";
|
|
90
90
|
export * from "./src/page_components/listing/ListingDetails";
|
|
91
|
-
export * from "./src/page_components/listing/ListingMap";
|
|
92
91
|
export * from "./src/page_components/listing/ListingsGroup";
|
|
93
92
|
export * from "./src/page_components/listing/listing_sidebar/GetApplication";
|
|
94
93
|
export * from "./src/page_components/listing/listing_sidebar/Contact";
|
package/dist/index.js
CHANGED
|
@@ -102,7 +102,6 @@ export * from "./src/page_components/listing/ContentAccordion";
|
|
|
102
102
|
export * from "./src/page_components/listing/ListingCard";
|
|
103
103
|
export * from "./src/page_components/listing/ListingDetailHeader";
|
|
104
104
|
export * from "./src/page_components/listing/ListingDetails";
|
|
105
|
-
export * from "./src/page_components/listing/ListingMap";
|
|
106
105
|
export * from "./src/page_components/listing/ListingsGroup";
|
|
107
106
|
export * from "./src/page_components/listing/listing_sidebar/GetApplication";
|
|
108
107
|
export * from "./src/page_components/listing/listing_sidebar/Contact";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,qBAAqB,CAAA;AAEnC,YAAY;AACZ,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AAEpC,cAAc;AACd,cAAc,cAAc,CAAA;AAE5B,aAAa;AACb,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AAExC,WAAW;AACX,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AAErC,YAAY;AACZ,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oCAAoC,CAAA;AAElD,aAAa;AACb,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAE1C,aAAa;AACb,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2CAA2C,CAAA;AACzD,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AAExC,WAAW;AACX,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAEhC,WAAW;AACX,cAAc,6BAA6B,CAAA;AAE3C,gBAAgB;AAChB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AAExC,mBAAmB;AACnB,cAAc,8BAA8B,CAAA;AAC5C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uCAAuC,CAAA;AACrD,cAAc,kCAAkC,CAAA;AAChD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,mCAAmC,CAAA;AACjD,cAAc,gCAAgC,CAAA;AAE9C,cAAc;AACd,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAE7C,qBAAqB;AACrB,cAAc,2CAA2C,CAAA;AACzD,cAAc,8CAA8C,CAAA;AAC5D,cAAc,gDAAgD,CAAA;AAC9D,cAAc,2CAA2C,CAAA;AACzD,cAAc,mDAAmD,CAAA;AACjE,cAAc,8CAA8C,CAAA;AAC5D,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|
package/index.ts
CHANGED
|
@@ -115,7 +115,6 @@ export * from "./src/page_components/listing/ContentAccordion"
|
|
|
115
115
|
export * from "./src/page_components/listing/ListingCard"
|
|
116
116
|
export * from "./src/page_components/listing/ListingDetailHeader"
|
|
117
117
|
export * from "./src/page_components/listing/ListingDetails"
|
|
118
|
-
export * from "./src/page_components/listing/ListingMap"
|
|
119
118
|
export * from "./src/page_components/listing/ListingsGroup"
|
|
120
119
|
export * from "./src/page_components/listing/listing_sidebar/GetApplication"
|
|
121
120
|
export * from "./src/page_components/listing/listing_sidebar/Contact"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bloom-housing/ui-components",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.3",
|
|
4
4
|
"author": "Sean Albert <sean.albert@exygy.com>",
|
|
5
5
|
"description": "Shared user interface components for Bloom affordable housing system",
|
|
6
6
|
"homepage": "https://github.com/bloom-housing/ui-components",
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"@storybook/addon-mdx-gfm": "8.6.14",
|
|
54
54
|
"@storybook/addon-styling-webpack": "^2.0.0",
|
|
55
55
|
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
|
|
56
|
+
"@storybook/blocks": "8.6.14",
|
|
56
57
|
"@storybook/components": "8.6.14",
|
|
57
58
|
"@storybook/core-events": "8.6.14",
|
|
58
59
|
"@storybook/node-logger": "8.6.14",
|
|
@@ -72,7 +73,6 @@
|
|
|
72
73
|
"@types/react": "^19.2.0",
|
|
73
74
|
"@types/react-beautiful-dnd": "^13.1.1",
|
|
74
75
|
"@types/react-dom": "^19.2.0",
|
|
75
|
-
"@types/react-map-gl": "^5.2.10",
|
|
76
76
|
"@types/react-tabs": "^2.3.2",
|
|
77
77
|
"@types/react-test-renderer": "^18.0.0",
|
|
78
78
|
"@types/react-text-mask": "^5.4.14",
|
|
@@ -125,8 +125,7 @@
|
|
|
125
125
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
|
126
126
|
"@fortawesome/free-regular-svg-icons": "^6.1.1",
|
|
127
127
|
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
|
128
|
-
"@fortawesome/react-fontawesome": "
|
|
129
|
-
"@mapbox/mapbox-sdk": "^0.13.0",
|
|
128
|
+
"@fortawesome/react-fontawesome": "3.1.0",
|
|
130
129
|
"ag-grid-community": "^26.0.0",
|
|
131
130
|
"ag-grid-react": "^26.0.0",
|
|
132
131
|
"aria-autocomplete": "^1.4.0",
|
|
@@ -135,14 +134,13 @@
|
|
|
135
134
|
"markdown-to-jsx": "7.1.8",
|
|
136
135
|
"nanoid": "^3.1.12",
|
|
137
136
|
"node-polyglot": "^2.4.0",
|
|
138
|
-
"react": "
|
|
137
|
+
"react": "19.2.3",
|
|
139
138
|
"react-accessible-accordion": "5.0.0",
|
|
140
139
|
"react-beautiful-dnd": "^13.1.1",
|
|
141
|
-
"react-dom": "
|
|
140
|
+
"react-dom": "19.2.3",
|
|
142
141
|
"react-dropzone": "^11.3.2",
|
|
143
142
|
"react-focus-lock": "^2.9.4",
|
|
144
143
|
"react-hook-form": "^6.15.5",
|
|
145
|
-
"react-map-gl": "^6.1.16",
|
|
146
144
|
"react-media": "^1.10.0",
|
|
147
145
|
"react-remove-scroll": "2.5.4",
|
|
148
146
|
"react-tabs": "^6.0.0",
|
package/src/global/tables.scss
CHANGED
|
@@ -155,6 +155,9 @@ table {
|
|
|
155
155
|
@apply text-gray-700;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
+
width: 100%;
|
|
159
|
+
@apply text-right;
|
|
160
|
+
@apply pl-2;
|
|
158
161
|
@screen md {
|
|
159
162
|
@apply flex;
|
|
160
163
|
@apply flex-col;
|
|
@@ -162,9 +165,6 @@ table {
|
|
|
162
165
|
@apply text-left;
|
|
163
166
|
@apply w-full;
|
|
164
167
|
}
|
|
165
|
-
width: 100%;
|
|
166
|
-
@apply text-right;
|
|
167
|
-
@apply pl-2;
|
|
168
168
|
|
|
169
169
|
.stacked-table-cell {
|
|
170
170
|
@apply font-semibold;
|
|
@@ -193,10 +193,10 @@ table {
|
|
|
193
193
|
@apply px-0;
|
|
194
194
|
@apply text-base;
|
|
195
195
|
@apply text-gray-700;
|
|
196
|
+
@apply py-2;
|
|
196
197
|
@screen md {
|
|
197
198
|
@apply py-3;
|
|
198
199
|
}
|
|
199
|
-
@apply py-2;
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
thead {
|
|
@@ -208,10 +208,10 @@ table {
|
|
|
208
208
|
.stacked-table-cell-container {
|
|
209
209
|
@apply text-right;
|
|
210
210
|
@apply pr-0;
|
|
211
|
+
width: 100%;
|
|
211
212
|
@screen md {
|
|
212
213
|
width: auto;
|
|
213
214
|
}
|
|
214
|
-
width: 100%;
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
}
|
|
@@ -238,12 +238,13 @@ table {
|
|
|
238
238
|
@apply px-0;
|
|
239
239
|
@apply pb-0;
|
|
240
240
|
font-size: var(--bloom-font-size-sm);
|
|
241
|
+
@apply pt-0;
|
|
242
|
+
@apply pb-2;
|
|
241
243
|
@screen md {
|
|
242
244
|
padding-top: var(--bloom-s2);
|
|
243
245
|
padding-bottom: var(--bloom-s2);
|
|
244
246
|
}
|
|
245
|
-
|
|
246
|
-
@apply pb-2;
|
|
247
|
+
|
|
247
248
|
letter-spacing: normal;
|
|
248
249
|
}
|
|
249
250
|
|
|
@@ -295,12 +296,12 @@ table {
|
|
|
295
296
|
@apply py-0;
|
|
296
297
|
}
|
|
297
298
|
.stacked-table-cell {
|
|
298
|
-
@screen md {
|
|
299
|
-
@apply text-base;
|
|
300
|
-
}
|
|
301
299
|
@apply text-xs;
|
|
302
300
|
@apply text-black;
|
|
303
301
|
@apply font-normal;
|
|
302
|
+
@screen md {
|
|
303
|
+
@apply text-base;
|
|
304
|
+
}
|
|
304
305
|
}
|
|
305
306
|
.stacked-table-subtext {
|
|
306
307
|
@apply pl-0;
|
|
@@ -318,10 +319,10 @@ table {
|
|
|
318
319
|
tr {
|
|
319
320
|
td:first-child {
|
|
320
321
|
.stacked-table-cell:first-child {
|
|
322
|
+
display: none;
|
|
321
323
|
@screen md {
|
|
322
324
|
display: block;
|
|
323
325
|
}
|
|
324
|
-
display: none;
|
|
325
326
|
}
|
|
326
327
|
}
|
|
327
328
|
}
|
|
@@ -253,6 +253,10 @@
|
|
|
253
253
|
max-width: var(--logo-max-width);
|
|
254
254
|
box-shadow: var(--logo-box-shadow);
|
|
255
255
|
|
|
256
|
+
background-color: var(--logo-background-color);
|
|
257
|
+
border-bottom: 0;
|
|
258
|
+
display: flex;
|
|
259
|
+
|
|
256
260
|
@media (min-width: $screen-md) {
|
|
257
261
|
height: var(--logo-desktop-height);
|
|
258
262
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
|
|
@@ -268,10 +272,6 @@
|
|
|
268
272
|
@media (min-width: $screen-print) {
|
|
269
273
|
margin-top: 0;
|
|
270
274
|
}
|
|
271
|
-
|
|
272
|
-
background-color: var(--logo-background-color);
|
|
273
|
-
border-bottom: 0;
|
|
274
|
-
display: flex;
|
|
275
275
|
}
|
|
276
276
|
|
|
277
277
|
@media print {
|
|
@@ -552,14 +552,14 @@
|
|
|
552
552
|
.site-header__notice {
|
|
553
553
|
width: 100%;
|
|
554
554
|
background-color: var(--bloom-color-primary);
|
|
555
|
+
text-align: left;
|
|
556
|
+
color: var(--bloom-color-white);
|
|
557
|
+
display: var(--notice-display-mobile);
|
|
555
558
|
|
|
556
559
|
@media (min-width: $screen-md) {
|
|
557
560
|
text-align: right;
|
|
558
561
|
display: var(--notice-display-desktop);
|
|
559
562
|
}
|
|
560
|
-
text-align: left;
|
|
561
|
-
color: var(--bloom-color-white);
|
|
562
|
-
display: var(--notice-display-mobile);
|
|
563
563
|
}
|
|
564
564
|
|
|
565
565
|
.site-header__notice-text {
|
|
@@ -28,13 +28,14 @@
|
|
|
28
28
|
color: var(--number-color);
|
|
29
29
|
min-width: var(--circle-mobile-size);
|
|
30
30
|
height: var(--circle-mobile-size);
|
|
31
|
+
padding: 0rem var(--circle-x-padding);
|
|
32
|
+
margin-inline-end: var(--title-spacing);
|
|
33
|
+
border-radius: 50%;
|
|
34
|
+
|
|
31
35
|
@media (min-width: $screen-md) {
|
|
32
36
|
min-width: var(--circle-desktop-size);
|
|
33
37
|
height: var(--circle-desktop-size);
|
|
34
38
|
}
|
|
35
|
-
padding: 0rem var(--circle-x-padding);
|
|
36
|
-
margin-inline-end: var(--title-spacing);
|
|
37
|
-
border-radius: 50%;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.step-header__title {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { render, cleanup } from "@testing-library/react";
|
|
3
|
-
import { ListingMap } from "../../src/page_components/listing/ListingMap";
|
|
4
|
-
import Archer from "../fixtures/archer.json";
|
|
5
|
-
afterEach(cleanup);
|
|
6
|
-
describe("<ListingMap>", function () {
|
|
7
|
-
it("renders without error", function () {
|
|
8
|
-
var listing = Object.assign({}, Archer);
|
|
9
|
-
var getByText = render(React.createElement(ListingMap, { address: listing.buildingAddress, listingName: listing.name })).getByText;
|
|
10
|
-
expect(getByText(listing.name)).toBeTruthy();
|
|
11
|
-
expect(getByText(listing.buildingAddress.street, { exact: false })).toBeTruthy();
|
|
12
|
-
});
|
|
13
|
-
});
|
|
14
|
-
//# sourceMappingURL=ListingMap.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListingMap.test.js","sourceRoot":"","sources":["../../../__tests__/page_components/ListingMap.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAA;AACzE,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAE5C,SAAS,CAAC,OAAO,CAAC,CAAA;AAElB,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,uBAAuB,EAAE;QAC1B,IAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAQ,CAAA;QACxC,IAAA,SAAS,GAAK,MAAM,CAC1B,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,GAAI,CAC5E,UAFgB,CAEhB;QACD,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;QAC5C,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAA;IAClF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import "mapbox-gl/dist/mapbox-gl.css";
|
|
3
|
-
import "./ListingMap.scss";
|
|
4
|
-
import { Address } from "../../helpers/MultiLineAddress";
|
|
5
|
-
export interface ListingMapProps {
|
|
6
|
-
address?: Address;
|
|
7
|
-
listingName?: string;
|
|
8
|
-
enableCustomPinPositioning?: boolean;
|
|
9
|
-
setCustomMapPositionChosen?: (customMapPosition: boolean) => void;
|
|
10
|
-
setLatLong?: (latLong: LatitudeLongitude) => void;
|
|
11
|
-
}
|
|
12
|
-
export interface LatitudeLongitude {
|
|
13
|
-
latitude: number;
|
|
14
|
-
longitude: number;
|
|
15
|
-
}
|
|
16
|
-
export interface Viewport {
|
|
17
|
-
width: string | number;
|
|
18
|
-
height: string | number;
|
|
19
|
-
latitude?: number;
|
|
20
|
-
longitude?: number;
|
|
21
|
-
zoom: number;
|
|
22
|
-
}
|
|
23
|
-
declare const ListingMap: (props: ListingMapProps) => React.JSX.Element | null;
|
|
24
|
-
export { ListingMap as default, ListingMap };
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import React, { useState, useCallback, useEffect } from "react";
|
|
13
|
-
import "mapbox-gl/dist/mapbox-gl.css";
|
|
14
|
-
import MapGL, { Marker } from "react-map-gl";
|
|
15
|
-
import "./ListingMap.scss";
|
|
16
|
-
import { MultiLineAddress } from "../../helpers/MultiLineAddress";
|
|
17
|
-
import { useIntersect } from "../../..";
|
|
18
|
-
import { Heading } from "../../text/Heading";
|
|
19
|
-
var isValidLatitude = function (latitude) {
|
|
20
|
-
return latitude >= -90 && latitude <= 90;
|
|
21
|
-
};
|
|
22
|
-
var isValidLongitude = function (longitude) {
|
|
23
|
-
return longitude >= -180 && longitude <= 180;
|
|
24
|
-
};
|
|
25
|
-
var ListingMap = function (props) {
|
|
26
|
-
var _a, _b, _c, _d;
|
|
27
|
-
// Lazy load the map component only when it will become visible on screen
|
|
28
|
-
var _e = useIntersect({
|
|
29
|
-
// `window` isn't set for SSR, so we'll use `global` instead—doesn't really
|
|
30
|
-
// matter because the map won't ever get rendered in SSR anyway
|
|
31
|
-
rootMargin: "".concat(global.innerHeight || 0, "px"),
|
|
32
|
-
}), setIntersectingElement = _e.setIntersectingElement, intersecting = _e.intersecting;
|
|
33
|
-
var _f = useState(false), hasIntersected = _f[0], setHasIntersected = _f[1];
|
|
34
|
-
if (intersecting && !hasIntersected)
|
|
35
|
-
setHasIntersected(true);
|
|
36
|
-
var _g = useState({
|
|
37
|
-
latitude: (_a = props.address) === null || _a === void 0 ? void 0 : _a.latitude,
|
|
38
|
-
longitude: (_b = props.address) === null || _b === void 0 ? void 0 : _b.longitude,
|
|
39
|
-
}), marker = _g[0], setMarker = _g[1];
|
|
40
|
-
var _h = useState({
|
|
41
|
-
latitude: marker.latitude,
|
|
42
|
-
longitude: marker.longitude,
|
|
43
|
-
width: "100%",
|
|
44
|
-
height: 400,
|
|
45
|
-
zoom: 13,
|
|
46
|
-
}), viewport = _h[0], setViewport = _h[1];
|
|
47
|
-
var onViewportChange = function (viewport) {
|
|
48
|
-
// width and height need to be set here to work properly with
|
|
49
|
-
// the responsive wrappers
|
|
50
|
-
var newViewport = __assign({}, viewport);
|
|
51
|
-
newViewport.width = "100%";
|
|
52
|
-
newViewport.height = 400;
|
|
53
|
-
setViewport(newViewport);
|
|
54
|
-
};
|
|
55
|
-
useEffect(function () {
|
|
56
|
-
var _a, _b, _c, _d;
|
|
57
|
-
onViewportChange(__assign(__assign({}, viewport), { latitude: (_a = props.address) === null || _a === void 0 ? void 0 : _a.latitude, longitude: (_b = props.address) === null || _b === void 0 ? void 0 : _b.longitude }));
|
|
58
|
-
setMarker({
|
|
59
|
-
latitude: (_c = props.address) === null || _c === void 0 ? void 0 : _c.latitude,
|
|
60
|
-
longitude: (_d = props.address) === null || _d === void 0 ? void 0 : _d.longitude,
|
|
61
|
-
});
|
|
62
|
-
}, [(_c = props.address) === null || _c === void 0 ? void 0 : _c.latitude, (_d = props.address) === null || _d === void 0 ? void 0 : _d.longitude, props.enableCustomPinPositioning]);
|
|
63
|
-
var onMarkerDragEnd = useCallback(function (event) {
|
|
64
|
-
if (props.setLatLong) {
|
|
65
|
-
props.setLatLong({
|
|
66
|
-
latitude: event.lngLat[1],
|
|
67
|
-
longitude: event.lngLat[0],
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
if (props.setCustomMapPositionChosen) {
|
|
71
|
-
props.setCustomMapPositionChosen(true);
|
|
72
|
-
}
|
|
73
|
-
setMarker({
|
|
74
|
-
latitude: event.lngLat[1],
|
|
75
|
-
longitude: event.lngLat[0],
|
|
76
|
-
});
|
|
77
|
-
}, []);
|
|
78
|
-
if (!props.address ||
|
|
79
|
-
!props.address.latitude ||
|
|
80
|
-
!props.address.longitude ||
|
|
81
|
-
!viewport.latitude ||
|
|
82
|
-
!viewport.longitude)
|
|
83
|
-
return null;
|
|
84
|
-
return (React.createElement("div", { className: "listing-map", ref: setIntersectingElement },
|
|
85
|
-
React.createElement("div", { className: "addressPopup" },
|
|
86
|
-
props.listingName && (React.createElement(Heading, { priority: 3, styleType: "capsWeighted" }, props.listingName)),
|
|
87
|
-
React.createElement(MultiLineAddress, { address: props.address })),
|
|
88
|
-
(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (React.createElement(MapGL, __assign({ mapboxApiAccessToken: process.env.mapBoxToken || process.env.MAPBOX_TOKEN, mapStyle: "mapbox://styles/mapbox/streets-v11", scrollZoom: false, onViewportChange: onViewportChange }, viewport), marker.latitude &&
|
|
89
|
-
marker.longitude &&
|
|
90
|
-
isValidLatitude(marker.latitude) &&
|
|
91
|
-
isValidLongitude(marker.longitude) && (React.createElement(React.Fragment, null, props.enableCustomPinPositioning ? (React.createElement(Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20, draggable: true, onDragEnd: onMarkerDragEnd },
|
|
92
|
-
React.createElement("div", { className: "pin" }))) : (React.createElement(Marker, { latitude: marker.latitude, longitude: marker.longitude, offsetTop: -20 },
|
|
93
|
-
React.createElement("div", { className: "pin" })))))))));
|
|
94
|
-
};
|
|
95
|
-
export { ListingMap as default, ListingMap };
|
|
96
|
-
//# sourceMappingURL=ListingMap.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListingMap.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingMap.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { ListingMap } from "./ListingMap";
|
|
3
|
-
import Archer from "../../../__tests__/fixtures/archer.json";
|
|
4
|
-
export default {
|
|
5
|
-
title: "Listing/Map",
|
|
6
|
-
};
|
|
7
|
-
var listing = Object.assign({}, Archer);
|
|
8
|
-
export var showMapWithPin = function () {
|
|
9
|
-
return React.createElement(ListingMap, { address: listing.buildingAddress, listingName: listing.name });
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=ListingMap.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListingMap.stories.js","sourceRoot":"","sources":["../../../../src/page_components/listing/ListingMap.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,MAAM,MAAM,yCAAyC,CAAA;AAE5D,eAAe;IACb,KAAK,EAAE,aAAa;CACrB,CAAA;AAED,IAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAQ,CAAA;AAEhD,MAAM,CAAC,IAAM,cAAc,GAAG;IAC5B,OAAO,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW,EAAE,OAAO,CAAC,IAAI,GAAI,CAAA;AACpF,CAAC,CAAA"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
.listing-map {
|
|
2
|
-
min-height: 12rem;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.pin {
|
|
6
|
-
@apply absolute;
|
|
7
|
-
width: 30px;
|
|
8
|
-
height: 30px;
|
|
9
|
-
border-radius: 50% 50% 50% 0;
|
|
10
|
-
background: #89849b;
|
|
11
|
-
transform: rotate(-45deg);
|
|
12
|
-
left: 50%;
|
|
13
|
-
top: 50%;
|
|
14
|
-
margin: -20px 0 0 -20px;
|
|
15
|
-
animation-name: bounce;
|
|
16
|
-
animation-fill-mode: both;
|
|
17
|
-
animation-duration: 1s;
|
|
18
|
-
|
|
19
|
-
&:after {
|
|
20
|
-
@apply absolute;
|
|
21
|
-
@apply rounded-full;
|
|
22
|
-
content: "";
|
|
23
|
-
width: 14px;
|
|
24
|
-
height: 14px;
|
|
25
|
-
margin: 8px 0 0 8px;
|
|
26
|
-
background: #2f2f2f;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.addressPopup {
|
|
31
|
-
@apply bg-white;
|
|
32
|
-
@apply p-4;
|
|
33
|
-
@apply shadow-md;
|
|
34
|
-
@apply inline-block;
|
|
35
|
-
@apply float-left;
|
|
36
|
-
@apply relative;
|
|
37
|
-
left: 15px;
|
|
38
|
-
top: 15px;
|
|
39
|
-
z-index: 1;
|
|
40
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { ListingMap } from "./ListingMap"
|
|
4
|
-
import Archer from "../../../__tests__/fixtures/archer.json"
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: "Listing/Map",
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const listing = Object.assign({}, Archer) as any
|
|
11
|
-
|
|
12
|
-
export const showMapWithPin = () => {
|
|
13
|
-
return <ListingMap address={listing.buildingAddress} listingName={listing.name} />
|
|
14
|
-
}
|
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
import React, { useState, useCallback, useEffect } from "react"
|
|
2
|
-
import "mapbox-gl/dist/mapbox-gl.css"
|
|
3
|
-
import MapGL, { Marker } from "react-map-gl"
|
|
4
|
-
|
|
5
|
-
import "./ListingMap.scss"
|
|
6
|
-
import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
|
|
7
|
-
import { useIntersect } from "../../.."
|
|
8
|
-
import { Heading } from "../../text/Heading"
|
|
9
|
-
|
|
10
|
-
export interface ListingMapProps {
|
|
11
|
-
address?: Address
|
|
12
|
-
listingName?: string
|
|
13
|
-
enableCustomPinPositioning?: boolean
|
|
14
|
-
setCustomMapPositionChosen?: (customMapPosition: boolean) => void
|
|
15
|
-
setLatLong?: (latLong: LatitudeLongitude) => void
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export interface LatitudeLongitude {
|
|
19
|
-
latitude: number
|
|
20
|
-
longitude: number
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export interface Viewport {
|
|
24
|
-
width: string | number
|
|
25
|
-
height: string | number
|
|
26
|
-
latitude?: number
|
|
27
|
-
longitude?: number
|
|
28
|
-
zoom: number
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const isValidLatitude = (latitude: number) => {
|
|
32
|
-
return latitude >= -90 && latitude <= 90
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const isValidLongitude = (longitude: number) => {
|
|
36
|
-
return longitude >= -180 && longitude <= 180
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const ListingMap = (props: ListingMapProps) => {
|
|
40
|
-
// Lazy load the map component only when it will become visible on screen
|
|
41
|
-
const { setIntersectingElement, intersecting } = useIntersect({
|
|
42
|
-
// `window` isn't set for SSR, so we'll use `global` instead—doesn't really
|
|
43
|
-
// matter because the map won't ever get rendered in SSR anyway
|
|
44
|
-
rootMargin: `${global.innerHeight || 0}px`,
|
|
45
|
-
})
|
|
46
|
-
const [hasIntersected, setHasIntersected] = useState(false)
|
|
47
|
-
if (intersecting && !hasIntersected) setHasIntersected(true)
|
|
48
|
-
|
|
49
|
-
const [marker, setMarker] = useState({
|
|
50
|
-
latitude: props.address?.latitude,
|
|
51
|
-
longitude: props.address?.longitude,
|
|
52
|
-
})
|
|
53
|
-
|
|
54
|
-
const [viewport, setViewport] = useState({
|
|
55
|
-
latitude: marker.latitude,
|
|
56
|
-
longitude: marker.longitude,
|
|
57
|
-
width: "100%",
|
|
58
|
-
height: 400,
|
|
59
|
-
zoom: 13,
|
|
60
|
-
} as Viewport)
|
|
61
|
-
|
|
62
|
-
const onViewportChange = (viewport: Viewport) => {
|
|
63
|
-
// width and height need to be set here to work properly with
|
|
64
|
-
// the responsive wrappers
|
|
65
|
-
const newViewport = { ...viewport }
|
|
66
|
-
newViewport.width = "100%"
|
|
67
|
-
newViewport.height = 400
|
|
68
|
-
setViewport(newViewport)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
onViewportChange({
|
|
73
|
-
...viewport,
|
|
74
|
-
latitude: props.address?.latitude,
|
|
75
|
-
longitude: props.address?.longitude,
|
|
76
|
-
})
|
|
77
|
-
setMarker({
|
|
78
|
-
latitude: props.address?.latitude,
|
|
79
|
-
longitude: props.address?.longitude,
|
|
80
|
-
})
|
|
81
|
-
}, [props.address?.latitude, props.address?.longitude, props.enableCustomPinPositioning])
|
|
82
|
-
|
|
83
|
-
const onMarkerDragEnd = useCallback((event: any) => {
|
|
84
|
-
if (props.setLatLong) {
|
|
85
|
-
props.setLatLong({
|
|
86
|
-
latitude: event.lngLat[1],
|
|
87
|
-
longitude: event.lngLat[0],
|
|
88
|
-
})
|
|
89
|
-
}
|
|
90
|
-
if (props.setCustomMapPositionChosen) {
|
|
91
|
-
props.setCustomMapPositionChosen(true)
|
|
92
|
-
}
|
|
93
|
-
setMarker({
|
|
94
|
-
latitude: event.lngLat[1],
|
|
95
|
-
longitude: event.lngLat[0],
|
|
96
|
-
})
|
|
97
|
-
}, [])
|
|
98
|
-
|
|
99
|
-
if (
|
|
100
|
-
!props.address ||
|
|
101
|
-
!props.address.latitude ||
|
|
102
|
-
!props.address.longitude ||
|
|
103
|
-
!viewport.latitude ||
|
|
104
|
-
!viewport.longitude
|
|
105
|
-
)
|
|
106
|
-
return null
|
|
107
|
-
|
|
108
|
-
return (
|
|
109
|
-
<div className="listing-map" ref={setIntersectingElement}>
|
|
110
|
-
<div className="addressPopup">
|
|
111
|
-
{props.listingName && (
|
|
112
|
-
<Heading priority={3} styleType={"capsWeighted"}>
|
|
113
|
-
{props.listingName}
|
|
114
|
-
</Heading>
|
|
115
|
-
)}
|
|
116
|
-
<MultiLineAddress address={props.address} />
|
|
117
|
-
</div>
|
|
118
|
-
{(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && hasIntersected && (
|
|
119
|
-
<MapGL
|
|
120
|
-
mapboxApiAccessToken={process.env.mapBoxToken || process.env.MAPBOX_TOKEN}
|
|
121
|
-
mapStyle="mapbox://styles/mapbox/streets-v11"
|
|
122
|
-
scrollZoom={false}
|
|
123
|
-
onViewportChange={onViewportChange}
|
|
124
|
-
{...viewport}
|
|
125
|
-
>
|
|
126
|
-
{marker.latitude &&
|
|
127
|
-
marker.longitude &&
|
|
128
|
-
isValidLatitude(marker.latitude) &&
|
|
129
|
-
isValidLongitude(marker.longitude) && (
|
|
130
|
-
<>
|
|
131
|
-
{props.enableCustomPinPositioning ? (
|
|
132
|
-
<Marker
|
|
133
|
-
latitude={marker.latitude}
|
|
134
|
-
longitude={marker.longitude}
|
|
135
|
-
offsetTop={-20}
|
|
136
|
-
draggable={true}
|
|
137
|
-
onDragEnd={onMarkerDragEnd}
|
|
138
|
-
>
|
|
139
|
-
<div className="pin"></div>
|
|
140
|
-
</Marker>
|
|
141
|
-
) : (
|
|
142
|
-
<Marker latitude={marker.latitude} longitude={marker.longitude} offsetTop={-20}>
|
|
143
|
-
<div className="pin"></div>
|
|
144
|
-
</Marker>
|
|
145
|
-
)}
|
|
146
|
-
</>
|
|
147
|
-
)}
|
|
148
|
-
</MapGL>
|
|
149
|
-
)}
|
|
150
|
-
</div>
|
|
151
|
-
)
|
|
152
|
-
}
|
|
153
|
-
export { ListingMap as default, ListingMap }
|