1 import React from 'react';
2 import { Button, Container, Navbar } from 'react-bootstrap';
4 import AutoTracking from './AutoTracking';
5 import ConfigDialog from './ConfigDialog';
6 import ToggleIcon from './ToggleIcon';
7 import Icon from '../common/Icon';
8 import { useTracker } from '../../hooks/tracker';
12 compass: 'wildCompass',
13 'small-key': 'wildSmall',
17 const Toolbar = () => {
18 const [showConfigDialog, setShowConfigDialog] = React.useState(false);
19 const { config, saveConfig } = useTracker();
21 const controller = React.useMemo(() => ({
22 getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
23 getDefault: (state, icons) => icons[0],
24 handlePrimary: (state, setState, icons) => {
25 const prop = mapWild[icons[0]];
26 saveConfig({ [prop]: !config[prop] });
28 handleSecondary: () => null,
29 }), [config, saveConfig]);
31 return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
33 <div className="button-bar">
36 onClick={() => setShowConfigDialog(true)}
37 variant="outline-secondary"
41 <ToggleIcon controller={controller} icons={['map']} />
42 <ToggleIcon controller={controller} icons={['compass']} />
43 <ToggleIcon controller={controller} icons={['small-key']} />
44 <ToggleIcon controller={controller} icons={['big-key']} />
48 <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
52 export default Toolbar;