basic map pins

[alttp.git] / resources / js / components / map / Pin.js

diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
new file mode 100644 (file)
index 0000000..69b6d77
--- /dev/null
+++ b/resources/js/components/map/Pin.js
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+
+import Overlay from './Overlay';
+import Popover from './Popover';
+import Icon from '../common/Icon';
+import { getLink, getTranslation } from '../../helpers/Technique';
+import i18n from '../../i18n';
+
+const Pin = ({ pin }) => {
+       const [showPopover, setShowPopover] = React.useState(false);
+       const ref = React.useRef();
+
+       const navigate = useNavigate();
+
+       const onClick = React.useCallback((e) => {
+               if (ref.current && ref.current.contains(e.originalTarget)) {
+                       if (e.originalTarget.tagName === 'A') {
+                               navigate(new URL(e.originalTarget.href).pathname);
+                       }
+               } else {
+                       if (pin.technique.type === 'location') {
+                               setShowPopover(s => !s);
+                       } else {
+                               navigate(getLink(pin.technique));
+                       }
+               }
+       }, [pin]);
+
+       return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
+               <div className="map-pin">
+                       <Link to={getLink(pin.technique)}>
+                               <Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
+                       </Link>
+                       {pin.technique.type === 'location' ?
+                               <div ref={ref}>
+                                       <Popover show={showPopover} technique={pin.technique} />
+                               </div>
+                       : null}
+               </div>
+       </Overlay>;
+};
+
+Pin.propTypes = {
+       pin: PropTypes.shape({
+               technique: PropTypes.shape({
+                       type: PropTypes.string,
+               }),
+               x: PropTypes.number,
+               y: PropTypes.number,
+       }),
+};
+
+export default Pin;