1 import OpenSeadragon from 'openseadragon';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button } from 'react-bootstrap';
5 import { useTranslation } from 'react-i18next';
6 import { Link } from 'react-router-dom';
8 import { useOpenSeadragon } from './OpenSeadragon';
9 import Icon from '../common/Icon';
10 import Rulesets from '../techniques/Rulesets';
17 } from '../../helpers/Technique';
18 import i18n from '../../i18n';
20 const Item = ({ pin }) => {
21 const { viewer } = useOpenSeadragon();
22 const { t } = useTranslation();
24 const goToLocation = React.useCallback(pin => {
25 if (viewer && viewer.viewport) {
26 viewer.viewport.panTo(new OpenSeadragon.Point(pin.x, pin.y));
27 viewer.viewport.zoomTo(4);
28 viewer.element.scrollIntoView();
32 return <li className="d-flex align-items-start justify-content-between">
33 <div className="flex-grow-1">
34 {pin.technique.type === 'location' ? <>
35 <h2>{getTranslation(pin.technique, 'title', i18n.language)}</h2>
36 <p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
37 {hasRelations(pin.technique, 'related') ?
38 sorted(getRelations(pin.technique, 'related')).map(r =>
40 className="d-flex align-items-start justify-content-between"
43 <div className="me-auto">
45 <Link to={getLink(r)}>
46 {getTranslation(r, 'title', i18n.language)}
49 <p>{getTranslation(r, 'short', i18n.language)}</p>
52 <Rulesets technique={r} />
57 </> : <div className="d-flex align-items-start justify-content-between">
58 <div className="flex-grow-1">
60 <Link to={getLink(pin.technique)}>
61 {getTranslation(pin.technique, 'title', i18n.language)}
64 <p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
66 {pin.technique.rulesets ?
67 <Rulesets technique={pin.technique} />
73 onClick={() => goToLocation(pin)}
74 title={t('map.goToLocation')}
75 variant="outline-secondary"
77 <Icon.CROSSHAIRS title="" />
83 pin: PropTypes.shape({
84 technique: PropTypes.shape({
85 rulesets: PropTypes.shape({
87 type: PropTypes.string,