ndla-ui
Version:
UI component library for NDLA.
243 lines (222 loc) • 8.69 kB
JavaScript
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* 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, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import BEMHelper from 'react-bem-helper';
import { Time, User, Additional } from 'ndla-icons/common';
import { injectT } from 'ndla-i18n';
import Modal, { ModalHeader, ModalBody, ModalCloseButton } from 'ndla-modal';
import Button from 'ndla-button';
import ArticleAuthorContent from './ArticleAuthorContent';
var classes = new BEMHelper({
name: 'article-byline',
prefix: 'c-'
});
var ArticleByline = function (_Component) {
_inherits(ArticleByline, _Component);
function ArticleByline(props) {
_classCallCheck(this, ArticleByline);
var _this = _possibleConstructorReturn(this, (ArticleByline.__proto__ || Object.getPrototypeOf(ArticleByline)).call(this, props));
_this.state = {
showAuthor: null
};
_this.onSelectAuthor = _this.onSelectAuthor.bind(_this);
return _this;
}
_createClass(ArticleByline, [{
key: 'onSelectAuthor',
value: function onSelectAuthor() {
var showAuthor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
this.setState({
showAuthor: showAuthor
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
authors = _props.authors,
license = _props.license,
licenseBox = _props.licenseBox,
updated = _props.updated,
additional = _props.additional,
t = _props.t;
var showAuthor = this.state.showAuthor;
var authorsLinkable = authors.length > 1 || authors.length && authors[0].title && authors[0].role;
var authorAriaLabel = void 0;
if (authorsLinkable && authors.length) {
authorAriaLabel = authors.length > 1 ? t('article.multipleAuthorsLabelAria', {
names: authors.reduce(function (prev, current, index) {
if (index === 1) {
if (index === authors.length - 1) {
return prev.name + ' ' + t('article.multipleAuthorsLabelAriaConjunction') + ' ' + current.name;
}
return prev.name + ', ' + current.name;
}
if (index === authors.length - 1) {
return prev + ' ' + t('article.multipleAuthorsLabelAriaConjunction') + ' ' + current.name;
}
return prev + ', ' + current.name;
})
}) : t('article.singleAuthorsLabelAria', { name: authors[0].name });
}
var authorName = authors.length > 0 ? '' + authors[0].name + (authors.length > 1 ? ' ' + t('article.multipleAuthorsLabelAbbreviation') : '') : authors[0] && authors[0].name;
return React.createElement(
'div',
classes(),
React.createElement(
'span',
classes('flex'),
authors.length > 0 && React.createElement(
Fragment,
null,
React.createElement(
'span',
classes('icon'),
React.createElement(User, null)
),
React.createElement(
'span',
classes('authors'),
authorsLinkable ? React.createElement(
Modal,
{
narrow: true,
onClose: this.onSelectAuthor,
activateButton: React.createElement(
Button,
{ 'aria-label': authorAriaLabel, link: true },
authorName
) },
function (onClose) {
return React.createElement(
Fragment,
null,
React.createElement(
ModalHeader,
{ modifier: 'no-bottom-padding' },
React.createElement(ModalCloseButton, {
onClick: onClose,
title: t('article.closeLabel')
})
),
React.createElement(
ModalBody,
null,
React.createElement(ArticleAuthorContent, {
showAuthor: showAuthor,
onSelectAuthor: _this2.onSelectAuthor,
authors: authors
})
)
);
}
) : authorName
)
),
React.createElement(
'span',
null,
' (' + license + ')'
)
),
React.createElement(
'span',
classes('flex'),
React.createElement(
'span',
classes('icon'),
React.createElement(Time, null)
),
React.createElement(
'span',
classes('date'),
t('article.lastUpdated'),
' ',
updated
)
),
additional && React.createElement(
'span',
classes('flex'),
React.createElement(
'span',
classes('additional'),
React.createElement(Additional, {
key: 'additional',
className: 'c-icon--20 u-margin-right-tiny'
}),
t('article.additionalLabel')
)
),
licenseBox && React.createElement(
'span',
classes('flex'),
React.createElement(
Modal,
{
activateButton: React.createElement(
Button,
{ link: true },
t('article.useContent')
),
size: 'medium' },
function (onClose) {
return React.createElement(
Fragment,
null,
React.createElement(
ModalHeader,
{ modifier: 'no-bottom-padding' },
React.createElement(ModalCloseButton, { onClick: onClose, title: 'Lukk' })
),
React.createElement(
ModalBody,
null,
licenseBox
)
);
}
)
)
);
}
}]);
return ArticleByline;
}(Component);
ArticleByline.propTypes = {
id: PropTypes.string,
authors: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
shortName: PropTypes.string,
title: PropTypes.string,
phone: PropTypes.string,
email: PropTypes.string,
image: PropTypes.string,
introduction: PropTypes.string,
role: PropTypes.string,
urlContributions: PropTypes.string,
urlAuthor: PropTypes.string
})),
updated: PropTypes.string.isRequired,
license: PropTypes.string.isRequired,
licenseBox: PropTypes.node,
additional: PropTypes.bool,
t: PropTypes.func.isRequired
};
ArticleByline.defaultProps = {
authors: [],
id: 'article-line-id',
additional: false
};
export default injectT(ArticleByline);