@appbuckets/react-ui/esm/RxTable/components/FiltersRow.js

Just Another React UI Framework

import * as React from 'react';
import clsx from 'clsx';
import ColumnHeader from '../atoms/ColumnHeader.js';
import { useRxTable } from '../RxTable.context.js';
import AllRowsSelector from '../atoms/AllRowsSelector.js';
import DataFilterElement from '../atoms/DataFilterElement.js';

/* --------
 * Component Definition
 * -------- */
var FiltersRow = function () {
  // ----
  // Get Context Props
  // ----
  var _a = useRxTable(),
    classes = _a.classes,
    columns = _a.columns,
    HeaderRowComponent = _a.Components.HeaderRow,
    isDataSelectable = _a.selection.enabled,
    styles = _a.styles;
  // ----
  // Build Classes
  // ----
  var rowClasses = clsx(classes.FilterRow || classes.HeaderRow, 'filter');
  // ----
  // Return Filter Row
  // ----
  return React.createElement(
    HeaderRowComponent,
    { className: rowClasses, style: styles.FilterRow || styles.HeaderRow },
    columns.current.map(function (column, index) {
      return React.createElement(ColumnHeader, {
        key: column.key,
        className: isDataSelectable && index === 0 ? 'selector' : undefined,
        column: column,
        isFilterHeader: true,
        overrideContent:
          isDataSelectable && index === 0
            ? React.createElement(AllRowsSelector, { key: column.key })
            : React.createElement(DataFilterElement, {
                columnKey: column.key,
                filter: column.filter,
              }),
      });
    })
  );
};
FiltersRow.displayName = 'FiltersRow';

export { FiltersRow as default };