@parkassist/pa-ui-library/dist/components/MySiteMap/Models/Sign.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 { getSignDetails } from './SignIcons';
import Pin from './Pin';
export default function Sign({
  sign,
  showPin,
  selected = false,
  editable = false,
  zoom = 0,
  renderTooltip = () => null,
  onClick = () => {},
  onEdited = () => {}
}) {
  var _a;
  const [hover, setHover] = useState(false);
  const [position, setPosition] = useState(new LatLng(sign.mapPosition.y + 5, sign.mapPosition.x + 15));
  const markerRef = useRef(null);
  const handleClick = () => {
    setHover(false);
    onClick(sign);
  };
  const toogleHover = hoberValue => {
    if (!renderTooltip || editable) return;
    setHover(hoberValue);
  };
  const handleDrag = () => {
    const marker = markerRef.current;
    if (marker != null) {
      const newPosition = marker.getLatLng();
      setPosition(newPosition);
      onEdited(sign, newPosition);
    }
  };
  const eventHandlers = {
    click: handleClick,
    mouseover: () => toogleHover(true),
    mouseout: () => toogleHover(false),
    dragend: handleDrag
  };
  const SignDetails = getSignDetails(sign.type, Boolean((_a = sign.restOfSign) === null || _a === void 0 ? void 0 : _a.is_out_of_service), selected, zoom);
  return _jsxs(_Fragment, {
    children: [selected && showPin && _jsx(Pin, {
      position: {
        y: position.lat,
        x: position.lng
      }
    }), _jsx(Marker, {
      draggable: editable,
      ref: markerRef,
      eventHandlers: eventHandlers,
      position: position,
      icon: SignDetails.icon,
      zIndexOffset: SignDetails.zIndex,
      children: hover && (renderTooltip === null || renderTooltip === void 0 ? void 0 : renderTooltip(sign))
    })]
  });
}