ublo-lib 1.6.0 → 1.6.2

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

@@ -11,7 +11,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditForm = ({
   popupRef,
   marker,
-  setMarkers
+  setMarkers,
+  iconSet
 }) => {
   const {
     id,
@@ -51,7 +52,8 @@ const EditForm = ({
       className: css.row,
       children: [_jsx(IconPicker, {
         callback: updateMarker("icon"),
-        selectedIcon: icon
+        selectedIcon: icon,
+        iconSet: iconSet
       }), _jsx(Input, {
         label: "Titre",
         value: title,

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { MapContainer, TileLayer } from "react-leaflet";
 import { useUbloContext } from "ublo/with-ublo";
+import MapEvents from "./map-events";
 import Markers from "./markers";
 import Helper from "./helper";
 import css from "./editable-map.module.css";
@@ -11,7 +12,8 @@ const FRANCE_CENTER = [46.807934, 3.645097];
 const DEFAULT_ZOOM = 6;
 
 const EditableMap = ({
-  format
+  format,
+  iconSet
 }) => {
   const ref = React.useRef();
   const {
@@ -24,16 +26,17 @@ const EditableMap = ({
   } = format;
   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 refreshSize = React.useCallback(() => {
-    if (!mustRenderMap) return;
+  const [markers, setMarkers] = React.useState(presets?.markers || []);
+
+  const refreshSize = () => {
     ref.current.invalidateSize();
-  }, [mustRenderMap]);
+  };
+
   React.useEffect(() => {
     if (isInDialog) {
       window.refreshDialogMapSize = refreshSize;
     }
-  }, [isInDialog, refreshSize]);
+  }, [isInDialog]);
   React.useEffect(() => {
     if (cmsMode === "editing") {
       const newPresets = {
@@ -44,27 +47,30 @@ const EditableMap = ({
       element.setAttribute("data-presets", JSON.stringify(newPresets));
     }
   }, [center, cmsMode, element, markers, zoom]);
-  const map = React.useMemo(() => _jsxs(MapContainer, {
-    ref: ref,
-    center: center,
-    zoom: zoom,
-    scrollWheelZoom: isInDialog,
-    className: css.map,
-    attributionControl: false,
-    children: [_jsx(TileLayer, {
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    }), _jsx(Markers, {
-      mapRef: ref,
-      markers: markers,
-      setMarkers: setMarkers,
-      setZoom: setZoom,
-      setCenter: setCenter
-    })]
-  }), [markers, center, zoom]);
   return _jsxs("div", {
     className: css.container,
     "data-cms-remove": "",
-    children: [map, cmsMode === "editing" && _jsx(Helper, {})]
+    children: [_jsxs(MapContainer, {
+      ref: ref,
+      center: center,
+      zoom: zoom,
+      scrollWheelZoom: isInDialog,
+      className: css.map,
+      attributionControl: false,
+      children: [_jsx(TileLayer, {
+        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      }), _jsx(MapEvents, {
+        mapRef: ref,
+        markers: markers,
+        setMarkers: setMarkers,
+        setZoom: setZoom,
+        setCenter: setCenter
+      }), _jsx(Markers, {
+        markers: markers,
+        setMarkers: setMarkers,
+        iconSet: iconSet
+      })]
+    }), cmsMode === "editing" && _jsx(Helper, {})]
   });
 };
 

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

@@ -8,10 +8,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const IconPicker = ({
   selectedIcon,
-  callback
+  callback,
+  iconSet
 }) => {
   const [opened, setOpened] = React.useState(false);
-  const Icon = Icons[selectedIcon];
+  const Icon = Icons[iconSet][selectedIcon];
   const keys = Object.keys(Icons);
 
   const togglePicker = () => {

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

@@ -0,0 +1,2 @@
+export * as esf from "./esf";
+export * as lavovelo from "./lavovelo";

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Icon = ({
+  width = 24,
+  height = 24,
+  ...props
+}) => _jsx("svg", {
+  viewBox: `0 0 ${width} ${height}`,
+  width: width,
+  height: height,
+  ...props,
+  children: props.children
+});
+
+export const Location = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M12 12q.825 0 1.413-.588Q14 10.825 14 10t-.587-1.413Q12.825 8 12 8q-.825 0-1.412.587Q10 9.175 10 10q0 .825.588 1.412Q11.175 12 12 12Zm0 9.625q-.2 0-.4-.075t-.35-.2Q7.6 18.125 5.8 15.363 4 12.6 4 10.2q0-3.75 2.413-5.975Q8.825 2 12 2t5.587 2.225Q20 6.45 20 10.2q0 2.4-1.8 5.163-1.8 2.762-5.45 5.987-.15.125-.35.2-.2.075-.4.075Z"
+  })
+});

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

@@ -6,7 +6,9 @@ const Map = dynamic(() => import("./editable-map"), {
   ssr: false
 });
 
-const EditableMap = () => {
+const EditableMap = ({
+  iconSet = "esf"
+}) => {
   const [formats, setFormats] = React.useState([]);
   const [refreshKey, setRefreshKey] = React.useState(0);
 
@@ -38,7 +40,8 @@ const EditableMap = () => {
   }, [refreshKey]);
   if (!formats.length) return null;
   return formats.map(format => ReactDOM.createPortal(_jsx(Map, {
-    format: format
+    format: format,
+    iconSet: iconSet
   }), format.element));
 };
 

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

@@ -0,0 +1,51 @@
+import { useMapEvents } from "react-leaflet";
+import { useUbloContext } from "ublo/with-ublo";
+const DEFAULT_MARKER_DATA = {
+  icon: "Location",
+  title: "Nouveau point d'intérêt",
+  description: "",
+  url: "",
+  label: ""
+};
+
+const MapEvents = ({
+  mapRef,
+  markers,
+  setMarkers,
+  setCenter,
+  setZoom
+}) => {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const ids = markers.map(m => m.id);
+  const newId = ids.length ? Math.max(...ids) + 1 : 1;
+
+  const addMarker = e => {
+    const hasAnOpenedPopup = Boolean(mapRef.current?.getContainer().querySelector(".leaflet-popup"));
+    if (cmsMode !== "editing" || hasAnOpenedPopup) return;
+    setMarkers([...markers, {
+      id: newId,
+      ...DEFAULT_MARKER_DATA,
+      position: e.latlng
+    }]);
+  };
+
+  useMapEvents({
+    dragend(e) {
+      setCenter(e.target.getCenter());
+    },
+
+    zoomend(e) {
+      setZoom(e.target.getZoom());
+    },
+
+    click(e) {
+      addMarker(e);
+    }
+
+  });
+  return null;
+};
+
+export default MapEvents;

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

@@ -1,71 +1,33 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/server";
 import * as L from "leaflet";
-import { Marker, Popup, Tooltip, useMapEvents } from "react-leaflet";
+import { Marker, Popup, Tooltip } from "react-leaflet";
 import { useUbloContext } from "ublo/with-ublo";
-import Button from "dt-design-system/es/button";
 import EditForm from "./edit-form";
 import * as Icons from "./icons";
 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 DEFAULT_MARKER_DATA = {
-  icon: "Location",
-  title: "Nouveau point d'intérêt",
-  description: "",
-  url: "",
-  label: ""
-};
 
 const Markers = ({
-  mapRef,
   markers,
   setMarkers,
-  setCenter,
-  setZoom
+  iconSet
 }) => {
   const {
     cmsMode
   } = useUbloContext();
-  const ids = markers.map(m => m.id);
-  const newId = ids.length ? Math.max(...ids) + 1 : 1;
-
-  const addMarker = e => {
-    const hasAnOpenedPopup = Boolean(mapRef.current?.getContainer().querySelector(".leaflet-popup"));
-    if (cmsMode !== "editing" || hasAnOpenedPopup) return;
-    setMarkers([...markers, {
-      id: newId,
-      ...DEFAULT_MARKER_DATA,
-      position: e.latlng
-    }]);
-  };
-
-  useMapEvents({
-    dragend(e) {
-      setCenter(e.target.getCenter());
-    },
-
-    zoomend(e) {
-      setZoom(e.target.getZoom());
-    },
-
-    click(e) {
-      addMarker(e);
-    }
-
-  });
+  const isEditing = cmsMode === "editing";
   return markers.map(marker => {
     const popupRef = React.createRef();
     const {
       id,
       icon,
       title,
-      description,
-      url,
-      label,
       position
     } = marker;
-    const Icon = Icons[icon];
+    const Icon = Icons[iconSet][icon];
 
     const updatePosition = e => {
       setMarkers(currents => {
@@ -81,9 +43,8 @@ const Markers = ({
       });
     };
 
-    const formatedDescription = description.replace(/\n/g, "<br />");
     return _jsxs(Marker, {
-      draggable: cmsMode === "editing",
+      draggable: isEditing,
       eventHandlers: {
         dragend(e) {
           updatePosition(e);
@@ -95,31 +56,18 @@ const Markers = ({
         className: css.markerIcon,
         html: ReactDOM.renderToString(_jsx(Icon, {}))
       }),
-      children: [cmsMode !== "editing" && _jsx(Tooltip, {
+      children: [!isEditing && _jsx(Tooltip, {
         sticky: true,
         children: title
       }), _jsx(Popup, {
         ref: popupRef,
-        children: cmsMode === "editing" ? _jsx(EditForm, {
+        children: isEditing ? _jsx(EditForm, {
           popupRef: popupRef,
           marker: marker,
-          setMarkers: setMarkers
-        }) : _jsxs("div", {
-          className: css.data,
-          children: [_jsx("div", {
-            className: css.title,
-            children: title
-          }), formatedDescription && _jsx("div", {
-            className: css.description,
-            dangerouslySetInnerHTML: {
-              __html: formatedDescription
-            }
-          }), url?.trim() && _jsx(Button, {
-            tag: "a",
-            href: url.trim(),
-            className: css.link,
-            children: label || "En savoir plus"
-          })]
+          setMarkers: setMarkers,
+          iconSet: iconSet
+        }) : _jsx(PopupData, {
+          marker: marker
         })
       })]
     }, id);

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

@@ -4,31 +4,3 @@
   fill: var(--ds-secondary, var(--ds-blue-400, #4177f6));
   transform: translate(-35%, -65%);
 }
-
-.data {
-  max-width: 280px;
-  max-height: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
-  overflow: auto;
-}
-
-.title {
-  position: sticky;
-  top: 0;
-  padding: 4px 0;
-  font-size: 17px;
-  font-weight: 700;
-  background-color: var(--ds-grey-000, #fff);
-}
-
-.description {
-  font-size: 15px;
-}
-
-.link {
-  margin-top: 6px;
-  color: var(--ds-grey-000, #fff) !important;
-}

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import css from "./popup-data.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const PopupData = ({
+  marker
+}) => {
+  const {
+    title,
+    description,
+    url,
+    label
+  } = marker;
+  const formatedDescription = description.replace(/\n/g, "<br />");
+  return _jsxs("div", {
+    className: css.data,
+    children: [_jsx("div", {
+      className: css.title,
+      children: title
+    }), formatedDescription && _jsx("div", {
+      className: css.description,
+      dangerouslySetInnerHTML: {
+        __html: formatedDescription
+      }
+    }), url?.trim() && _jsx(Button, {
+      tag: "a",
+      href: url.trim(),
+      className: css.link,
+      children: label || "En savoir plus"
+    })]
+  });
+};
+
+export default PopupData;

package/es/common/components/editable-map/popup-data.module.css

@@ -0,0 +1,27 @@
+.data {
+  max-width: 280px;
+  max-height: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-family: var(--ds-sans-serif-font, "Open Sans", sans-serif);
+  overflow: auto;
+}
+
+.title {
+  position: sticky;
+  top: 0;
+  padding: 4px 0;
+  font-size: 17px;
+  font-weight: 700;
+  background-color: var(--ds-grey-000, #fff);
+}
+
+.description {
+  font-size: 15px;
+}
+
+.link {
+  margin-top: 6px;
+  color: var(--ds-grey-000, #fff) !important;
+}

package/package.json

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