ublo-lib 1.6.18 → 1.6.19

package/es/common/components/editable-map/edit-form.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import Input from "dt-design-system/es/input";
 import Textarea from "dt-design-system/es/textarea";
 import Button from "dt-design-system/es/button";
+import Checkbox from "dt-design-system/es/checkbox";
 import * as Icons from "dt-design-system/es/icons";
 import IconPicker from "./icon-picker";
 import css from "./edit-form.module.css";
@@ -19,7 +20,8 @@ const EditForm = ({
     title,
     description,
     url,
-    label
+    label,
+    popupOpened
   } = marker;
   const removeMarker = e => {
     e.stopPropagation();
@@ -76,6 +78,10 @@ const EditForm = ({
         onValueChange: updateMarker("label"),
         compact: true
       })]
+    }), _jsx(Checkbox, {
+      label: "Ouvert par d\xE9faut",
+      checked: popupOpened,
+      onCheckedChange: updateMarker("popupOpened")
     }), _jsxs("div", {
       className: css.buttons,
       children: [_jsxs(Button, {

package/es/common/components/editable-map/editable-map.js

@@ -26,6 +26,7 @@ const EditableMap = ({
   const [center, setCenter] = React.useState(presets?.center || FRANCE_CENTER);
   const [zoom, setZoom] = React.useState(presets?.zoom ?? DEFAULT_ZOOM);
   const [markers, setMarkers] = React.useState(presets?.markers || []);
+  const scrollWheelZoom = isInDialog || Boolean(cmsMode);
   const refreshSize = () => {
     ref.current.invalidateSize();
   };
@@ -51,7 +52,7 @@ const EditableMap = ({
       ref: ref,
       center: center,
       zoom: zoom,
-      scrollWheelZoom: isInDialog,
+      scrollWheelZoom: scrollWheelZoom,
       className: css.map,
       attributionControl: false,
       children: [_jsx(TileLayer, {
@@ -63,9 +64,11 @@ const EditableMap = ({
         setZoom: setZoom,
         setCenter: setCenter
       }), _jsx(Markers, {
+        map: ref,
         markers: markers,
         setMarkers: setMarkers,
-        iconSet: iconSet
+        iconSet: iconSet,
+        isInDialog: isInDialog
       })]
     }), cmsMode === "editing" && _jsx(Helper, {})]
   });

package/es/common/components/editable-map/map-events.js

@@ -5,7 +5,8 @@ const DEFAULT_MARKER_DATA = {
   title: "Nouveau point d'intérêt",
   description: "",
   url: "",
-  label: ""
+  label: "",
+  popupOpened: false
 };
 const MapEvents = ({
   mapRef,

package/es/common/components/editable-map/markers.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/server";
 import * as L from "leaflet";
-import { Marker, Popup, Tooltip } from "react-leaflet";
+import { Marker as LeafletMarker, Popup, Tooltip } from "react-leaflet";
 import { useUbloContext } from "ublo/with-ublo";
 import EditForm from "./edit-form";
 import * as Icons from "./icons";
@@ -9,7 +9,78 @@ import css from "./markers.module.css";
 import PopupData from "./popup-data";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const Marker = ({
+  isInDialog,
+  map,
+  marker,
+  setMarkers,
+  iconSet,
+  isEditing
+}) => {
+  const popupRef = React.useRef();
+  const {
+    id,
+    icon,
+    title,
+    position,
+    popupOpened
+  } = marker;
+  const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
+  const updatePosition = e => {
+    setMarkers(currents => {
+      return currents.map(marker => {
+        if (marker.id === id) {
+          return {
+            ...marker,
+            position: e.target.getLatLng()
+          };
+        }
+        return marker;
+      });
+    });
+  };
+  React.useEffect(() => {
+    if (!isEditing && popupOpened) {
+      popupRef.current.setLatLng(position).openOn(map.current);
+      if (isInDialog) {
+        setInterval(() => {
+          popupRef.current.update();
+        }, 1000);
+      }
+    }
+  }, [isEditing, isInDialog, map, popupOpened, position]);
+  return _jsxs(LeafletMarker, {
+    draggable: isEditing,
+    eventHandlers: {
+      dragend(e) {
+        updatePosition(e);
+      }
+    },
+    position: position,
+    icon: L.divIcon({
+      className: css.markerIcon,
+      html: ReactDOM.renderToString(_jsx(Icon, {}))
+    }),
+    children: [!isEditing && _jsx(Tooltip, {
+      sticky: true,
+      children: title
+    }), _jsx(Popup, {
+      ref: popupRef,
+      className: css.popup,
+      children: isEditing ? _jsx(EditForm, {
+        popupRef: popupRef,
+        marker: marker,
+        setMarkers: setMarkers,
+        iconSet: iconSet
+      }) : _jsx(PopupData, {
+        marker: marker
+      })
+    })]
+  }, id);
+};
 const Markers = ({
+  isInDialog,
+  map,
   markers,
   setMarkers,
   iconSet
@@ -18,55 +89,15 @@ const Markers = ({
     cmsMode
   } = useUbloContext();
   const isEditing = cmsMode === "editing";
-  return markers.map(marker => {
-    const popupRef = React.createRef();
-    const {
-      id,
-      icon,
-      title,
-      position
-    } = marker;
-    const Icon = Icons[iconSet][icon] || Icons[iconSet].Location;
-    const updatePosition = e => {
-      setMarkers(currents => {
-        return currents.map(marker => {
-          if (marker.id === id) {
-            return {
-              ...marker,
-              position: e.target.getLatLng()
-            };
-          }
-          return marker;
-        });
-      });
-    };
-    return _jsxs(Marker, {
-      draggable: isEditing,
-      eventHandlers: {
-        dragend(e) {
-          updatePosition(e);
-        }
-      },
-      position: position,
-      icon: L.divIcon({
-        className: css.markerIcon,
-        html: ReactDOM.renderToString(_jsx(Icon, {}))
-      }),
-      children: [!isEditing && _jsx(Tooltip, {
-        sticky: true,
-        children: title
-      }), _jsx(Popup, {
-        ref: popupRef,
-        children: isEditing ? _jsx(EditForm, {
-          popupRef: popupRef,
-          marker: marker,
-          setMarkers: setMarkers,
-          iconSet: iconSet
-        }) : _jsx(PopupData, {
-          marker: marker
-        })
-      })]
-    }, id);
+  return markers.map((marker, i) => {
+    return _jsx(Marker, {
+      isInDialog: isInDialog,
+      map: map,
+      marker: marker,
+      setMarkers: setMarkers,
+      iconSet: iconSet,
+      isEditing: isEditing
+    }, i);
   });
 };
 export default Markers;

package/es/common/components/editable-map/markers.module.css

@@ -4,3 +4,8 @@
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
   transform: translate(-35%, -65%);
 }
+
+.popup {
+  transition: all 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.6.18",
+  "version": "1.6.19",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "next": "^12.0.0",