agvmap-react 0.1.39 → 0.1.40-43

package/README.md

@@ -44,45 +44,8 @@ VITE_AGV_API_PASSWORD=your_password
   }}
 
 >
-
-```
-
-> **Important**: The wrapper element must have class `agv-map-container` for scoped CSS to apply correctly. The component itself renders a `<div className="agv-map-container">` root — just place `<AgvMap>` inside your app's layout where the map should appear.
-
----
-
-## Package Consumption (for host apps)
-
-When installing `agvmap-react` in another application, follow these steps:
-
-### 1. Peer dependencies
-
-`react` and `react-dom` are **peer dependencies**. Your host app must provide them:
-
-```json
-// Your host app's package.json
-"dependencies": {
-  "react": "^18.0.0 || ^19.0.0",
-  "react-dom": "^18.0.0 || ^19.0.0",
-  "agvmap-react": "<version>"
-}
-```
-
-### 2. Import the CSS manually
-
-The package no longer injects CSS via a side-effect import. You must import `style.css` in your app's entry point:
-
-```js
-// In your app's entry file (e.g., main.jsx, App.jsx, or layout.jsx)
-import 'agvmap-react/style.css';
 ```
 
-### 3. All styles are scoped
-
-All CSS selectors are scoped under `.agv-map-container`. The map component's root element already has this class, so no additional wrapper is needed — just place `<AgvMap />` in your JSX.
-
----
-
 ## Project Goal
 
 Implement a map component with custom layers fetched from a REST API, to be integrated into a dashboard for visualization and analysis.

package/dist/LazyModalContent-DmuBEB7X.js

@@ -0,0 +1,196 @@
+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 S, h as X } from "./index-D0e1C1Q0.js";
+import { useState as m, useContext as Y, useCallback as o, 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: "#373737",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "m5.833 14.167 8.334-8.334"
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "path",
+        {
+          stroke: "#000",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M5.833 5.833h8.334v8.334"
+        }
+      )
+    ]
+  }
+), ee = ({ marker: s, markerId: f, buttonClassName: g = "" }) => {
+  const [d, i] = m(!1), { handleMarkerUpdate: t } = Y(z), c = A(), p = o(() => {
+    i((u) => !u);
+  }, []), h = (u) => t(u);
+  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: i,
+      headerClassName: "m-4",
+      onClose: p,
+      children: /* @__PURE__ */ e.jsx(V, { children: /* @__PURE__ */ e.jsx(
+        W,
+        {
+          marker: s,
+          onSubmit: h,
+          onCancel: p,
+          submitButtonText: c.formatMessage({
+            id: "app.agviewer_map.save_changes",
+            defaultMessage: "Save Changes"
+          })
+        }
+      ) })
+    }
+  );
+}, se = ({ marker: s, onMarkerClick: f, onDeleteMarker: g, markersData: d, intl: i }) => /* @__PURE__ */ e.jsx("div", { className: "marker-item rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 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 shrink-0" }),
+    /* @__PURE__ */ e.jsx("h5", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 wrap-break-word leading-tight", children: s == null ? void 0 : s.title })
+  ] }),
+  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+    /* @__PURE__ */ e.jsx(w, { text: i.formatMessage({ id: "app.agviewer_map.focus_marker", defaultMessage: "Focus on the marker" }), children: /* @__PURE__ */ e.jsx(
+      S,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: (t) => f(t, s),
+        "data-marker-id": s.id,
+        children: /* @__PURE__ */ e.jsx(D, { className: "w-4 h-4" })
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(w, { text: i.formatMessage({ id: "app.agviewer_map.delete_marker", defaultMessage: "Delete Marker" }), children: /* @__PURE__ */ e.jsx(
+      S,
+      {
+        variant: "icon",
+        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
+        onClick: (t) => g(t, 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((t) => t.id === s.id)
+      }
+    )
+  ] })
+] }) }) });
+function ne({
+  markersData: s,
+  loading: f,
+  handleDeleteMarker: g,
+  onMarkerClick: d,
+  onClose: i,
+  intl: t
+}) {
+  const [c, p] = m(""), [h, u] = m(""), [I, b] = m(!1), [l, y] = m(20), [x, k] = m(!1), L = Z(null), _ = o(
+    O((a) => {
+      u(a), b(!1);
+    }, 300),
+    []
+  ), T = o((a) => {
+    const r = a.target.value;
+    p(r), b(!0), _(r);
+  }, [_]), M = N(() => !s || s.length === 0 ? [] : s.map((a) => q(a)), [s]), n = N(() => {
+    if (!h) return M;
+    const a = h.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(a);
+      }
+    );
+  }, [M, h]), B = N(() => n.slice(0, l), [n, l]);
+  $(() => {
+    y(20);
+  }, [h]);
+  const C = o(() => {
+    x || l >= n.length || (k(!0), setTimeout(() => {
+      y((a) => Math.min(a + 20, n.length)), k(!1);
+    }, 300));
+  }, [x, l, n.length]), E = o((a) => {
+    const { scrollTop: r, scrollHeight: j, clientHeight: v } = a.target;
+    r + v >= j - 100 && !x && l < n.length && C();
+  }, [C, x, l, n.length]), F = o((a, r) => {
+    d(a, r), i();
+  }, [d, i]), R = o((a, r) => {
+    g(a, r);
+  }, [g]);
+  return f ? /* @__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-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" }),
+      /* @__PURE__ */ e.jsx(
+        K,
+        {
+          className: "pl-9 w-full text-sm h-9",
+          placeholder: t.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-gray-500 dark:text-gray-400", children: c ? t.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) : t.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          B.map((a) => /* @__PURE__ */ e.jsx(
+            se,
+            {
+              marker: a,
+              onMarkerClick: F,
+              onDeleteMarker: R,
+              markersData: s,
+              intl: t
+            },
+            a.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-gray-500 dark:text-gray-400", children: "Loading more..." })
+          ] }) }),
+          l >= 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-gray-500 dark:text-gray-400", children: t.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-D0e1C1Q0.js";
+export {
+  p as AgvMap
+};