resources/js/components/map/Item.js

   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';
   7
   8 import { useOpenSeadragon } from './OpenSeadragon';
   9 import Icon from '../common/Icon';
  10 import Rulesets from '../techniques/Rulesets';
  11 import {
  12         getLink,
  13         getRelations,
  14         getTranslation,
  15         hasRelations,
  16         sorted,
  17 } from '../../helpers/Technique';
  18 import i18n from '../../i18n';
  19
  20 const Item = ({ pin }) => {
  21         const { viewer } = useOpenSeadragon();
  22         const { t } = useTranslation();
  23
  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();
  29                 }
  30         }, [viewer]);
  31
  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 =>
  39                                                         <div
  40                                                                 className="d-flex align-items-start justify-content-between"
  41                                                                 key={r.id}
  42                                                         >
  43                                                                 <div className="me-auto">
  44                                                                         <h3>
  45                                                                                 <Link to={getLink(r)}>
  46                                                                                         {getTranslation(r, 'title', i18n.language)}
  47                                                                                 </Link>
  48                                                                         </h3>
  49                                                                         <p>{getTranslation(r, 'short', i18n.language)}</p>
  50                                                                 </div>
  51                                                                 {r.rulesets ?
  52                                                                         <Rulesets technique={r} />
  53                                                                 : null}
  54                                                         </div>
  55                                                 )
  56                                         : null}
  57                                 </> : <div className="d-flex align-items-start justify-content-between">
  58                                         <div className="flex-grow-1">
  59                                                 <h2>
  60                                                         <Link to={getLink(pin.technique)}>
  61                                                                 {getTranslation(pin.technique, 'title', i18n.language)}
  62                                                         </Link>
  63                                                 </h2>
  64                                                 <p>{getTranslation(pin.technique, 'short', i18n.language)}</p>
  65                                         </div>
  66                                         {pin.technique.rulesets ?
  67                                                 <Rulesets technique={pin.technique} />
  68                                         : null}
  69                                 </div>}
  70                         </div>
  71                 <Button
  72                         className="m-2"
  73                         onClick={() => goToLocation(pin)}
  74                         title={t('map.goToLocation')}
  75                         variant="outline-secondary"
  76                 >
  77                         <Icon.CROSSHAIRS title="" />
  78                 </Button>
  79         </li>;
  80 };
  81
  82 Item.propTypes = {
  83         pin: PropTypes.shape({
  84                 technique: PropTypes.shape({
  85                         rulesets: PropTypes.shape({
  86                         }),
  87                         type: PropTypes.string,
  88                 }),
  89                 x: PropTypes.number,
  90                 y: PropTypes.number,
  91         }),
  92 };
  93
  94 export default Item;