ndla-ui/es/Article/ArticleAuthorContent.js

UI component library for NDLA.

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

/**
 * Copyright (c) 2016-present, NDLA.
 *
 * This source code is licensed under the GPLv3 license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { Trans } from 'ndla-i18n';

import { Portrait, SafeLink } from 'ndla-ui';

var classes = new BEMHelper({
  name: 'article-author-popup',
  prefix: 'c-'
});

var ArticleAuthorContent = function ArticleAuthorContent(_ref) {
  var showAuthor = _ref.showAuthor,
      authors = _ref.authors,
      onSelectAuthor = _ref.onSelectAuthor;

  if ((showAuthor === null || showAuthor === undefined) && authors.length !== 1) {
    // Render author list
    return React.createElement(
      Trans,
      null,
      function (_ref2) {
        var t = _ref2.t;
        return React.createElement(
          'div',
          null,
          React.createElement(
            'h1',
            null,
            t('article.multipleAuthorsLabel')
          ),
          React.createElement('hr', null),
          React.createElement(
            'ul',
            classes('ul-list'),
            authors.map(function (author, index) {
              return React.createElement(
                'li',
                { key: author.name },
                author.role && React.createElement(
                  'span',
                  null,
                  author.role,
                  ':'
                ),
                React.createElement(
                  'span',
                  null,
                  author.phone || author.email || author.introduction || author.title ? React.createElement(
                    'button',
                    {
                      type: 'button',
                      className: 'c-button--link',
                      onClick: function onClick() {
                        onSelectAuthor(index);
                      } },
                    author.name
                  ) : author.name
                ),
                author.licenses && React.createElement(
                  'span',
                  classes('', 'author-licenses'),
                  author.licenses
                )
              );
            })
          )
        );
      }
    );
  }
  // Show author
  var _authors = authors[showAuthor !== null && showAuthor !== undefined ? showAuthor : 0],
      image = _authors.image,
      name = _authors.name,
      shortName = _authors.shortName,
      title = _authors.title,
      role = _authors.role,
      phone = _authors.phone,
      email = _authors.email,
      introduction = _authors.introduction,
      urlContributions = _authors.urlContributions,
      urlAuthor = _authors.urlAuthor;


  return React.createElement(
    Trans,
    null,
    function (_ref3) {
      var t = _ref3.t;
      return React.createElement(
        'div',
        classes(),
        React.createElement(
          'div',
          classes('author-info'),
          image && React.createElement(Portrait, _extends({ src: image, alt: name }, classes('portrait'))),
          React.createElement(
            'section',
            null,
            React.createElement(
              'h1',
              null,
              name
            ),
            React.createElement('hr', null),
            React.createElement(
              'ul',
              null,
              title && React.createElement(
                'li',
                null,
                '' + title + (title ? ' / ' : '') + role
              ),
              phone && React.createElement(
                'li',
                null,
                phone
              ),
              email && React.createElement(
                'li',
                null,
                React.createElement(
                  SafeLink,
                  { to: 'mailto:' + email },
                  email
                )
              )
            ),
            introduction && React.createElement(
              'p',
              null,
              introduction
            ),
            React.createElement(
              'div',
              classes('link-container'),
              urlContributions && React.createElement(
                SafeLink,
                {
                  className: 'c-button c-button--outline',
                  to: urlContributions },
                t('article.urlContributionsLabel', { name: shortName })
              ),
              urlAuthor && React.createElement(
                SafeLink,
                { to: urlAuthor },
                t('article.urlAuthorLabel', { name: shortName })
              )
            )
          )
        )
      );
    }
  );
};

ArticleAuthorContent.propTypes = {
  authors: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
    shortName: PropTypes.string.isRequired,
    title: PropTypes.string,
    phone: PropTypes.string,
    email: PropTypes.string,
    image: PropTypes.string,
    introduction: PropTypes.string,
    role: PropTypes.string,
    urlContributions: PropTypes.string,
    urlAuthor: PropTypes.string,
    licenses: PropTypes.string
  })).isRequired,
  showAuthor: PropTypes.number,
  onSelectAuthor: PropTypes.func.isRequired
};

ArticleAuthorContent.defaultProps = {
  showAuthor: null
};

export default ArticleAuthorContent;