resources/js/components/tracker/Toolbar.js

   1 import React from 'react';
   2 import { Button, Container, Navbar } from 'react-bootstrap';
   3
   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';
   9
  10 const mapWild = {
  11         map: 'wildMap',
  12         compass: 'wildCompass',
  13         'small-key': 'wildSmall',
  14         'big-key': 'wildBig',
  15 };
  16
  17 const Toolbar = () => {
  18         const [showConfigDialog, setShowConfigDialog] = React.useState(false);
  19         const { config, saveConfig } = useTracker();
  20
  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] });
  27                 },
  28                 handleSecondary: () => null,
  29         }), [config, saveConfig]);
  30
  31         return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
  32                 <Container fluid>
  33                         <div className="button-bar">
  34                                 <Button
  35                                         className="me-3"
  36                                         onClick={() => setShowConfigDialog(true)}
  37                                         variant="outline-secondary"
  38                                 >
  39                                         <Icon.SETTINGS />
  40                                 </Button>
  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']} />
  45                         </div>
  46                         <AutoTracking />
  47                 </Container>
  48                 <ConfigDialog onHide={() => setShowConfigDialog(false)} show={showConfigDialog} />
  49         </Navbar>;
  50 };
  51
  52 export default Toolbar;