resources/js/components/map/Popover.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Card, ListGroup } from 'react-bootstrap';
   4 import { Link } from 'react-router-dom';
   5
   6 import ZeldaIcon from '../common/ZeldaIcon';
   7
   8 import {
   9         getLink,
  10         getRelations,
  11         getTranslation,
  12         hasRelations,
  13         sorted,
  14 } from '../../helpers/Technique';
  15 import i18n from '../../i18n';
  16
  17 const Popover = ({ show, technique }) =>
  18         <div className={`map-popover ${show ? 'shown' : 'hidden'}`}>
  19                 <Card bg="dark">
  20                         <Card.Header>
  21                                 <Card.Title>
  22                                         {getTranslation(technique, 'title', i18n.language)}
  23                                 </Card.Title>
  24                         </Card.Header>
  25                         {technique.short ?
  26                                 <Card.Body>
  27                                         <Card.Text>
  28                                                 {getTranslation(technique, 'short', i18n.language)}
  29                                         </Card.Text>
  30                                 </Card.Body>
  31                         : null}
  32                         {hasRelations(technique, 'related') ?
  33                                 <ListGroup variant="flush">
  34                                         {sorted(getRelations(technique, 'related')).map(r =>
  35                                                 <ListGroup.Item
  36                                                         key={r.id}
  37                                                         title={getTranslation(r, 'short', i18n.language)}
  38                                                 >
  39                                                         <Link to={getLink(r)}>
  40                                                                 {r.title_icons ?
  41                                                                         <span className="tech-title-icons">
  42                                                                                 {r.title_icons.map(icon =>
  43                                                                                         <ZeldaIcon key={icon} name={icon} />
  44                                                                                 )}
  45                                                                         </span>
  46                                                                 : null}
  47                                                                 {getTranslation(r, 'title', i18n.language)}
  48                                                         </Link>
  49                                                 </ListGroup.Item>
  50                                         )}
  51                                 </ListGroup>
  52                         : null}
  53                 </Card>
  54         </div>;
  55
  56 Popover.propTypes = {
  57         show: PropTypes.bool,
  58         technique: PropTypes.shape({
  59                 short: PropTypes.string,
  60         }),
  61 };
  62
  63 export default Popover;