All files / src/table/addons/filterable MultiFilterButton.tsx

100% Statements 4/4
62.5% Branches 5/8
100% Functions 2/2
100% Lines 4/4

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 40 41 42                              1x 1x 1x                           5x                    
import React from "react";
import classNames from "classnames";
import { FilterButtonProps } from "./FilterableTypes";
import { SelectMultiple } from "../../../select";
import { useConfig } from "../../../_util/config-context";
 
export function MultipleFilterButton({
  all,
  className,
  style,
  children,
  options,
  value,
  ...selectProps
}: FilterButtonProps<string[]>) {
  const { classPrefix } = useConfig();
  const active = Boolean(value && value.length > 0);
  return (
    <span
      className={classNames(
        `${classPrefix}-table__filterbtn`,
        { "is-active": active },
        className
      )}
      style={style}
    >
      <SelectMultiple
        {...selectProps}
        appearance="filter"
        button={children}
        style={style}
        options={options.map(option => ({
          ...option,
          text: option.text || option.label,
        }))}
        allOption={all ? { ...all, text: all.text || all.label } : false}
        value={value}
      />
    </span>
  );
}