agvmap-react 0.3.1 → 0.3.4

package/dist/LazyModalContent-BUaC56Il.js

@@ -0,0 +1,241 @@
+import { j as e, M as z, u as A, a as H, B as P, T as w, b as U, C as V, c as W, d as O, t as q, S as G, e as J, I as K, f as Q, g as y, h as X } from "./index-PA3gIYcW.js";
+import { useState as h, useContext as Y, useCallback as l, useRef as Z, useMemo as N, useEffect as $ } from "react";
+const D = (s) => /* @__PURE__ */ e.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 20,
+    height: 20,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    ...s,
+    children: [
+      /* @__PURE__ */ e.jsx(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "m5.833 14.167 8.334-8.334"
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "path",
+        {
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5.833 5.833h8.334v8.334"
+        }
+      )
+    ]
+  }
+), ee = ({ marker: s, markerId: g, buttonClassName: u = "" }) => {
+  const [d, o] = h(!1), { handleMarkerUpdate: a } = Y(z), c = A(), p = l(() => {
+    o((f) => !f);
+  }, []), m = (f) => a(f);
+  return /* @__PURE__ */ e.jsx(
+    H,
+    {
+      trigger: /* @__PURE__ */ e.jsx(P, { variant: "outline", size: "icon", tabIndex: -1, children: /* @__PURE__ */ e.jsx(
+        w,
+        {
+          text: c.formatMessage({
+            id: "app.agviewer_map.edit_marker",
+            defaultMessage: "Edit Marker"
+          }),
+          children: /* @__PURE__ */ e.jsx(U, { className: "w-5 h-5 action-icon" })
+        }
+      ) }),
+      title: c.formatMessage({
+        id: "app.agviewer_map.edit_marker",
+        defaultMessage: "Edit Marker"
+      }),
+      open: d,
+      setOpen: o,
+      headerClassName: "m-4",
+      onClose: p,
+      children: /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx(
+        W,
+        {
+          marker: s,
+          onSubmit: m,
+          onCancel: p,
+          submitButtonText: c.formatMessage({
+            id: "app.agviewer_map.save_changes",
+            defaultMessage: "Save Changes"
+          })
+        }
+      ) })
+    }
+  );
+}, se = ({
+  marker: s,
+  onMarkerClick: g,
+  onDeleteMarker: u,
+  markersData: d,
+  intl: o
+}) => /* @__PURE__ */ e.jsx("div", { className: "marker-item rounded-md hover:bg-accent p-2 mb-2", children: /* @__PURE__ */ e.jsx("div", { className: "marker-item-info", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+    /* @__PURE__ */ e.jsx(Q, { className: "h-4 w-4 text-primary flex-shrink-0" }),
+    /* @__PURE__ */ e.jsx("h5", { className: "text-sm font-medium text-mute-foreground break-words leading-tight", children: s == null ? void 0 : s.title })
+  ] }),
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+    /* @__PURE__ */ e.jsx(
+      w,
+      {
+        text: o.formatMessage({
+          id: "app.agviewer_map.focus_marker",
+          defaultMessage: "Focus on the marker"
+        }),
+        children: /* @__PURE__ */ e.jsx(
+          y,
+          {
+            variant: "icon",
+            className: "rounded-full p-1 text-muted-foreground dark:text-gray-300 hover:bg-accent hover:text-foreground",
+            onClick: (a) => g(a, s),
+            "data-marker-id": s.id,
+            children: /* @__PURE__ */ e.jsx(D, { className: "w-5 h-5" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      w,
+      {
+        text: o.formatMessage({
+          id: "app.agviewer_map.delete_marker",
+          defaultMessage: "Delete Marker"
+        }),
+        children: /* @__PURE__ */ e.jsx(
+          y,
+          {
+            variant: "icon",
+            className: "rounded-full p-1 text-foreground hover:bg-accent hover:text-accent-foreground",
+            onClick: (a) => u(a, s),
+            "data-marker-id": s.id,
+            children: /* @__PURE__ */ e.jsx(X, { className: "w-4 h-4 text-red-500" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      ee,
+      {
+        marker: d.find((a) => a.id === s.id)
+      }
+    )
+  ] })
+] }) }) });
+function ne({
+  markersData: s,
+  loading: g,
+  handleDeleteMarker: u,
+  onMarkerClick: d,
+  onClose: o,
+  intl: a
+}) {
+  const [c, p] = h(""), [m, f] = h(""), [I, b] = h(!1), [i, k] = h(20), [x, _] = h(!1), L = Z(null), C = l(
+    O((t) => {
+      f(t), b(!1);
+    }, 300),
+    []
+  ), T = l(
+    (t) => {
+      const r = t.target.value;
+      p(r), b(!0), C(r);
+    },
+    [C]
+  ), M = N(() => !s || s.length === 0 ? [] : s.map((t) => q(t)), [s]), n = N(() => {
+    if (!m) return M;
+    const t = m.toLowerCase();
+    return M.filter(
+      (r) => {
+        var j, v;
+        return (v = (j = r == null ? void 0 : r.title) == null ? void 0 : j.toLowerCase()) == null ? void 0 : v.includes(t);
+      }
+    );
+  }, [M, m]), B = N(() => n.slice(0, i), [n, i]);
+  $(() => {
+    k(20);
+  }, [m]);
+  const S = l(() => {
+    x || i >= n.length || (_(!0), setTimeout(() => {
+      k((t) => Math.min(t + 20, n.length)), _(!1);
+    }, 300));
+  }, [x, i, n.length]), E = l(
+    (t) => {
+      const { scrollTop: r, scrollHeight: j, clientHeight: v } = t.target;
+      r + v >= j - 100 && !x && i < n.length && S();
+    },
+    [S, x, i, n.length]
+  ), F = l(
+    (t, r) => {
+      d(t, r), o();
+    },
+    [d, o]
+  ), R = l(
+    (t, r) => {
+      u(t, r);
+    },
+    [u]
+  );
+  return g ? /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center h-40", children: /* @__PURE__ */ e.jsx(G, {}) }) : /* @__PURE__ */ e.jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ e.jsx(J, { className: "w-4 h-4 text-muted-foreground absolute left-3 top-1/2 transform -translate-y-1/2" }),
+      /* @__PURE__ */ e.jsx(
+        K,
+        {
+          className: "pl-9 w-full  h-9",
+          placeholder: a.formatMessage({
+            id: "app.agviewer_map.search_station",
+            defaultMessage: "Search Station"
+          }),
+          value: c,
+          onChange: T
+        }
+      ),
+      I && /* @__PURE__ */ e.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }) })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        ref: L,
+        className: "overflow-y-auto h-[350px]",
+        onScroll: E,
+        children: n.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-20 p-4", children: /* @__PURE__ */ e.jsx("h5", { className: "text-sm text-muted-foreground", children: c ? a.formatMessage({
+          id: "app.agviewer_map.no_station_found",
+          defaultMessage: "No Station Found"
+        }) : a.formatMessage({
+          id: "app.agviewer_map.no_station_found",
+          defaultMessage: "No Station Found"
+        }) }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          B.map((t) => /* @__PURE__ */ e.jsx(
+            se,
+            {
+              marker: t,
+              onMarkerClick: F,
+              onDeleteMarker: R,
+              markersData: s,
+              intl: a
+            },
+            t.id
+          )),
+          x && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-sm text-muted-foreground", children: "Loading more..." })
+          ] }) }),
+          i >= n.length && n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm text-muted-foreground", children: a.formatMessage({
+            id: "app.agviewer_map.all_results_loaded",
+            defaultMessage: "All results loaded"
+          }) }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ne as default
+};

package/dist/agviewermap-react.js

@@ -0,0 +1,4 @@
+import { A as p } from "./index-PA3gIYcW.js";
+export {
+  p as AgvMap
+};