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 ZeldaIcon from '../common/ZeldaIcon';
  10 import { getLink, getTranslation } from '../../helpers/Technique';
  11 import i18n from '../../i18n';
  12
  13 const Pin = ({ pin }) => {
  14         const { storePosition } = useOpenSeadragon();
  15         const [showPopover, setShowPopover] = React.useState(false);
  16         const ref = React.useRef();
  17
  18         const navigate = useNavigate();
  19
  20         const onClick = React.useCallback((e) => {
  21                 if (ref.current && ref.current.contains(e.originalTarget)) {
  22                         if (e.originalTarget.tagName === 'A') {
  23                                 storePosition();
  24                                 navigate(new URL(e.originalTarget.href).pathname);
  25                         }
  26                 } else {
  27                         if (pin.technique.type === 'location') {
  28                                 setShowPopover(s => !s);
  29                         } else {
  30                                 storePosition();
  31                                 navigate(getLink(pin.technique));
  32                         }
  33                 }
  34         }, [pin]);
  35
  36         const title = React.useMemo(() => {
  37                 return getTranslation(pin.technique, 'title', i18n.language);
  38         }, [pin, i18n.language]);
  39
  40         return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
  41                 <div className="map-pin">
  42                         <Link to={getLink(pin.technique)}>
  43                                 {pin.marker ?
  44                                         <ZeldaIcon title={title} name={pin.marker} />
  45                                 :
  46                                         <Icon.PIN title={title} />
  47                                 }
  48                         </Link>
  49                         {pin.technique.type === 'location' ?
  50                                 <div ref={ref}>
  51                                         <Popover show={showPopover} technique={pin.technique} />
  52                                 </div>
  53                         : null}
  54                 </div>
  55         </Overlay>;
  56 };
  57
  58 Pin.propTypes = {
  59         pin: PropTypes.shape({
  60                 marker: PropTypes.string,
  61                 technique: PropTypes.shape({
  62                         type: PropTypes.string,
  63                 }),
  64                 x: PropTypes.number,
  65                 y: PropTypes.number,
  66         }),
  67 };
  68
  69 export default Pin;