resources/js/components/techniques/TechFilter.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3 import { Form } from 'react-bootstrap';
   4 import { useTranslation } from 'react-i18next';
   5
   6 const TechFilter = ({ filter, setFilter }) => {
   7         const { t } = useTranslation();
   8
   9         const handleChange = React.useCallback(e => {
  10                 if (e.target.name.startsWith('ruleset.')) {
  11                         const r = e.target.name.substring(8);
  12                         setFilter({
  13                                 ...filter,
  14                                 ruleset: {
  15                                         ...filter.ruleset || {},
  16                                         [r]: e.target.checked ? '1' : '0',
  17                                 },
  18                         });
  19                 }
  20         }, [filter]);
  21
  22         return <div className="tech-filter">
  23                 <div>{t('techniques.rulesetFilterHeading')}</div>
  24                 <div className="ruleset-box">
  25                         {['competitive', 'owg', 'mg', 'nl'].map(r =>
  26                                 <Form.Check
  27                                         checked={!!(filter && filter.ruleset && filter.ruleset[r] === '1')}
  28                                         key={r}
  29                                         id={`tech.filter.ruleset.${r}`}
  30                                         name={`ruleset.${r}`}
  31                                         label={t(`techniques.rulesetCodes.${r}`)}
  32                                         onChange={handleChange}
  33                                         title={t(`techniques.rulesetDescriptions.${r}`)}
  34                                         type="checkbox"
  35                                 />
  36                         )}
  37                 </div>
  38         </div>;
  39 };
  40
  41 TechFilter.propTypes = {
  42         filter: PropTypes.shape({
  43                 ruleset: PropTypes.shape({
  44                 }),
  45         }),
  46         setFilter: PropTypes.func,
  47 };
  48
  49 export default TechFilter;