@pantheon-systems/design-toolkit-react/dist/Tables/TableSearchFilter.js

Pantheon's React Design Toolkit

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { useId } from '@reach/auto-id';
import hashSum from 'hash-sum';
import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';
import { useAsyncDebounce } from 'react-table';
import { jsxs, jsx } from 'react/jsx-runtime';

var _excluded = ["data", "globalFilter", "i18n", "id", "setGlobalFilter"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var TableSearchFilter = function TableSearchFilter(_ref) {
  var data = _ref.data,
    globalFilter = _ref.globalFilter,
    i18n = _ref.i18n,
    id = _ref.id,
    setGlobalFilter = _ref.setGlobalFilter,
    rest = _objectWithoutProperties(_ref, _excluded);
  // We don't want to use globalFilter for the input value for perf reasons
  var _useState = useState(globalFilter),
    _useState2 = _slicedToArray(_useState, 2),
    value = _useState2[0],
    setValue = _useState2[1];
  var handleChange = useAsyncDebounce(function (formValue) {
    setGlobalFilter(formValue);
  }, 200);
  var tableFilterLabel = i18n.tableFilterLabel();
  var dataHash = hashSum(data);
  var elementId = useId(id);
  useEffect(function () {
    if (value && !globalFilter) setGlobalFilter(value);
  }, [dataHash, globalFilter, setGlobalFilter, value]);
  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, rest), {}, {
    className: "mb-4",
    children: [/*#__PURE__*/jsx("label", {
      htmlFor: elementId,
      children: /*#__PURE__*/jsx("span", {
        className: "sr-only",
        children: tableFilterLabel
      })
    }), /*#__PURE__*/jsx("input", {
      className: "table-search-filter",
      id: elementId,
      name: id,
      onChange: function onChange(e) {
        setValue(e.target.value);
        handleChange(e.target.value);
      },
      placeholder: tableFilterLabel,
      type: "search",
      value: value
    })]
  }));
};
TableSearchFilter.defaultProps = {
  globalFilter: '',
  id: null
};
TableSearchFilter.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  globalFilter: PropTypes.string,
  i18n: PropTypes.shape({
    tableFilterLabel: PropTypes.func.isRequired
  }).isRequired,
  id: PropTypes.string,
  setGlobalFilter: PropTypes.func.isRequired
};
var TableSearchFilter$1 = TableSearchFilter;

export { TableSearchFilter$1 as default };
//# sourceMappingURL=TableSearchFilter.js.map