resources/js/components/map/Buttons.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Button, Form } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 import { useOpenSeadragon } from './OpenSeadragon';
   7
   8 const Buttons = ({ setUWOverlay, uwOverlay }) => {
   9         const { activeMap, setActiveMap } = useOpenSeadragon();
  10         const { t } = useTranslation();
  11
  12         return <div className="mt-5">
  13                 <div className="button-bar">
  14                         {['lw', 'dw', 'sp', 'uw', 'uw2'].map(map =>
  15                                 <Button
  16                                         active={activeMap === map}
  17                                         key={map}
  18                                         onClick={() => setActiveMap(map)}
  19                                         title={t(`map.${map}Long`)}
  20                                         variant="outline-secondary"
  21                                 >
  22                                         {t(`map.${map}Short`)}
  23                                 </Button>
  24                         )}
  25                 </div>
  26                 {activeMap === 'uw' ?
  27                         <div className="mt-2">
  28                                 <Form.Check
  29                                         checked={uwOverlay}
  30                                         id="toggle-uw-overlay"
  31                                         inline
  32                                         onChange={e => setUWOverlay(e.target.checked)}
  33                                         type="checkbox"
  34                                 />
  35                                 <Form.Label className="mt-0" htmlFor="toggle-uw-overlay">
  36                                         {t('map.uwOverlay')}
  37                                 </Form.Label>
  38                         </div>
  39                 : null}
  40         </div>;
  41 };
  42
  43 Buttons.propTypes = {
  44         setUWOverlay: PropTypes.func,
  45         uwOverlay: PropTypes.bool,
  46 };
  47
  48 export default Buttons;