ndla-ui/es/Search/SearchResult.js

UI component library for NDLA.

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; };

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { ChevronRight, Additional } from 'ndla-icons/common';
import { Cross } from 'ndla-icons/action';
import { uuid } from 'ndla-util';
import { Trans } from 'ndla-i18n';
import Button from 'ndla-button';

import { FilterTabs } from 'ndla-tabs';
import Tooltip from '../Tooltip';
import SafeLink from '../common/SafeLink';

var resultClasses = BEMHelper('c-search-result');

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

SearchResult.propTypes = {
  tabOptions: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
  })).isRequired,
  currentTab: PropTypes.string,
  children: PropTypes.node.isRequired,
  messages: PropTypes.shape({
    searchStringLabel: PropTypes.string.isRequired,
    subHeading: PropTypes.string.isRequired,
    openCompetenceGoalsButtonPrefix: PropTypes.string,
    openCompetenceGoalsButton: PropTypes.string
  }).isRequired,
  currentCompetenceGoal: PropTypes.string,
  competenceGoalsOpen: PropTypes.bool,
  onToggleCompetenceGoals: PropTypes.func,
  competenceGoals: PropTypes.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: PropTypes.func.isRequired,
  author: PropTypes.node
};

SearchResult.defaultProps = {
  author: null
};

var searchResultItemClasses = BEMHelper('c-search-result-item');

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

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

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

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

export var SearchResultList = function SearchResultList(_ref4) {
  var results = _ref4.results;
  return React.createElement(
    Trans,
    null,
    function (_ref5) {
      var t = _ref5.t;
      return results.length === 0 ? React.createElement(
        'article',
        { className: 'c-search-result-list__empty' },
        React.createElement(
          'h1',
          null,
          t('searchPage.searchResultListMessages.noResultHeading')
        ),
        React.createElement(
          'p',
          null,
          t('searchPage.searchResultListMessages.noResultDescription')
        )
      ) : React.createElement(
        'ul',
        { className: 'c-search-result-list' },
        results.map(function (item) {
          return React.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: PropTypes.arrayOf(searchResultItemShape)
};