ublo-lib 1.13.0 → 1.13.2
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.
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import * as L from "leaflet";
|
|
2
3
|
import classNames from "classnames";
|
|
3
4
|
import css from "./marker-list.module.css";
|
|
4
5
|
import Button from "dt-design-system/es/button";
|
|
@@ -48,12 +49,23 @@ export default function MarkerList({
|
|
|
48
49
|
important
|
|
49
50
|
}) => {
|
|
50
51
|
const focusMarker = e => {
|
|
51
|
-
e.preventDefault();
|
|
52
52
|
e.stopPropagation();
|
|
53
|
+
e.preventDefault();
|
|
54
|
+
mapRef.current.setView(position, 20);
|
|
55
|
+
setTimeout(() => {
|
|
56
|
+
mapRef.current.eachLayer(layer => {
|
|
57
|
+
if (layer instanceof L.Marker) {
|
|
58
|
+
const markerElement = layer.getElement();
|
|
59
|
+
const markerId = markerElement.querySelector(`[data-id="${id}"]`)?.getAttribute("data-id");
|
|
60
|
+
if (markerId) {
|
|
61
|
+
layer.openPopup();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}, 300);
|
|
53
66
|
if (width <= 992) {
|
|
54
67
|
setOpened(false);
|
|
55
68
|
}
|
|
56
|
-
mapRef.current.setView(position, 23);
|
|
57
69
|
};
|
|
58
70
|
const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
|
|
59
71
|
const classes = classNames(css.button, {
|
|
@@ -52,6 +52,19 @@
|
|
|
52
52
|
overflow: auto;
|
|
53
53
|
animation: marker-list-inner-appearance 160ms
|
|
54
54
|
var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
|
|
55
|
+
background: linear-gradient(
|
|
56
|
+
var(--ds-grey-100, #f8f8f8) 30%,
|
|
57
|
+
hsla(0, 0%, 100%, 0)
|
|
58
|
+
),
|
|
59
|
+
linear-gradient(hsla(0, 0%, 100%, 0), var(--ds-grey-100, #f8f8f8) 70%) 0
|
|
60
|
+
100%,
|
|
61
|
+
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.25), transparent),
|
|
62
|
+
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.25), transparent)
|
|
63
|
+
0 100%;
|
|
64
|
+
background-repeat: no-repeat;
|
|
65
|
+
background-size: 100% 30px, 100% 30px, 100% 10px, 100% 10px;
|
|
66
|
+
background-attachment: local, local, scroll, scroll;
|
|
67
|
+
border-radius: inherit;
|
|
55
68
|
}
|
|
56
69
|
|
|
57
70
|
@keyframes marker-list-inner-appearance {
|
|
@@ -70,6 +83,7 @@
|
|
|
70
83
|
text-align: left;
|
|
71
84
|
border-radius: var(--ds-radius-100, 6px);
|
|
72
85
|
cursor: pointer;
|
|
86
|
+
user-select: none;
|
|
73
87
|
}
|
|
74
88
|
|
|
75
89
|
.listIsInDialog .button:first-of-type {
|
|
@@ -99,9 +99,11 @@ const usePackages = (defaultPopupContent, setPopupContent, cartUrl, selector = "
|
|
|
99
99
|
section.addEventListener("click", onPackageClick);
|
|
100
100
|
}, [callback, onPackageClick]);
|
|
101
101
|
const cleanup = React.useCallback(section => {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
if (section) {
|
|
103
|
+
const zone = section.closest(".cms");
|
|
104
|
+
zone.removeEventListener("ublo-section-created", callback);
|
|
105
|
+
section.removeEventListener("click", onPackageClick);
|
|
106
|
+
}
|
|
105
107
|
}, [callback, onPackageClick]);
|
|
106
108
|
React.useEffect(() => {
|
|
107
109
|
const sections = Array.from(document.querySelectorAll(selector));
|