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

Pantheon's React Design Toolkit

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import PropTypes from 'prop-types';
import { useState } from 'react';
import ContainerFlex from '../Containers/ContainerFlex.js';
import { jsxs, jsx } from 'react/jsx-runtime';

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 ALL = 'ALL';
var TableFilters = function TableFilters(_ref) {
  var data = _ref.data,
    filters = _ref.filters,
    label = _ref.label,
    setFilteredData = _ref.setFilteredData;
  /* Help function:
  Filter data by filter values */
  var filterData = function filterData(filterValues) {
    var filteredData = _toConsumableArray(data);
    filters.forEach(function (filter) {
      var getValuePath = filter.getValuePath,
        id = filter.id;
      if (filterValues[id] !== ALL) {
        filteredData = filteredData.filter(function (item) {
          return getValuePath(item) === filterValues[id];
        });
      }
    });
    return filteredData;
  };

  /* Help function:
  Set all filters' initial value to ALL.
  Generate each filter's all unique values from the data; each key is the filter id.
  Example result:
  {
    defaultFilterValues : {
      people: ALL,
      status: ALL,
    },
    filterOptionValues: {
      people: [ 'User 1', 'User 2', 'User 3'],
      status: [ 'BUILDING', 'CANCELED', 'FAILED', 'SUCCESS'],
    },
  } */
  var getFilterOptionsAndValues = function getFilterOptionsAndValues() {
    var defaultFilterValues = {};
    var filterOptionValues = {};
    filters.forEach(function (filter) {
      var getValuePath = filter.getValuePath,
        id = filter.id;
      var uniqueValuesSet = new Set();
      data.forEach(function (item) {
        uniqueValuesSet.add(getValuePath(item));
      });
      filterOptionValues[id] = Array.from(uniqueValuesSet);
      defaultFilterValues[id] = ALL;
    });
    return {
      defaultFilterValues: defaultFilterValues,
      filterOptionValues: filterOptionValues
    };
  };
  // End of help functions

  var _getFilterOptionsAndV = getFilterOptionsAndValues(),
    defaultFilterValues = _getFilterOptionsAndV.defaultFilterValues,
    filterOptionValues = _getFilterOptionsAndV.filterOptionValues;
  var _useState = useState(defaultFilterValues),
    _useState2 = _slicedToArray(_useState, 2),
    filterValues = _useState2[0],
    setFilterValues = _useState2[1];
  var handleChange = function handleChange(event) {
    var _event$target = event.target,
      id = _event$target.id,
      value = _event$target.value;

    // Only re-filter if the filter value has changed
    if (filterValues[id] !== value) {
      var newFilterValues = _objectSpread(_objectSpread({}, filterValues), {}, _defineProperty({}, id, value));
      setFilterValues(newFilterValues);
      setFilteredData(filterData(newFilterValues));
    }
  };
  return /*#__PURE__*/jsxs(ContainerFlex, {
    children: [label ? /*#__PURE__*/jsx("legend", {
      className: "py-2 pl-0 pr-4 font-semibold",
      children: label
    }) : null, filters.map(function (filter) {
      return /*#__PURE__*/jsxs("div", {
        className: "w-40 pr-4 mb-4",
        children: [/*#__PURE__*/jsx("label", {
          className: "sr-only",
          htmlFor: filter.id,
          children: filter.ariaLabel
        }), /*#__PURE__*/jsxs("select", {
          id: filter.id,
          name: filter.id,
          onBlur: handleChange,
          onChange: handleChange,
          children: [/*#__PURE__*/jsx("option", {
            value: ALL,
            children: filter.optionAllText
          }), filterOptionValues[filter.id].map(function (value) {
            return /*#__PURE__*/jsx("option", {
              value: value,
              children: filter.optionValueToText ? filter.optionValueToText(value) : value
            }, value);
          })]
        })]
      }, filter.id);
    })]
  });
};
TableFilters.defaultProps = {
  label: ''
};
TableFilters.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
  filters: PropTypes.arrayOf(PropTypes.shape({
    ariaLabel: PropTypes.string.isRequired,
    getValuePath: PropTypes.func.isRequired,
    // The path to get the value from data
    id: PropTypes.string.isRequired,
    optionAllText: PropTypes.string.isRequired,
    optionValueToText: PropTypes.func // If not present, use the value for option text
  }).isRequired).isRequired,
  label: PropTypes.string,
  setFilteredData: PropTypes.func.isRequired
};
var TableFilters$1 = TableFilters;

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