import MouseTrap from 'mousetrap' import React, { useEffect } from 'react' import { useAmplifier, voltageRanges } from '../../communication/bindings' import { formatVoltage } from '../formatters' import { Icon, IconButton, SelectPicker } from 'rsuite' import { useRecoilState } from 'recoil' import { useActiveBtns } from './hooks' function Amplifier() { const [amplifier, setAmplifier] = useRecoilState(useAmplifier.send) const [isUpActive, tapUp] = useActiveBtns() const [isDownActive, tapDown] = useActiveBtns() useEffect(() => { MouseTrap.bind('up', (e) => { e.preventDefault() tapUp() setAmplifier(amplifier - 1) }) MouseTrap.bind('down', (e) => { e.preventDefault() tapDown() setAmplifier(amplifier + 1) }) return () => { MouseTrap.unbind('up') MouseTrap.unbind('down') } }, [amplifier, setAmplifier, tapDown, tapUp]) return ( <div style={{ width: ' 100%', display: ' flex', justifyContent: ' space-between', marginBottom: 5 }} > <IconButton active={isDownActive} size="md" icon={<Icon icon="down" />} onClick={() => setAmplifier(amplifier + 1)} /> <SelectPicker searchable={false} value={amplifier} cleanable={false} onChange={setAmplifier} data={voltageRanges.map((v, i) => { return { label: formatVoltage(v / 10) + ' / div', value: i } })} style={{ flex: 1, marginLeft: 5, marginRight: 5 }} /> <IconButton active={isUpActive} size="md" icon={<Icon icon="up" />} onClick={() => setAmplifier(amplifier - 1)} /> </div> ) } export default Amplifier