ndla-ui/lib/Search/SearchResult.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SearchResultList = exports.SearchResult = undefined;

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _common = require('ndla-icons/common');

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

var _ndlaUtil = require('ndla-util');

var _ndlaI18n = require('ndla-i18n');

var _ndlaButton = require('ndla-button');

var _ndlaButton2 = _interopRequireDefault(_ndlaButton);

var _ndlaTabs = require('ndla-tabs');

var _Tooltip = require('../Tooltip');

var _Tooltip2 = _interopRequireDefault(_Tooltip);

var _SafeLink = require('../common/SafeLink');

var _SafeLink2 = _interopRequireDefault(_SafeLink);

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

var resultClasses = (0, _reactBemHelper2.default)('c-search-result');

var SearchResult = exports.SearchResult = function SearchResult(_ref) {
  var tabOptions = _ref.tabOptions,
      children = _ref.children,
      messages = _ref.messages,
      searchString = _ref.searchString,
      currentTab = _ref.currentTab,
      onTabChange = _ref.onTabChange,
      author = _ref.author,
      currentCompetenceGoal = _ref.currentCompetenceGoal,
      competenceGoalsOpen = _ref.competenceGoalsOpen,
      onToggleCompetenceGoals = _ref.onToggleCompetenceGoals,
      competenceGoals = _ref.competenceGoals;
  return _react2.default.createElement(
    _ndlaI18n.Trans,
    null,
    function (_ref2) {
      var t = _ref2.t;
      return _react2.default.createElement(
        'div',
        resultClasses(),
        author || _react2.default.createElement(
          'div',
          resultClasses('heading-wrapper'),
          _react2.default.createElement(
            'h1',
            resultClasses('heading', currentCompetenceGoal ? 'competence-goal' : null),
            messages.searchStringLabel,
            ' ',
            _react2.default.createElement(
              'span',
              null,
              searchString
            )
          ),
          competenceGoalsOpen && _react2.default.createElement(
            _ndlaButton2.default,
            _extends({
              link: true
            }, resultClasses('close-competencegoals-btn'), {
              onClick: onToggleCompetenceGoals }),
            t('competenceGoals.closeCompetenceGoals'),
            _react2.default.createElement(_action.Cross, { className: 'c-icon--22 u-margin-left-tiny' })
          )
        ),
        _react2.default.createElement(
          'h2',
          null,
          messages.subHeading
        ),
        !competenceGoalsOpen && currentCompetenceGoal && _react2.default.createElement(
          'ul',
          resultClasses('current-goal'),
          _react2.default.createElement(
            'li',
            null,
            currentCompetenceGoal
          )
        ),
        !competenceGoalsOpen && competenceGoals !== null && _react2.default.createElement(
          'p',
          resultClasses('current-goal-info'),
          messages.openCompetenceGoalsButtonPrefix,
          ' ',
          _react2.default.createElement(
            _ndlaButton2.default,
            { link: true, onClick: onToggleCompetenceGoals },
            messages.openCompetenceGoalsButton
          )
        ),
        competenceGoalsOpen && _react2.default.createElement(
          'div',
          resultClasses('competence-goals'),
          competenceGoals
        ),
        !competenceGoalsOpen && _react2.default.createElement(
          _react.Fragment,
          null,
          _react2.default.createElement(
            _ndlaTabs.FilterTabs,
            {
              dropdownBtnLabel: t('searchPage.searchPageMessages.dropdownBtnLabel'),
              value: currentTab,
              options: tabOptions,
              contentId: 'search-result-content',
              onChange: onTabChange },
            children
          ),
          _react2.default.createElement(
            'div',
            resultClasses('narrow-result'),
            children
          )
        )
      );
    }
  );
};

SearchResult.propTypes = {
  tabOptions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string.isRequired,
    value: _propTypes2.default.string.isRequired
  })).isRequired,
  currentTab: _propTypes2.default.string,
  children: _propTypes2.default.node.isRequired,
  messages: _propTypes2.default.shape({
    searchStringLabel: _propTypes2.default.string.isRequired,
    subHeading: _propTypes2.default.string.isRequired,
    openCompetenceGoalsButtonPrefix: _propTypes2.default.string,
    openCompetenceGoalsButton: _propTypes2.default.string
  }).isRequired,
  currentCompetenceGoal: _propTypes2.default.string,
  competenceGoalsOpen: _propTypes2.default.bool,
  onToggleCompetenceGoals: _propTypes2.default.func,
  competenceGoals: _propTypes2.default.node,
  searchString: function searchString(props, propName, componentName) {
    if (props.author === null && typeof props[propName] !== 'string') {
      return new Error('Invalid prop \'searchString\' in ' + componentName + '. Required unless props.author === PropTypes.node');
    }
    return null;
  },
  onTabChange: _propTypes2.default.func.isRequired,
  author: _propTypes2.default.node
};

SearchResult.defaultProps = {
  author: null
};

var searchResultItemClasses = (0, _reactBemHelper2.default)('c-search-result-item');

var searchResultItemShape = _propTypes2.default.shape({
  id: _propTypes2.default.number.isRequired,
  title: _propTypes2.default.string.isRequired,
  url: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired,
  breadcrumb: _propTypes2.default.arrayOf(_propTypes2.default.string),
  subjects: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    title: _propTypes2.default.string.isRequired,
    url: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
  })),
  additional: _propTypes2.default.bool,
  image: _propTypes2.default.node,
  ingress: _propTypes2.default.string.isRequired,
  contentTypeIcon: _propTypes2.default.node.isRequired,
  contentTypeLabel: _propTypes2.default.string.isRequired
});

var SearchResultItem = function SearchResultItem(_ref3) {
  var item = _ref3.item,
      subjectsLabel = _ref3.subjectsLabel,
      additionalContentToolip = _ref3.additionalContentToolip;
  return _react2.default.createElement(
    'li',
    _extends({ key: item.id }, searchResultItemClasses()),
    _react2.default.createElement(
      'article',
      null,
      _react2.default.createElement(
        'header',
        searchResultItemClasses('header'),
        _react2.default.createElement(
          'h1',
          null,
          item.url.href ? _react2.default.createElement(
            'a',
            item.url,
            item.title
          ) : _react2.default.createElement(
            _SafeLink2.default,
            { to: item.url },
            item.title
          )
        ),
        _react2.default.createElement(
          'div',
          searchResultItemClasses('content-type-wrapper'),
          item.contentTypeIcon,
          _react2.default.createElement(
            'span',
            searchResultItemClasses('content-type-label'),
            item.contentTypeLabel
          )
        ),
        item.type && _react2.default.createElement(
          'div',
          searchResultItemClasses('pills'),
          item.type
        ),
        item.additional && (additionalContentToolip ? _react2.default.createElement(
          _Tooltip2.default,
          _extends({
            id: 'search-additional-tooltip-' + item.id,
            tooltip: additionalContentToolip
          }, searchResultItemClasses('additional')),
          _react2.default.createElement(_common.Additional, { className: 'c-icon--20' })
        ) : _react2.default.createElement(
          'span',
          searchResultItemClasses('additional'),
          _react2.default.createElement(_common.Additional, { className: 'c-icon--20' })
        ))
      ),
      item.breadcrumb && item.breadcrumb.length > 0 && _react2.default.createElement(
        'div',
        searchResultItemClasses('breadcrumb'),
        item.breadcrumb.map(function (breadcrumbItem, index) {
          var icon = null;

          if (index !== item.breadcrumb.length - 1) {
            icon = _react2.default.createElement(_common.ChevronRight, null);
          }
          return _react2.default.createElement(
            _react.Fragment,
            { key: (0, _ndlaUtil.uuid)() },
            _react2.default.createElement(
              'span',
              null,
              breadcrumbItem
            ),
            icon
          );
        })
      ),
      _react2.default.createElement(
        'div',
        searchResultItemClasses('content'),
        _react2.default.createElement('p', _extends({}, searchResultItemClasses('ingress'), {
          dangerouslySetInnerHTML: { __html: item.ingress }
        })),
        item.image
      ),
      item.subjects && item.subjects.length !== 0 && _react2.default.createElement(
        'div',
        searchResultItemClasses('subjects'),
        _react2.default.createElement(
          'span',
          null,
          subjectsLabel
        ),
        _react2.default.createElement(
          'ul',
          null,
          item.subjects.map(function (subject) {
            return _react2.default.createElement(
              'li',
              { key: (0, _ndlaUtil.uuid)() },
              subject.url.href ? _react2.default.createElement(
                'a',
                subject.url,
                subject.title
              ) : _react2.default.createElement(
                _SafeLink2.default,
                { to: subject.url },
                subject.title
              )
            );
          })
        )
      )
    )
  );
};

SearchResultItem.propTypes = {
  item: searchResultItemShape.isRequired,
  additionalContentToolip: _propTypes2.default.string.isRequired,
  subjectsLabel: _propTypes2.default.string.isRequired
};

var SearchResultList = exports.SearchResultList = function SearchResultList(_ref4) {
  var results = _ref4.results;
  return _react2.default.createElement(
    _ndlaI18n.Trans,
    null,
    function (_ref5) {
      var t = _ref5.t;
      return results.length === 0 ? _react2.default.createElement(
        'article',
        { className: 'c-search-result-list__empty' },
        _react2.default.createElement(
          'h1',
          null,
          t('searchPage.searchResultListMessages.noResultHeading')
        ),
        _react2.default.createElement(
          'p',
          null,
          t('searchPage.searchResultListMessages.noResultDescription')
        )
      ) : _react2.default.createElement(
        'ul',
        { className: 'c-search-result-list' },
        results.map(function (item) {
          return _react2.default.createElement(SearchResultItem, {
            key: 'search_result_item_' + (_typeof(item.url) === 'object' ? item.url.href : item.url),
            item: item,
            additionalContentToolip: t('resource.tooltipAdditionalTopic'),
            subjectsLabel: t('searchPage.searchResultListMessages.subjectsLabel')
          });
        })
      );
    }
  );
};

SearchResultList.propTypes = {
  results: _propTypes2.default.arrayOf(searchResultItemShape)
};