1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Form } from 'react-bootstrap';
4 import { useTranslation } from 'react-i18next';
6 const TechFilter = ({ filter, setFilter }) => {
7 const { t } = useTranslation();
9 const handleChange = React.useCallback(e => {
10 if (e.target.name.startsWith('ruleset.')) {
11 const r = e.target.name.substring(8);
15 ...filter.ruleset || {},
16 [r]: e.target.checked ? '1' : '0',
22 return <div className="tech-filter">
23 <div>{t('techniques.rulesetFilterHeading')}</div>
24 <div className="ruleset-box">
25 {['competitive', 'owg', 'mg', 'nl'].map(r =>
27 checked={!!(filter && filter.ruleset && filter.ruleset[r] === '1')}
29 id={`tech.filter.ruleset.${r}`}
31 label={t(`techniques.rulesetCodes.${r}`)}
32 onChange={handleChange}
33 title={t(`techniques.rulesetDescriptions.${r}`)}
41 TechFilter.propTypes = {
42 filter: PropTypes.shape({
43 ruleset: PropTypes.shape({
46 setFilter: PropTypes.func,
49 export default TechFilter;