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 {
   7         getLink,
   8         getRelations,
   9         getTranslation,
  10         hasRelations,
  11         sorted,
  12 } from '../../helpers/Technique';
  13 import i18n from '../../i18n';
  14
  15 const Popover = ({ show, technique }) =>
  16         <div className={`map-popover ${show ? 'shown' : 'hidden'}`}>
  17                 <Card bg="dark">
  18                         <Card.Header>
  19                                 <Card.Title>
  20                                         {getTranslation(technique, 'title', i18n.language)}
  21                                 </Card.Title>
  22                         </Card.Header>
  23                         {technique.short ?
  24                                 <Card.Body>
  25                                         <Card.Text>
  26                                                 {getTranslation(technique, 'short', i18n.language)}
  27                                         </Card.Text>
  28                                 </Card.Body>
  29                         : null}
  30                         {hasRelations(technique, 'related') ?
  31                                 <ListGroup variant="flush">
  32                                         {sorted(getRelations(technique, 'related')).map(r =>
  33                                                 <ListGroup.Item
  34                                                         key={r.id}
  35                                                         title={getTranslation(r, 'short', i18n.language)}
  36                                                 >
  37                                                         <Link to={getLink(r)}>
  38                                                                 {getTranslation(r, 'title', i18n.language)}
  39                                                         </Link>
  40                                                 </ListGroup.Item>
  41                                         )}
  42                                 </ListGroup>
  43                         : null}
  44                 </Card>
  45         </div>;
  46
  47 Popover.propTypes = {
  48         show: PropTypes.bool,
  49         technique: PropTypes.shape({
  50                 short: PropTypes.string,
  51         }),
  52 };
  53
  54 export default Popover;