resources/js/components/tracker/Toolbar.js

   1 import React from 'react';
   2 import { Container, Navbar } from 'react-bootstrap';
   3
   4 import AutoTracking from './AutoTracking';
   5 import ToggleIcon from './ToggleIcon';
   6 import { useTracker } from '../../hooks/tracker';
   7
   8 const mapWild = {
   9         map: 'wildMap',
  10         compass: 'wildCompass',
  11         'small-key': 'wildSmall',
  12         'big-key': 'wildBig',
  13 };
  14
  15 const Toolbar = () => {
  16         const { config, setConfig } = useTracker();
  17
  18         const controller = React.useMemo(() => ({
  19                 getActive: (state, icons) => config[mapWild[icons[0]]] ? icons[0] : null,
  20                 getDefault: (state, icons) => icons[0],
  21                 handlePrimary: (state, setState, icons) => {
  22                         const prop = mapWild[icons[0]];
  23                         setConfig(c => ({ ...c, [prop]: !c[prop] }));
  24                 },
  25                 handleSecondary: () => null,
  26         }), [config, setConfig]);
  27
  28         return <Navbar bg="dark" className="tracker-toolbar" variant="dark">
  29                 <Container fluid>
  30                         <div className="button-bar">
  31                                 <ToggleIcon controller={controller} icons={['map']} />
  32                                 <ToggleIcon controller={controller} icons={['compass']} />
  33                                 <ToggleIcon controller={controller} icons={['small-key']} />
  34                                 <ToggleIcon controller={controller} icons={['big-key']} />
  35                         </div>
  36                         <AutoTracking />
  37                 </Container>
  38         </Navbar>;
  39 };
  40
  41 export default Toolbar;