+import PropTypes from 'prop-types';
import React from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useOpenSeadragon } from './OpenSeadragon';
-const Buttons = () => {
- const { viewer } = useOpenSeadragon();
+const Buttons = ({ setUWOverlay, uwOverlay }) => {
+ const { activeMap, setActiveMap } = useOpenSeadragon();
const { t } = useTranslation();
- const goToPage = React.useCallback((p) => {
- if (viewer) viewer.goToPage(p);
- }, [viewer]);
-
- return <div className="button-bar">
- <Button
- onClick={() => goToPage(0)}
- title={t('map.lwLong')}
- variant="outline-secondary"
- >
- {t('map.lwShort')}
- </Button>
- <Button
- onClick={() => goToPage(1)}
- title={t('map.dwLong')}
- variant="outline-secondary"
- >
- {t('map.dwShort')}
- </Button>
- <Button
- onClick={() => goToPage(2)}
- title={t('map.spLong')}
- variant="outline-secondary"
- >
- {t('map.spShort')}
- </Button>
- <Button
- onClick={() => goToPage(3)}
- title={t('map.uwLong')}
- variant="outline-secondary"
- >
- {t('map.uwShort')}
- </Button>
+ return <div className="mt-5">
+ <div className="button-bar">
+ {['lw', 'dw', 'sp', 'uw', 'uw2'].map(map =>
+ <Button
+ active={activeMap === map}
+ key={map}
+ onClick={() => setActiveMap(map)}
+ title={t(`map.${map}Long`)}
+ variant="outline-secondary"
+ >
+ {t(`map.${map}Short`)}
+ </Button>
+ )}
+ </div>
+ {activeMap === 'uw' ?
+ <div className="mt-2">
+ <Form.Check
+ checked={uwOverlay}
+ id="toggle-uw-overlay"
+ inline
+ onChange={e => setUWOverlay(e.target.checked)}
+ type="checkbox"
+ />
+ <Form.Label className="mt-0" htmlFor="toggle-uw-overlay">
+ {t('map.uwOverlay')}
+ </Form.Label>
+ </div>
+ : null}
</div>;
};
+Buttons.propTypes = {
+ setUWOverlay: PropTypes.func,
+ uwOverlay: PropTypes.bool,
+};
+
export default Buttons;