ndla-ui/lib/Search/ActiveFilters.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactBemHelper = require('react-bem-helper');

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

var _action = require('ndla-icons/action');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var classes = (0, _reactBemHelper2.default)('c-active-filters');

var ActiveFilters = function ActiveFilters(_ref) {
  var filters = _ref.filters,
      onFilterRemove = _ref.onFilterRemove;

  if (filters && filters.length > 0) {
    var filterItems = filters.map(function (filter) {
      var filterKey = filter.filterName ? '' + filter.filterName + filter.value : filter.value;
      return _react2.default.createElement(
        'li',
        { key: filterKey },
        _react2.default.createElement(
          'button',
          {
            'aria-label': 'Fjern filter ' + filter.filterName,
            type: 'button',
            onClick: function onClick() {
              return onFilterRemove(filter.value, filter.filterName);
            } },
          _react2.default.createElement(
            'span',
            null,
            filter.title
          ),
          _react2.default.createElement(_action.Cross, null)
        )
      );
    });

    return _react2.default.createElement(
      'ul',
      classes(),
      filterItems
    );
  }

  return null;
};

ActiveFilters.propTypes = {
  filters: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    value: _propTypes2.default.string.isRequired,
    title: _propTypes2.default.string.isRequired,
    filterName: _propTypes2.default.string
  })),
  onFilterRemove: _propTypes2.default.func.isRequired
};

exports.default = ActiveFilters;