@equinor/eds-data-grid-react/dist/esm/components/FilterWrapper.js

A feature-rich data-grid written in React, implementing the Equinor Design System

import { useState, useRef, useCallback } from 'react';
import { Button, Icon, Popover } from '@equinor/eds-core-react';
import { filter_alt_active, filter_alt } from '@equinor/eds-icons';
import { tokens } from '@equinor/eds-tokens';
import { Filter } from './Filter.js';
import { useTableContext } from '../EdsDataGridContext.js';
import { FilterVisibility } from './TableCell.js';
import { jsxs, jsx } from 'react/jsx-runtime';

/* istanbul ignore file */

function FilterWrapper({
  column,
  CustomComponent
}) {
  const {
    table
  } = useTableContext();
  const firstValue = table.getPreFilteredRowModel().flatRows[0]?.getValue(column.id);
  const [open, setOpen] = useState(false);
  const filterIconRef = useRef(null);
  const togglePopover = event => {
    event.stopPropagation();
    setOpen(!open);
  };
  const columnFilterValue = column.getFilterValue();
  const hasActiveFilters = value => {
    if (Array.isArray(value)) {
      if (typeof firstValue === 'number') {
        return value.some(v => !isNaN(v) && !!v);
      } else {
        return value.filter(v => !!v).length > 0;
      }
    }
    return value;
  };
  const onChange = useCallback(value => column.setFilterValue(value), [column]);
  return /*#__PURE__*/jsxs(FilterVisibility, {
    onClick: e => e.stopPropagation(),
    children: [/*#__PURE__*/jsx(Button, {
      "aria-haspopup": true,
      "aria-expanded": open,
      "data-testid": 'open-filters',
      ref: filterIconRef,
      onClick: togglePopover,
      variant: 'ghost_icon',
      "aria-label": 'Show column filters',
      children: /*#__PURE__*/jsx(Icon, {
        color: tokens.colors.text.static_icons__default.hex,
        data: hasActiveFilters(columnFilterValue) ? filter_alt_active : filter_alt
      })
    }), /*#__PURE__*/jsx(Popover, {
      style: {
        width: typeof firstValue === 'number' ? '220px' : '340px'
      },
      anchorEl: filterIconRef.current,
      open: open,
      onClose: () => setOpen(false),
      children: /*#__PURE__*/jsx(Popover.Content, {
        style: {
          width: typeof firstValue === 'number' ? '180px' : '310px'
        },
        children: CustomComponent ? /*#__PURE__*/jsx(CustomComponent, {
          onChange: onChange,
          value: columnFilterValue
        }) : /*#__PURE__*/jsx(Filter, {
          column: column,
          table: table
        })
      })
    })]
  });
}

export { FilterWrapper };