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 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';
  10
  11 const Pin = ({ pin }) => {
  12         const [showPopover, setShowPopover] = React.useState(false);
  13         const ref = React.useRef();
  14
  15         const navigate = useNavigate();
  16
  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);
  21                         }
  22                 } else {
  23                         if (pin.technique.type === 'location') {
  24                                 setShowPopover(s => !s);
  25                         } else {
  26                                 navigate(getLink(pin.technique));
  27                         }
  28                 }
  29         }, [pin]);
  30
  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)} />
  35                         </Link>
  36                         {pin.technique.type === 'location' ?
  37                                 <div ref={ref}>
  38                                         <Popover show={showPopover} technique={pin.technique} />
  39                                 </div>
  40                         : null}
  41                 </div>
  42         </Overlay>;
  43 };
  44
  45 Pin.propTypes = {
  46         pin: PropTypes.shape({
  47                 technique: PropTypes.shape({
  48                         type: PropTypes.string,
  49                 }),
  50                 x: PropTypes.number,
  51                 y: PropTypes.number,
  52         }),
  53 };
  54
  55 export default Pin;