1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Link, useNavigate } from 'react-router-dom';
5 import Overlay from './Overlay';
6 import Popover from './Popover';
7 import Icon from '../common/Icon';
8 import { getLink, getTranslation } from '../../helpers/Technique';
9 import i18n from '../../i18n';
11 const Pin = ({ pin }) => {
12 const [showPopover, setShowPopover] = React.useState(false);
13 const ref = React.useRef();
15 const navigate = useNavigate();
17 const onClick = React.useCallback((e) => {
18 if (ref.current && ref.current.contains(e.originalTarget)) {
19 if (e.originalTarget.tagName === 'A') {
20 navigate(new URL(e.originalTarget.href).pathname);
23 if (pin.technique.type === 'location') {
24 setShowPopover(s => !s);
26 navigate(getLink(pin.technique));
31 return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
32 <div className="map-pin">
33 <Link to={getLink(pin.technique)}>
34 <Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
36 {pin.technique.type === 'location' ?
38 <Popover show={showPopover} technique={pin.technique} />
46 pin: PropTypes.shape({
47 technique: PropTypes.shape({
48 type: PropTypes.string,