1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Link, useNavigate } from 'react-router-dom';
5 import { useOpenSeadragon } from './OpenSeadragon';
6 import Overlay from './Overlay';
7 import Popover from './Popover';
8 import Icon from '../common/Icon';
9 import { getLink, getTranslation } from '../../helpers/Technique';
10 import i18n from '../../i18n';
12 const Pin = ({ pin }) => {
13 const { storePosition } = useOpenSeadragon();
14 const [showPopover, setShowPopover] = React.useState(false);
15 const ref = React.useRef();
17 const navigate = useNavigate();
19 const onClick = React.useCallback((e) => {
20 if (ref.current && ref.current.contains(e.originalTarget)) {
21 if (e.originalTarget.tagName === 'A') {
23 navigate(new URL(e.originalTarget.href).pathname);
26 if (pin.technique.type === 'location') {
27 setShowPopover(s => !s);
30 navigate(getLink(pin.technique));
35 return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
36 <div className="map-pin">
37 <Link to={getLink(pin.technique)}>
38 <Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
40 {pin.technique.type === 'location' ?
42 <Popover show={showPopover} technique={pin.technique} />
50 pin: PropTypes.shape({
51 technique: PropTypes.shape({
52 type: PropTypes.string,