@appbuckets/react-ui/esm/RxTable/atoms/DataFilterElement.js

Just Another React UI Framework

import { __assign } from 'tslib';
import * as React from 'react';
import Checkbox from '../../Checkbox/Checkbox.js';
import Input from '../../Input/Input.js';
import MultiSelect from '../../MultiSelect/MultiSelect.js';
import Select from '../../Select/Select.js';
import { useRxTable } from '../RxTable.context.js';

/* --------
 * Component Definition
 * -------- */
var DataFilterElement = function (props) {
  var columnKey = props.columnKey,
    filter = props.filter;
  // ----
  // Get Context Props
  // ----
  var _a = useRxTable().filter,
    filters = _a.current,
    setFilter = _a.set;
  // ----
  // Handlers
  // ----
  var handleFilterChange = React.useCallback(
    function (e, filterProps) {
      if (filter) {
        if (filter.type === 'input' || filter.type === 'regexp') {
          setFilter(columnKey, filterProps.value);
        } else if (filter.type === 'checkbox') {
          setFilter(columnKey, filterProps.checked);
        } else if (filter.type === 'select') {
          setFilter(columnKey, filterProps.value);
        } else if (filter.type === 'multi-select') {
          var values = filterProps.value;
          setFilter(columnKey, Array.isArray(values) ? values : []);
        }
      }
    },
    [columnKey, filter, setFilter]
  );
  // ----
  // Return empty component if no filter
  // ----
  if (!filter) {
    return null;
  }
  // ----
  // Return the right Filter Component
  // ----
  if (filter.type === 'input' || filter.type === 'regexp') {
    return React.createElement(
      Input,
      __assign({ icon: 'filter' }, filter.props, {
        value: filters[columnKey],
        onChange: handleFilterChange,
      })
    );
  }
  if (filter.type === 'checkbox') {
    return React.createElement(
      Checkbox,
      __assign({}, filter.props, {
        checked: !!filters[columnKey],
        onClick: handleFilterChange,
      })
    );
  }
  if (filter.type === 'select') {
    return React.createElement(
      Select,
      __assign({}, filter.props, {
        isClearable: true,
        onChange: handleFilterChange,
      })
    );
  }
  if (filter.type === 'multi-select') {
    return React.createElement(
      MultiSelect,
      __assign({}, filter.props, { onChange: handleFilterChange })
    );
  }
  // ----
  // Fallback to Null
  // ----
  return null;
};
DataFilterElement.displayName = 'DataFilterElement';

export { DataFilterElement as default };