@mamrp/components 1.7.54 → 1.7.56

package/dist/index.mjs

@@ -6163,6 +6163,426 @@ var UploadImage2 = ({
   );
 };
 var upload_image_default = UploadImage2;
+
+// src/map-location-picker/index.tsx
+import {
+  Box as Box27,
+  IconButton as IconButton14,
+  Paper as Paper2,
+  Typography as Typography19,
+  CircularProgress as CircularProgress11,
+  useTheme as useTheme9,
+  Button as Button15,
+  Dialog as Dialog10,
+  DialogTitle as DialogTitle8,
+  DialogContent as DialogContent8,
+  DialogActions as DialogActions5
+} from "@mui/material";
+import { MdMyLocation, MdOutlineClear as MdOutlineClear2 } from "react-icons/md";
+import { useEffect as useEffect12, useRef as useRef8, useState as useState17 } from "react";
+import toast2, { Toaster } from "react-hot-toast";
+import { useController } from "react-hook-form";
+function MapLocationPicker({
+  control,
+  nameLat,
+  nameLong,
+  nameAddress,
+  isLoading = false,
+  defaultLat = 36.557153,
+  defaultLng = 52.679547,
+  defaultZoom = 16,
+  minZoom = 10,
+  maxZoom = 19
+}) {
+  const theme3 = useTheme9();
+  const isDarkMode = theme3.palette.mode === "dark";
+  const { field: latField, fieldState: latState } = useController({
+    name: nameLat,
+    control
+  });
+  const { field: longField, fieldState: longState } = useController({
+    name: nameLong,
+    control
+  });
+  const addressController = nameAddress ? useController({ name: nameAddress, control }) : null;
+  const error = !!latState.error || !!longState.error;
+  const helperText = latState.error?.message || longState.error?.message || "";
+  const latitude = latField.value;
+  const longitude = longField.value;
+  const handleLocationChange = (lat, lng) => {
+    latField.onChange(lat);
+    longField.onChange(lng);
+  };
+  const handleAddressChange = nameAddress ? (address) => addressController?.field.onChange(address) : void 0;
+  const mapRef = useRef8(null);
+  const mapInstanceRef = useRef8(null);
+  const markerRef = useRef8(null);
+  const [isMapLoading, setIsMapLoading] = useState17(true);
+  const [isGeocoding, setIsGeocoding] = useState17(false);
+  const [isGeolocating, setIsGeolocating] = useState17(false);
+  const [showGpsDialog, setShowGpsDialog] = useState17(false);
+  const [gpsErrorType, setGpsErrorType] = useState17("other");
+  const [zoom, setZoom] = useState17(defaultZoom);
+  const hasExistingLocation = latitude !== null && longitude !== null;
+  const initialLat = hasExistingLocation ? latitude : defaultLat;
+  const initialLng = hasExistingLocation ? longitude : defaultLng;
+  const initialZoom = hasExistingLocation ? 17 : defaultZoom;
+  useEffect12(() => {
+    if (!document.getElementById("leaflet-css")) {
+      const link = document.createElement("link");
+      link.id = "leaflet-css";
+      link.rel = "stylesheet";
+      link.href = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css";
+      document.head.appendChild(link);
+    }
+    const script = document.createElement("script");
+    script.src = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js";
+    script.async = true;
+    script.onload = () => {
+      setIsMapLoading(false);
+      initializeMap();
+    };
+    document.body.appendChild(script);
+    return () => {
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, []);
+  const reverseGeocode = async (lat, lng) => {
+    try {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}&accept-language=fa`
+      );
+      if (!response.ok) throw new Error("Failed to fetch address");
+      const data = await response.json();
+      const fullAddress = data.display_name || "";
+      const parts = fullAddress.split(",");
+      return parts.slice(0, 4).map((p) => p.trim()).join("\u060C ");
+    } catch {
+      return "";
+    }
+  };
+  const initializeMap = () => {
+    if (!window.L || !mapRef.current || mapInstanceRef.current) return;
+    const L = window.L;
+    const map = L.map(mapRef.current, {
+      attributionControl: false,
+      minZoom
+    }).setView([initialLat, initialLng], initialZoom);
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      attribution: "\xA9 OpenStreetMap contributors",
+      maxZoom
+    }).addTo(map);
+    map.on("zoomend", () => {
+      setZoom(map.getZoom());
+    });
+    if (hasExistingLocation) {
+      markerRef.current = L.marker([initialLat, initialLng], {
+        draggable: true
+      }).addTo(map);
+      markerRef.current.on("dragend", async (e) => {
+        const { lat, lng } = e.target.getLatLng();
+        handleLocationChange(lat, lng);
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+      });
+    }
+    map.on("click", async (e) => {
+      const { lat, lng } = e.latlng;
+      if (!markerRef.current) {
+        markerRef.current = L.marker([lat, lng], { draggable: true }).addTo(
+          map
+        );
+        markerRef.current.on("dragend", async (dragEvent) => {
+          const { lat: dragLat, lng: dragLng } = dragEvent.target.getLatLng();
+          handleLocationChange(dragLat, dragLng);
+          if (handleAddressChange) {
+            setIsGeocoding(true);
+            const address = await reverseGeocode(dragLat, dragLng);
+            handleAddressChange(address);
+            setIsGeocoding(false);
+          }
+        });
+      } else {
+        markerRef.current.setLatLng([lat, lng]);
+      }
+      handleLocationChange(lat, lng);
+      if (handleAddressChange) {
+        setIsGeocoding(true);
+        const address = await reverseGeocode(lat, lng);
+        handleAddressChange(address);
+        setIsGeocoding(false);
+      }
+    });
+    mapInstanceRef.current = map;
+  };
+  useEffect12(() => {
+    if (!mapInstanceRef.current || !mapRef.current) return;
+    const L = window.L;
+    if (latitude === null || longitude === null) {
+      if (markerRef.current) {
+        markerRef.current.remove();
+        markerRef.current = null;
+      }
+      return;
+    }
+    if (!markerRef.current) {
+      markerRef.current = L.marker([latitude, longitude], {
+        draggable: true
+      }).addTo(mapInstanceRef.current);
+      markerRef.current.on("dragend", async (e) => {
+        const { lat, lng } = e.target.getLatLng();
+        handleLocationChange(lat, lng);
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+      });
+    } else {
+      markerRef.current.setLatLng([latitude, longitude]);
+    }
+    mapInstanceRef.current.setView([latitude, longitude], zoom, {
+      animate: true
+    });
+  }, [latitude, longitude]);
+  const checkGeolocationSupport = () => {
+    if (!navigator.geolocation) {
+      toast2.error("\u0645\u0631\u0648\u0631\u06AF\u0631 \u0634\u0645\u0627 \u0627\u0632 \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u067E\u0634\u062A\u06CC\u0628\u0627\u0646\u06CC \u0646\u0645\u06CC\u200C\u06A9\u0646\u062F.");
+      return false;
+    }
+    return true;
+  };
+  const handleCurrentLocation = async () => {
+    if (!checkGeolocationSupport() || !mapInstanceRef.current) return;
+    if (navigator.permissions) {
+      try {
+        const permissionStatus = await navigator.permissions.query({
+          name: "geolocation"
+        });
+        if (permissionStatus.state === "denied") {
+          setGpsErrorType("permission");
+          setShowGpsDialog(true);
+          return;
+        }
+      } catch {
+      }
+    }
+    setIsGeolocating(true);
+    const timeoutId = setTimeout(() => {
+      if (isGeolocating) {
+        setIsGeolocating(false);
+        setGpsErrorType("gps_off");
+        setShowGpsDialog(true);
+      }
+    }, 5e3);
+    navigator.geolocation.getCurrentPosition(
+      async (pos) => {
+        clearTimeout(timeoutId);
+        setIsGeolocating(false);
+        const { latitude: lat, longitude: lng } = pos.coords;
+        const map = mapInstanceRef.current;
+        const L = window.L;
+        handleLocationChange(lat, lng);
+        if (!markerRef.current) {
+          markerRef.current = L.marker([lat, lng], { draggable: true }).addTo(
+            map
+          );
+          markerRef.current.on("dragend", async (e) => {
+            const { lat: dragLat, lng: dragLng } = e.target.getLatLng();
+            handleLocationChange(dragLat, dragLng);
+            if (handleAddressChange) {
+              setIsGeocoding(true);
+              const address = await reverseGeocode(dragLat, dragLng);
+              handleAddressChange(address);
+              setIsGeocoding(false);
+            }
+          });
+        } else {
+          markerRef.current.setLatLng([lat, lng]);
+        }
+        map.setView([lat, lng], 17, { animate: true });
+        if (handleAddressChange) {
+          setIsGeocoding(true);
+          const address = await reverseGeocode(lat, lng);
+          handleAddressChange(address);
+          setIsGeocoding(false);
+        }
+        toast2.success("\u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u0628\u0627 \u0645\u0648\u0641\u0642\u06CC\u062A \u062F\u0631\u06CC\u0627\u0641\u062A \u0634\u062F");
+      },
+      (error2) => {
+        clearTimeout(timeoutId);
+        setIsGeolocating(false);
+        switch (error2.code) {
+          case error2.PERMISSION_DENIED:
+            setGpsErrorType("permission");
+            break;
+          case error2.POSITION_UNAVAILABLE:
+          case error2.TIMEOUT:
+            setGpsErrorType("gps_off");
+            break;
+          default:
+            setGpsErrorType("other");
+            break;
+        }
+        setShowGpsDialog(true);
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 8e3,
+        maximumAge: 0
+      }
+    );
+  };
+  const handleClearLocation = () => {
+    if (markerRef.current) {
+      markerRef.current.remove();
+      markerRef.current = null;
+    }
+    handleLocationChange(null, null);
+    if (handleAddressChange) handleAddressChange("");
+  };
+  const handleGpsDialogClose = () => setShowGpsDialog(false);
+  const handleRetryLocation = () => {
+    setShowGpsDialog(false);
+    setTimeout(handleCurrentLocation, 500);
+  };
+  const handleOpenSettings = () => {
+    setShowGpsDialog(false);
+    toast2(
+      /* @__PURE__ */ React.createElement("div", { dir: "rtl", style: { textAlign: "right" } }, /* @__PURE__ */ React.createElement(Typography19, { variant: "body2", sx: { mb: 1 } }, "\u0644\u0637\u0641\u0627\u064B \u0645\u0631\u0627\u062D\u0644 \u0632\u06CC\u0631 \u0631\u0627 \u0627\u0646\u062C\u0627\u0645 \u062F\u0647\u06CC\u062F:"), /* @__PURE__ */ React.createElement(Typography19, { variant: "caption", component: "div" }, "\u06F1. \u062A\u0646\u0638\u06CC\u0645\u0627\u062A \u062F\u0633\u062A\u06AF\u0627\u0647"), /* @__PURE__ */ React.createElement(Typography19, { variant: "caption", component: "div" }, "\u06F2. \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC"), /* @__PURE__ */ React.createElement(Typography19, { variant: "caption", component: "div" }, "\u06F3. \u0641\u0639\u0627\u0644 \u06A9\u0631\u062F\u0646 GPS")),
+      { duration: 8e3 }
+    );
+  };
+  return /* @__PURE__ */ React.createElement(Box27, { sx: { width: "100%" } }, /* @__PURE__ */ React.createElement(Toaster, { position: "top-center" }), /* @__PURE__ */ React.createElement(Dialog10, { open: showGpsDialog, onClose: handleGpsDialogClose }, /* @__PURE__ */ React.createElement(DialogTitle8, null, "\u0645\u0634\u06A9\u0644 \u062F\u0631 \u062F\u0631\u06CC\u0627\u0641\u062A \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC"), /* @__PURE__ */ React.createElement(DialogContent8, null, gpsErrorType === "permission" ? /* @__PURE__ */ React.createElement(Typography19, null, "\u062F\u0633\u062A\u0631\u0633\u06CC \u0628\u0647 \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u0631\u062F \u0634\u062F\u0647 \u0627\u0633\u062A.", /* @__PURE__ */ React.createElement("br", null), "\u06F1. \u0631\u0648\u06CC \u0622\u06CC\u06A9\u0648\u0646 \u0642\u0641\u0644 \u062F\u0631 \u0646\u0648\u0627\u0631 \u0622\u062F\u0631\u0633 \u06A9\u0644\u06CC\u06A9 \u06A9\u0646\u06CC\u062F", /* @__PURE__ */ React.createElement("br", null), "\u06F2. \u0645\u0648\u0642\u0639\u06CC\u062A \u0645\u06A9\u0627\u0646\u06CC \u2192 \u0627\u062C\u0627\u0632\u0647 \u062F\u0647\u06CC\u062F") : gpsErrorType === "gps_off" ? /* @__PURE__ */ React.createElement(Typography19, null, "GPS \u062E\u0627\u0645\u0648\u0634 \u0627\u0633\u062A. \u0644\u0637\u0641\u0627\u064B \u0641\u0639\u0627\u0644 \u06A9\u0646\u06CC\u062F.") : /* @__PURE__ */ React.createElement(Typography19, null, "\u062E\u0637\u0627\u06CC\u06CC \u0631\u062E \u062F\u0627\u062F\u0647 \u0627\u0633\u062A. \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.")), /* @__PURE__ */ React.createElement(DialogActions5, { sx: { pb: 2, pr: 2 } }, /* @__PURE__ */ React.createElement(Button15, { onClick: handleGpsDialogClose }, "\u0627\u0646\u0635\u0631\u0627\u0641"), gpsErrorType === "permission" ? /* @__PURE__ */ React.createElement(
+    Button15,
+    {
+      onClick: handleRetryLocation,
+      variant: "contained",
+      color: "primary"
+    },
+    "\u062A\u0644\u0627\u0634 \u0645\u062C\u062F\u062F"
+  ) : /* @__PURE__ */ React.createElement(
+    Button15,
+    {
+      onClick: handleOpenSettings,
+      variant: "contained",
+      color: "primary"
+    },
+    "\u0631\u0627\u0647\u0646\u0645\u0627"
+  ))), /* @__PURE__ */ React.createElement(Box27, { sx: { position: "relative", height: "370px", width: "100%" } }, /* @__PURE__ */ React.createElement(
+    Paper2,
+    {
+      sx: {
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        borderRadius: 2,
+        border: error ? 2 : 0,
+        borderColor: error ? "error.main" : "transparent"
+      }
+    },
+    (isMapLoading || isGeocoding || isGeolocating || isLoading) && /* @__PURE__ */ React.createElement(
+      Box27,
+      {
+        sx: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isDarkMode ? "rgba(18,18,18,0.9)" : "rgba(255,255,255,0.8)",
+          zIndex: 1e3,
+          flexDirection: "column",
+          gap: 1
+        }
+      },
+      /* @__PURE__ */ React.createElement(CircularProgress11, null),
+      /* @__PURE__ */ React.createElement(Typography19, null, isMapLoading ? "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u0646\u0642\u0634\u0647..." : isLoading ? "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0630\u0627\u0631\u06CC \u0627\u0637\u0644\u0627\u0639\u0627\u062A \u0645\u0648\u0642\u0639\u06CC\u062A..." : isGeocoding ? "\u062F\u0631 \u062D\u0627\u0644 \u062F\u0631\u06CC\u0627\u0641\u062A \u0622\u062F\u0631\u0633..." : "\u062F\u0631 \u062D\u0627\u0644 \u062F\u0631\u06CC\u0627\u0641\u062A \u0645\u0648\u0642\u0639\u06CC\u062A \u0641\u0639\u0644\u06CC...")
+    ),
+    /* @__PURE__ */ React.createElement("div", { ref: mapRef, style: { height: "100%", width: "100%" } }),
+    /* @__PURE__ */ React.createElement(
+      Box27,
+      {
+        sx: {
+          position: "absolute",
+          bottom: 16,
+          right: 16,
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          zIndex: 1e3
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        IconButton14,
+        {
+          onClick: handleCurrentLocation,
+          disabled: isGeolocating,
+          sx: {
+            backgroundColor: isDarkMode ? "#1e1e1e" : "white",
+            boxShadow: 2,
+            "&:hover": {
+              backgroundColor: isDarkMode ? "#2a2a2a" : "#f5f5f5"
+            }
+          },
+          title: "\u0645\u0648\u0642\u0639\u06CC\u062A \u0641\u0639\u0644\u06CC"
+        },
+        /* @__PURE__ */ React.createElement(MdMyLocation, null)
+      ),
+      hasExistingLocation && /* @__PURE__ */ React.createElement(
+        IconButton14,
+        {
+          onClick: handleClearLocation,
+          sx: {
+            backgroundColor: isDarkMode ? "#1e1e1e" : "white",
+            color: theme3.palette.error.main,
+            boxShadow: 2,
+            "&:hover": {
+              backgroundColor: isDarkMode ? "#2a2a2a" : "#f5f5f5"
+            }
+          },
+          title: "\u067E\u0627\u06A9 \u06A9\u0631\u062F\u0646 \u0645\u0648\u0642\u0639\u06CC\u062A"
+        },
+        /* @__PURE__ */ React.createElement(MdOutlineClear2, null)
+      )
+    )
+  )), /* @__PURE__ */ React.createElement(
+    Box27,
+    {
+      sx: {
+        mt: 1,
+        p: 1.5,
+        backgroundColor: isDarkMode ? "#1e1e1e" : "#f5f5f5",
+        borderRadius: 1,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Typography19, { variant: "body2", sx: { fontFamily: "monospace" } }, /* @__PURE__ */ React.createElement("strong", null, "\u0639\u0631\u0636 \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC:"), " ", typeof latitude === "number" ? latitude.toFixed(6) : "\u2014"),
+    /* @__PURE__ */ React.createElement(Typography19, { variant: "body2", sx: { fontFamily: "monospace" } }, /* @__PURE__ */ React.createElement("strong", null, "\u0637\u0648\u0644 \u062C\u063A\u0631\u0627\u0641\u06CC\u0627\u06CC\u06CC:"), " ", typeof longitude === "number" ? longitude.toFixed(6) : "\u2014")
+  ), error && helperText && /* @__PURE__ */ React.createElement(
+    Typography19,
+    {
+      variant: "caption",
+      sx: {
+        color: "error.main",
+        mt: 0.5,
+        display: "block",
+        px: 1.5
+      }
+    },
+    helperText
+  ));
+}
 export {
   Page as Accordion,
   AdvancedSearchButton,
@@ -6186,6 +6606,7 @@ export {
   HorizontalStepper,
   imgViewer as ImgViewer,
   LicensePlate,
+  MapLocationPicker,
   mobile_date_time_picker_default as MobileDateTimePicker,
   ConfirmationDialog2 as Modal,
   selector_default as NestedSelectort,