1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Col, Form, Modal, Row } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
6 import LargeCheck from '../common/LargeCheck';
7 import { useTracker } from '../../hooks/tracker';
9 const ConfigDialog = ({
13 const { config, saveConfig } = useTracker();
14 const { t } = useTranslation();
16 const handleChange = React.useCallback(({ target: { name, value } }) => {
17 saveConfig({ [name]: value });
20 return <Modal className="tracker-config-dialog" onHide={onHide} show={show} size="lg">
21 <Modal.Header closeButton>
23 {t('tracker.config.title')}
29 <h3>{t('tracker.config.wildItems')}</h3>
31 className="d-flex justify-content-between my-2"
32 controlId="tracker.wildMap"
34 <Form.Label>{t('tracker.config.wildMap')}</Form.Label>
38 onChange={handleChange}
39 value={!!config.wildMap}
43 className="d-flex justify-content-between my-2"
44 controlId="tracker.wildCompass"
46 <Form.Label>{t('tracker.config.wildCompass')}</Form.Label>
50 onChange={handleChange}
51 value={!!config.wildCompass}
55 className="d-flex justify-content-between my-2"
56 controlId="tracker.wildSmall"
58 <Form.Label>{t('tracker.config.wildSmall')}</Form.Label>
62 onChange={handleChange}
63 value={!!config.wildSmall}
67 className="d-flex justify-content-between my-2"
68 controlId="tracker.wildBig"
70 <Form.Label>{t('tracker.config.wildBig')}</Form.Label>
74 onChange={handleChange}
75 value={!!config.wildBig}
80 <h3>{t('tracker.config.showItems')}</h3>
82 className="d-flex justify-content-between my-2"
83 controlId="tracker.showMap"
85 <Form.Label>{t('tracker.config.showMap')}</Form.Label>
89 onChange={handleChange}
90 value={config.showMap || 'always'}
92 <option value="never">
93 {t('tracker.config.showItemOptions.never')}
95 <option value="situational">
96 {t('tracker.config.showItemOptions.situational')}
98 <option value="always">
99 {t('tracker.config.showItemOptions.always')}
104 className="d-flex justify-content-between my-2"
105 controlId="tracker.showCompass"
107 <Form.Label>{t('tracker.config.showCompass')}</Form.Label>
111 onChange={handleChange}
112 value={config.showCompass || 'always'}
114 <option value="never">
115 {t('tracker.config.showItemOptions.never')}
117 <option value="situational">
118 {t('tracker.config.showItemOptions.situational')}
120 <option value="always">
121 {t('tracker.config.showItemOptions.always')}
126 className="d-flex justify-content-between my-2"
127 controlId="tracker.showSmall"
129 <Form.Label>{t('tracker.config.showSmall')}</Form.Label>
133 onChange={handleChange}
134 value={config.showSmall || 'always'}
136 <option value="never">
137 {t('tracker.config.showItemOptions.never')}
139 <option value="situational">
140 {t('tracker.config.showItemOptions.situational')}
142 <option value="always">
143 {t('tracker.config.showItemOptions.always')}
148 className="d-flex justify-content-between my-2"
149 controlId="tracker.showBig"
151 <Form.Label>{t('tracker.config.showBig')}</Form.Label>
155 onChange={handleChange}
156 value={config.showBig || 'always'}
158 <option value="never">
159 {t('tracker.config.showItemOptions.never')}
161 <option value="situational">
162 {t('tracker.config.showItemOptions.situational')}
164 <option value="always">
165 {t('tracker.config.showItemOptions.always')}
175 ConfigDialog.propTypes = {
176 onHide: PropTypes.func,
177 show: PropTypes.bool,
180 export default ConfigDialog;