@parkassist/pa-ui-library/dist/components/MySiteMap/Models/EditableBay.js

INX Platform elements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { Marker } from 'react-leaflet';
import { LatLng } from 'leaflet';
import { getBayPosition, getBayRadius } from '../utils/bayUtils';
import Pin from './Pin';
import { getBayIcon } from './EditableBayIcons';
function EditableBay({
  bay,
  showPin,
  selected = false,
  zoom = 0,
  onClick = () => {},
  onEdited = () => {}
}) {
  const radius = getBayRadius(bay.mapPosition.w, zoom);
  const [position, setPosition] = useState(getBayPosition(bay.mapPosition));
  const markerRef = useRef(null);
  const handleClick = bay => {
    if (!onClick) return;
    onClick(bay);
  };
  const handleDrag = () => {
    const marker = markerRef.current;
    if (marker != null) {
      const newPosition = marker.getLatLng();
      setPosition(new LatLng(newPosition.lat, newPosition.lng));
      onEdited(bay, newPosition);
    }
  };
  const eventHandlers = {
    click: () => handleClick(bay),
    dragend: handleDrag
  };
  return _jsxs(_Fragment, {
    children: [selected && showPin && _jsx(Pin, {
      position: {
        y: position.lat,
        x: position.lng
      }
    }), _jsx(Marker, {
      ref: markerRef,
      draggable: true,
      eventHandlers: eventHandlers,
      position: position,
      icon: getBayIcon(bay, selected, radius),
      zIndexOffset: 99
    })]
  });
}
export default EditableBay;