@m4l/gclick 0.21.0 → 0.22.0

package/components/VideoTimeLineSelector/subcomponents/EventCluster/EventCluster.js

@@ -1,48 +1,53 @@
 import { jsx as t, jsxs as i } from "@emotion/react/jsx-runtime";
 import { memo as E } from "react";
-import { Tooltip as m, Typography as n } from "@m4l/base";
-import { EventClusterStyled as y, PointEventStyled as b } from "../../slots/VideoTimeLineSelectorSlots.js";
-import { useTheme as v } from "@mui/material";
-import { useModuleDictionary as x, getPropertyByString as C } from "@m4l/core";
-import { VIDEO_TIME_LINE_SELECTOR_DICTIONARY_KEYS as _ } from "../../dictionary.js";
-import { useVideoTimeLineSelectorStore as g } from "../../store/useVideoTimeLineSelectorStore.js";
-import { VIDEO_TIME_LINE_SELECTOR_CLASSES as L } from "../../constants.js";
-const N = E(({ clusteredEvent: d, onEventClick: o }) => {
-  const { events: r, position: a, isCluster: s, jumpNextTimeVisible: c } = d, { getLabel: p } = x(), { setTimeVisible: u } = g((e) => e.actions), T = v(), f = () => {
-    o && s && (o(r[0].startTime), c && u(c));
-  }, h = (e) => {
+import { Tooltip as d, Typography as n } from "@m4l/base";
+import { EventClusterStyled as v, PointEventStyled as b } from "../../slots/VideoTimeLineSelectorSlots.js";
+import { useTheme as x } from "@mui/material";
+import { useModuleDictionary as C, useUserPreferences as _, getPropertyByString as g } from "@m4l/core";
+import { VIDEO_TIME_LINE_SELECTOR_DICTIONARY_KEYS as D } from "../../dictionary.js";
+import { useVideoTimeLineSelectorStore as L } from "../../store/useVideoTimeLineSelectorStore.js";
+import { VIDEO_TIME_LINE_SELECTOR_CLASSES as N } from "../../constants.js";
+const I = E(({ clusteredEvent: p, onEventClick: o }) => {
+  const { events: r, position: a, isCluster: s, jumpNextTimeVisible: c } = p, { getLabel: u } = C(), { formatDate: m } = _(), { setTimeVisible: f } = L((e) => e.actions), T = x(), h = () => {
+    o && s && (o(r[0].startTime), c && f(c));
+  }, y = (e) => {
     o && o(e);
   };
   if (s)
     return /* @__PURE__ */ t(
-      m,
+      d,
       {
         arrow: !0,
         title: /* @__PURE__ */ i("div", { children: [
           /* @__PURE__ */ i(n, { variant: "bodyStandard", color: "text.contrastText", fontWeight: "bold", children: [
             r.length,
             " ",
-            p(_.event_cluster)
+            u(D.event_cluster)
           ] }),
           r.map((e, S) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ i(n, { variant: "captionStandard", color: "text.contrastText", children: [
-            /* @__PURE__ */ t("span", { style: { color: C(T.vars.palette, e.color, "text.primary") }, children: "•" }),
+            /* @__PURE__ */ t("span", { style: { color: g(T.vars.palette, e.color, "text.primary") }, children: "•" }),
             " ",
             e.label,
-            " - ",
-            e.startTime.toLocaleTimeString()
+            " ",
+            "-",
+            " ",
+            m({
+              presentationType: "time",
+              value: e.startTime
+            })
           ] }) }, S))
         ] }),
         placement: "top",
         children: /* @__PURE__ */ t(
-          y,
+          v,
           {
-            className: L.eventCluster,
+            className: N.eventCluster,
             role: "button",
             "aria-label": "Event cluster",
             style: {
               left: a.left
             },
-            onDoubleClick: f,
+            onDoubleClick: h,
             children: /* @__PURE__ */ t(
               n,
               {
@@ -56,13 +61,16 @@ const N = E(({ clusteredEvent: d, onEventClick: o }) => {
     );
   const l = r[0];
   return /* @__PURE__ */ t(
-    m,
+    d,
     {
       arrow: !0,
       title: /* @__PURE__ */ i(n, { variant: "bodyStandard", color: "text.contrastText", children: [
         l.label,
         /* @__PURE__ */ t("br", {}),
-        l.startTime.toLocaleString()
+        m({
+          presentationType: "datetime",
+          value: l.startTime
+        })
       ] }),
       placement: "top",
       children: /* @__PURE__ */ t(
@@ -72,13 +80,13 @@ const N = E(({ clusteredEvent: d, onEventClick: o }) => {
           style: {
             left: a.left
           },
-          onClick: () => h(l.startTime)
+          onClick: () => y(l.startTime)
         }
       )
     }
   );
 });
-N.displayName = "EventCluster";
+I.displayName = "EventCluster";
 export {
-  N as EventCluster
+  I as EventCluster
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/gclick",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "publishConfig": {
     "access": "public"
   },
@@ -50,8 +50,8 @@
     "@mui/material": "5.16.7",
     "immer": "9.0.21",
     "react-hook-form": "7.71.1",
-    "@googlemaps/js-api-loader": "1.16.10",
     "leaflet.markercluster": "1.5.3",
+    "@googlemaps/js-api-loader": "1.16.10",
     "yup": "0.32.11"
   }
 }