import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
+import { useOpenSeadragon } from './OpenSeadragon';
import Overlay from './Overlay';
import Popover from './Popover';
import Icon from '../common/Icon';
+import ZeldaIcon from '../common/ZeldaIcon';
import { getLink, getTranslation } from '../../helpers/Technique';
import i18n from '../../i18n';
const Pin = ({ pin }) => {
+ const { storePosition } = useOpenSeadragon();
const [showPopover, setShowPopover] = React.useState(false);
const ref = React.useRef();
const onClick = React.useCallback((e) => {
if (ref.current && ref.current.contains(e.originalTarget)) {
if (e.originalTarget.tagName === 'A') {
+ storePosition();
navigate(new URL(e.originalTarget.href).pathname);
}
} else {
if (pin.technique.type === 'location') {
setShowPopover(s => !s);
} else {
+ storePosition();
navigate(getLink(pin.technique));
}
}
}, [pin]);
+ const title = React.useMemo(() => {
+ return getTranslation(pin.technique, 'title', i18n.language);
+ }, [pin, i18n.language]);
+
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)} />
+ {pin.marker ?
+ <ZeldaIcon title={title} name={pin.marker} />
+ :
+ <Icon.PIN title={title} />
+ }
</Link>
{pin.technique.type === 'location' ?
<div ref={ref}>
Pin.propTypes = {
pin: PropTypes.shape({
+ marker: PropTypes.string,
technique: PropTypes.shape({
type: PropTypes.string,
}),