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

Just Another React UI Framework

'use strict';

var tslib = require('tslib');
var React = require('react');
var Checkbox = require('../../Checkbox/Checkbox.js');
var Input = require('../../Input/Input.js');
var MultiSelect = require('../../MultiSelect/MultiSelect.js');
var Select = require('../../Select/Select.js');
var RxTable_context = require('../RxTable.context.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);

/* --------
 * Component Definition
 * -------- */
var DataFilterElement = function (props) {
  var columnKey = props.columnKey,
    filter = props.filter;
  // ----
  // Get Context Props
  // ----
  var _a = RxTable_context.useRxTable().filter,
    filters = _a.current,
    setFilter = _a.set;
  // ----
  // Handlers
  // ----
  var handleFilterChange = React__namespace.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__namespace.createElement(
      Input,
      tslib.__assign({ icon: 'filter' }, filter.props, {
        value: filters[columnKey],
        onChange: handleFilterChange,
      })
    );
  }
  if (filter.type === 'checkbox') {
    return React__namespace.createElement(
      Checkbox,
      tslib.__assign({}, filter.props, {
        checked: !!filters[columnKey],
        onClick: handleFilterChange,
      })
    );
  }
  if (filter.type === 'select') {
    return React__namespace.createElement(
      Select,
      tslib.__assign({}, filter.props, {
        isClearable: true,
        onChange: handleFilterChange,
      })
    );
  }
  if (filter.type === 'multi-select') {
    return React__namespace.createElement(
      MultiSelect,
      tslib.__assign({}, filter.props, { onChange: handleFilterChange })
    );
  }
  // ----
  // Fallback to Null
  // ----
  return null;
};
DataFilterElement.displayName = 'DataFilterElement';

module.exports = DataFilterElement;