ndla-ui/lib/MediaList/MediaList.js

UI component library for NDLA.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaListItemMeta = exports.HandleLink = exports.MediaListItemActions = exports.MediaListItemBody = exports.MediaListCCLink = exports.MediaListItemImage = exports.MediaListItem = exports.MediaList = undefined;

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.
                                                                                                                                                                                                                                                                   *
                                                                                                                                                                                                                                                                   */

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _ndlaLicenses = require('ndla-licenses');

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

var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);

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

var _LicenseByline = require('../LicenseByline');

var _LicenseByline2 = _interopRequireDefault(_LicenseByline);

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

var oClasses = new _reactBemHelper2.default({
  name: 'media',
  prefix: 'o-'
});

var cClasses = new _reactBemHelper2.default({
  name: 'medialist',
  prefix: 'c-'
});

var MediaList = exports.MediaList = function MediaList(_ref) {
  var children = _ref.children;
  return _react2.default.createElement(
    'ul',
    cClasses(),
    children
  );
};

MediaList.propTypes = {
  children: _propTypes2.default.node.isRequired
};

var MediaListItem = exports.MediaListItem = function MediaListItem(_ref2) {
  var children = _ref2.children;
  return _react2.default.createElement(
    'li',
    oClasses(null, null, cClasses('item').className),
    children
  );
};

MediaListItem.propTypes = {
  children: _propTypes2.default.node.isRequired
};

var MediaListItemImage = exports.MediaListItemImage = function MediaListItemImage(_ref3) {
  var children = _ref3.children;
  return _react2.default.createElement(
    'div',
    oClasses('img', null, cClasses('img').className),
    _react2.default.createElement(
      'div',
      null,
      children
    )
  );
};

MediaListItemImage.propTypes = {
  children: _propTypes2.default.node.isRequired
};

var MediaListCCLink = exports.MediaListCCLink = function MediaListCCLink(_ref4) {
  var children = _ref4.children,
      url = _ref4.url;
  return _react2.default.createElement(
    'a',
    {
      className: 'c-figure-license__link',
      target: '_blank',
      rel: 'noopener noreferrer license',
      href: url },
    children
  );
};

MediaListCCLink.propTypes = {
  children: _propTypes2.default.node.isRequired,
  url: _propTypes2.default.string.isRequired
};

MediaListCCLink.defaultProps = {
  language: 'no'
};

var MediaListItemBody = exports.MediaListItemBody = function MediaListItemBody(_ref5) {
  var children = _ref5.children,
      licenseAbbreviation = _ref5.license,
      messages = _ref5.messages,
      title = _ref5.title,
      resourceUrl = _ref5.resourceUrl,
      resourceType = _ref5.resourceType;

  var license = (0, _ndlaLicenses.getLicenseByAbbreviation)(licenseAbbreviation);

  var containerProps = (0, _ndlaLicenses.isCreativeCommonsLicense)(license.rights) ? _extends({}, oClasses('body', null, cClasses('body').className), {
    'xmlns:cc': 'https://creativecommons.org/ns#',
    'xmlns:dct': 'http://purl.org/dc/terms/',
    about: resourceUrl
  }) : _extends({}, oClasses('body', null, cClasses('body').className));

  var metaResourceType = (0, _ndlaLicenses.getResourceTypeNamespace)(resourceType);

  return _react2.default.createElement(
    'div',
    containerProps,
    metaResourceType && _react2.default.createElement('span', {
      rel: 'dct:type',
      href: metaResourceType,
      style: { display: 'none' }
    }),
    title ? _react2.default.createElement(
      'h3',
      { className: 'c-medialist__title' },
      title,
      ' '
    ) : null,
    _react2.default.createElement(_LicenseByline2.default, {
      withDescription: true,
      messages: messages,
      licenseRights: license.rights
    }),
    _react2.default.createElement(
      MediaListCCLink,
      { url: license.url },
      license.linkText
    ),
    children
  );
};

MediaListItemBody.propTypes = {
  children: _propTypes2.default.node.isRequired,
  license: _propTypes2.default.string.isRequired,
  resourceUrl: _propTypes2.default.string,
  resourceType: _propTypes2.default.oneOf(Object.keys(_ndlaLicenses.resourceTypes).map(function (key) {
    return _ndlaLicenses.resourceTypes[key];
  })),
  messages: _propTypes2.default.shape({
    modelPremission: _propTypes2.default.string
  }),
  title: _propTypes2.default.string
};

MediaListItemBody.defaultProps = {
  resourceUrl: '' // defaults to current page
};

var MediaListItemActions = exports.MediaListItemActions = function MediaListItemActions(_ref6) {
  var children = _ref6.children;
  return _react2.default.createElement(
    'div',
    cClasses('actions'),
    children
  );
};

MediaListItemActions.propTypes = {
  children: _propTypes2.default.node.isRequired
};

var isLink = function isLink(text) {
  return text.startsWith('http') || text.startsWith('https');
};

var HandleLink = exports.HandleLink = function HandleLink(_ref7) {
  var text = _ref7.text,
      children = _ref7.children;

  if (isLink(text)) {
    return _react2.default.createElement(
      'a',
      { href: text, target: '_blank', rel: 'noopener noreferrer' },
      children
    );
  }
  return _react2.default.createElement(
    'span',
    null,
    children
  );
};

HandleLink.propTypes = {
  text: _propTypes2.default.string.isRequired,
  children: _propTypes2.default.node.isRequired
};

var attributionTypes = [_ndlaLicenses.metaTypes.author, _ndlaLicenses.metaTypes.copyrightHolder, _ndlaLicenses.metaTypes.contributor];

var MediaListItemMeta = exports.MediaListItemMeta = function MediaListItemMeta(_ref8) {
  var items = _ref8.items;

  var attributionItems = items.filter(function (item) {
    return attributionTypes.some(function (type) {
      return type === item.metaType;
    });
  });
  var attributionMeta = attributionItems.map(function (item) {
    return item.label + ': ' + item.description;
  }).join(', ');

  return _react2.default.createElement(
    'ul',
    _extends({}, cClasses('actions'), {
      property: 'cc:attributionName',
      content: attributionMeta }),
    items.map(function (item) {
      return _react2.default.createElement(
        'li',
        { key: (0, _ndlaUtil.uuid)(), className: 'c-medialist__meta-item' },
        item.label,
        ':',
        ' ',
        _react2.default.createElement(
          HandleLink,
          { text: item.description },
          item.description
        )
      );
    })
  );
};

var mediaListItemShape = _propTypes2.default.arrayOf(_propTypes2.default.shape({
  label: _propTypes2.default.string.isRequired,
  description: _propTypes2.default.string.isRequired,
  metaType: _propTypes2.default.oneOf(Object.keys(_ndlaLicenses.metaTypes).map(function (key) {
    return _ndlaLicenses.metaTypes[key];
  })).isRequired
}));

MediaListItemMeta.propTypes = {
  items: mediaListItemShape
};

MediaListItemMeta.defaultProps = {
  items: []
};