agviewermap-react 0.1.32 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agviewermap-react",
-  "version": "0.1.32",
+  "version": "0.1.35",
   "type": "module",
   "main": "dist/agviewermap-react.umd.cjs",
   "module": "dist/agviewermap-react.js",

package/dist/LazyModalContent-DIdquydV.js

@@ -1,237 +0,0 @@
-import { j as jsxRuntimeExports, M as MarkersContext, u as useIntl, a as MyModal, B as Button, T as Tooltip, b as BiPencil, C as Card, c as MarkerForm, d as debounce, t as transformMarker, S as Spinner, e as Search, I as Input, f as MapPin, g as MyButton, h as Trash2 } from "./index-BQl3wtjU.js";
-import { useState, useContext, useCallback, useRef, useMemo, useEffect } from "react";
-const ArrowUpRightIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "path",
-        {
-          stroke: "#373737",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "m5.833 14.167 8.334-8.334"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "path",
-        {
-          stroke: "#000",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M5.833 5.833h8.334v8.334"
-        }
-      )
-    ]
-  }
-);
-const EditMarkerModal = ({ marker, markerId, buttonClassName = "" }) => {
-  const [open, setOpen] = useState(false);
-  const { handleMarkerUpdate } = useContext(MarkersContext);
-  const intl = useIntl();
-  const _onChangeVisibility = useCallback(() => {
-    setOpen((prev) => !prev);
-  }, []);
-  const handlerEditMarker = (data) => {
-    console.log("data after editing", data);
-    console.log("data before editing", marker);
-    return handleMarkerUpdate(data);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MyModal,
-    {
-      trigger: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outline", size: "icon", tabIndex: -1, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Tooltip,
-        {
-          text: intl.formatMessage({
-            id: "app.agviewer_map.edit_marker",
-            defaultMessage: "Edit Marker"
-          }),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiPencil, { className: "w-5 h-5 action-icon" })
-        }
-      ) }),
-      title: intl.formatMessage({
-        id: "app.agviewer_map.edit_marker",
-        defaultMessage: "Edit Marker"
-      }),
-      open,
-      setOpen,
-      headerClassName: "m-4",
-      onClose: _onChangeVisibility,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        MarkerForm,
-        {
-          marker,
-          onSubmit: handlerEditMarker,
-          onCancel: _onChangeVisibility,
-          submitButtonText: intl.formatMessage({
-            id: "app.agviewer_map.save_changes",
-            defaultMessage: "Save Changes"
-          })
-        }
-      ) })
-    }
-  );
-};
-const MarkerItem = ({ marker, onMarkerClick, onDeleteMarker, markersData, intl }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "marker-item rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 p-2 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "marker-item-info", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MapPin, { className: "h-4 w-4 text-primary flex-shrink-0" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: "text-sm font-medium text-gray-800 dark:text-gray-200 break-words leading-tight", children: marker == null ? void 0 : marker.title })
-  ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: intl.formatMessage({ id: "app.agviewer_map.focus_marker", defaultMessage: "Focus on the marker" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MyButton,
-      {
-        variant: "icon",
-        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
-        onClick: (e) => onMarkerClick(e, marker),
-        "data-marker-id": marker.id,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpRightIcon, { className: "w-4 h-4" })
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { text: intl.formatMessage({ id: "app.agviewer_map.delete_marker", defaultMessage: "Delete Marker" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MyButton,
-      {
-        variant: "icon",
-        className: "rounded-full p-1 hover:bg-gray-100 dark:hover:bg-gray-600",
-        onClick: (e) => onDeleteMarker(e, marker),
-        "data-marker-id": marker.id,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4 text-red-500" })
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      EditMarkerModal,
-      {
-        marker: markersData.find((m) => m.id === marker.id)
-      }
-    )
-  ] })
-] }) }) });
-function LazyModalContent({
-  markersData,
-  loading,
-  handleDeleteMarker,
-  onMarkerClick,
-  onClose,
-  intl
-}) {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-  const [isSearching, setIsSearching] = useState(false);
-  const [visibleItems, setVisibleItems] = useState(20);
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const scrollContainerRef = useRef(null);
-  const debouncedSearch = useCallback(
-    debounce((value) => {
-      setDebouncedSearchTerm(value);
-      setIsSearching(false);
-    }, 300),
-    []
-  );
-  const handleSearchChange = useCallback((e) => {
-    const value = e.target.value;
-    setSearchTerm(value);
-    setIsSearching(true);
-    debouncedSearch(value);
-  }, [debouncedSearch]);
-  const transformedMarkers = useMemo(() => {
-    if (!markersData || markersData.length === 0) return [];
-    return markersData.map((m) => transformMarker(m));
-  }, [markersData]);
-  const filteredMarkers = useMemo(() => {
-    if (!debouncedSearchTerm) return transformedMarkers;
-    const searchLower = debouncedSearchTerm.toLowerCase();
-    return transformedMarkers.filter(
-      (marker) => {
-        var _a, _b;
-        return (_b = (_a = marker == null ? void 0 : marker.title) == null ? void 0 : _a.toLowerCase()) == null ? void 0 : _b.includes(searchLower);
-      }
-    );
-  }, [transformedMarkers, debouncedSearchTerm]);
-  const visibleMarkers = useMemo(() => {
-    return filteredMarkers.slice(0, visibleItems);
-  }, [filteredMarkers, visibleItems]);
-  useEffect(() => {
-    setVisibleItems(20);
-  }, [debouncedSearchTerm]);
-  const loadMore = useCallback(() => {
-    if (isLoadingMore || visibleItems >= filteredMarkers.length) return;
-    setIsLoadingMore(true);
-    setTimeout(() => {
-      setVisibleItems((prev) => Math.min(prev + 20, filteredMarkers.length));
-      setIsLoadingMore(false);
-    }, 300);
-  }, [isLoadingMore, visibleItems, filteredMarkers.length]);
-  const handleScroll = useCallback((e) => {
-    const { scrollTop, scrollHeight, clientHeight } = e.target;
-    const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100;
-    if (isNearBottom && !isLoadingMore && visibleItems < filteredMarkers.length) {
-      loadMore();
-    }
-  }, [loadMore, isLoadingMore, visibleItems, filteredMarkers.length]);
-  const handleMarkerClick = useCallback((e, marker) => {
-    onMarkerClick(e, marker);
-    onClose();
-  }, [onMarkerClick, onClose]);
-  const handleDelete = useCallback((e, marker) => {
-    handleDeleteMarker(e, marker);
-  }, [handleDeleteMarker]);
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-40", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {}) });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-4 h-4 text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Input,
-        {
-          className: "pl-9 w-full text-sm h-9",
-          placeholder: intl.formatMessage({ id: "app.agviewer_map.search_station", defaultMessage: "Search Station" }),
-          value: searchTerm,
-          onChange: handleSearchChange
-        }
-      ),
-      isSearching && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: scrollContainerRef,
-        className: "overflow-y-auto h-[350px]",
-        onScroll: handleScroll,
-        children: filteredMarkers.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-20 p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { className: "text-sm text-gray-500 dark:text-gray-400", children: searchTerm ? intl.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) : intl.formatMessage({ id: "app.agviewer_map.no_station_found", defaultMessage: "No Station Found" }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          visibleMarkers.map((marker) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MarkerItem,
-            {
-              marker,
-              onMarkerClick: handleMarkerClick,
-              onDeleteMarker: handleDelete,
-              markersData,
-              intl
-            },
-            marker.id
-          )),
-          isLoadingMore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-primary" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Loading more..." })
-          ] }) }),
-          visibleItems >= filteredMarkers.length && filteredMarkers.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: intl.formatMessage({
-            id: "app.agviewer_map.all_results_loaded",
-            defaultMessage: "All results loaded"
-          }) }) })
-        ] })
-      }
-    )
-  ] });
-}
-export {
-  LazyModalContent as default
-};