@pantheon-systems/design-toolkit-react/dist/Filters/ListFilter.js

Pantheon's React Design Toolkit

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import PropTypes from 'prop-types';
import { useState, Fragment } from 'react';
import TextInput from '../Forms/TextInput.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var ListFilter = function ListFilter(_ref) {
  var siteList = _ref.siteList;
  var _useState = useState(siteList),
    _useState2 = _slicedToArray(_useState, 2),
    filteredList = _useState2[0],
    setFilteredList = _useState2[1];
  var filterSiteList = function filterSiteList(filterValue) {
    return siteList.filter(function (site) {
      return site.name.toLowerCase().includes(filterValue.toLowerCase());
    });
  };
  var handleChange = function handleChange(e) {
    var list = filterSiteList(e.target.value);
    setFilteredList(list);
  };
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx(TextInput, {
      "aria-label": "Filter sites",
      "data-testid": "list-filter",
      field: "list-filter",
      onChange: handleChange,
      placeholder: "Filter sites"
    }), /*#__PURE__*/jsx("ul", {
      className: "pl-0 list-none",
      children: filteredList.length > 0 ? filteredList.map(function (site) {
        return /*#__PURE__*/jsx("li", {
          children: /*#__PURE__*/jsx("a", {
            href: "/sites/".concat(site.id),
            children: site.name
          })
        }, site.id);
      }) : /*#__PURE__*/jsx("li", {
        children: "No Result Found"
      })
    })]
  });
};
ListFilter.propTypes = {
  siteList: PropTypes.arrayOf(PropTypes.object).isRequired
};
var ListFilter$1 = ListFilter;

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