ndla-ui/es/FileList/File.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; };

import React from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { Download } from 'ndla-icons/common';

import SafeLink from '../common/SafeLink';

var classes = BEMHelper('c-file-list');

var renderFormat = function renderFormat(format, title, isPrimary, id) {
  var titleWithFormat = title + ' (' + format.fileType.toUpperCase() + ')';

  var formatId = id + '_' + format.fileType;

  return React.createElement(
    SafeLink,
    _extends({}, classes('link'), {
      key: format.url,
      to: format.url,
      'aria-label': titleWithFormat,
      'aria-describedby': formatId }),
    React.createElement(Download, null),
    React.createElement(
      'span',
      classes('link-text'),
      React.createElement(
        'span',
        null,
        isPrimary ? titleWithFormat : '(' + format.fileType.toUpperCase() + ')'
      )
    ),
    React.createElement(
      'span',
      _extends({}, classes('tooltip'), { 'aria-hidden': true, role: 'tooltip', id: formatId }),
      React.createElement(
        'span',
        classes('tooltip-text'),
        format.tooltip
      )
    )
  );
};

var File = function File(_ref) {
  var file = _ref.file,
      id = _ref.id;

  var formatLinks = file.formats.map(function (format, index) {
    return renderFormat(format, file.title, index === 0, id);
  });

  return React.createElement(
    'li',
    _extends({}, classes('item'), { key: file.title }),
    formatLinks
  );
};

File.propTypes = {
  id: PropTypes.string.isRequired,
  file: PropTypes.shape({
    title: PropTypes.string.isRequired,
    formats: PropTypes.arrayOf(PropTypes.shape({
      url: PropTypes.string.isRequired,
      fileType: PropTypes.string.isRequired,
      tooltip: PropTypes.string.isRequired
    })).isRequired
  })
};

export default File;