resources/js/components/map/Pin.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Link, useNavigate } from 'react-router-dom';
   4
   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';
  11
  12 const Pin = ({ pin }) => {
  13         const { storePosition } = useOpenSeadragon();
  14         const [showPopover, setShowPopover] = React.useState(false);
  15         const ref = React.useRef();
  16
  17         const navigate = useNavigate();
  18
  19         const onClick = React.useCallback((e) => {
  20                 if (ref.current && ref.current.contains(e.originalTarget)) {
  21                         if (e.originalTarget.tagName === 'A') {
  22                                 storePosition();
  23                                 navigate(new URL(e.originalTarget.href).pathname);
  24                         }
  25                 } else {
  26                         if (pin.technique.type === 'location') {
  27                                 setShowPopover(s => !s);
  28                         } else {
  29                                 storePosition();
  30                                 navigate(getLink(pin.technique));
  31                         }
  32                 }
  33         }, [pin]);
  34
  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)} />
  39                         </Link>
  40                         {pin.technique.type === 'location' ?
  41                                 <div ref={ref}>
  42                                         <Popover show={showPopover} technique={pin.technique} />
  43                                 </div>
  44                         : null}
  45                 </div>
  46         </Overlay>;
  47 };
  48
  49 Pin.propTypes = {
  50         pin: PropTypes.shape({
  51                 technique: PropTypes.shape({
  52                         type: PropTypes.string,
  53                 }),
  54                 x: PropTypes.number,
  55                 y: PropTypes.number,
  56         }),
  57 };
  58
  59 export default Pin;