Filter FilterCategory.tsx

20% Statements 2/10

0% Branches 0/11

0% Functions 0/5

22.22% Lines 2/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39  
 
 
4x
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { FC } from 'react';
import { FilterCategoryType } from './index';
 
const styles = require('./Filter.module.css');
 
export const FilterCategory: FC<{
  classes?: string;
  options: FilterCategoryType[];
  selected?: string[];
  onChange?: (value: string[]) => void
}> = ({
  classes,
  options,
  selected= [],
  onChange
}) => {
  const select = (option) => {
    if (selected.includes(option.value)) {
      onChange && onChange(selected.filter(it => it !== option.value));
    } else {
      onChange && onChange([...selected, option.value]);
    }
  };
 
  return (
    <div className={`${styles.FilterCategory} ${classes ?? ''}`}>
      <div className={styles.FilterCategoryOptions}>
        {options.map(option =>
          <button
            className={`${styles.FilterCategoryOption} ${selected.includes(option.value) ? styles.selected : ''}`}
            type="button"
            key={option.value}
            onClick={() => select(option)}
          >{option.label}</button>
        )}
      </div>
    </div>
  );
};