ndla-ui
Version:
UI component library for NDLA.
268 lines (232 loc) • 12.8 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactBemHelper = require('react-bem-helper');
var _reactBemHelper2 = _interopRequireDefault(_reactBemHelper);
var _common = require('ndla-icons/common');
var _ndlaI18n = require('ndla-i18n');
var _ndlaModal = require('ndla-modal');
var _ndlaModal2 = _interopRequireDefault(_ndlaModal);
var _ndlaButton = require('ndla-button');
var _ndlaButton2 = _interopRequireDefault(_ndlaButton);
var _ArticleAuthorContent = require('./ArticleAuthorContent');
var _ArticleAuthorContent2 = _interopRequireDefault(_ArticleAuthorContent);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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.
*
*/
var classes = new _reactBemHelper2.default({
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 _react2.default.createElement(
'div',
classes(),
_react2.default.createElement(
'span',
classes('flex'),
authors.length > 0 && _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
'span',
classes('icon'),
_react2.default.createElement(_common.User, null)
),
_react2.default.createElement(
'span',
classes('authors'),
authorsLinkable ? _react2.default.createElement(
_ndlaModal2.default,
{
narrow: true,
onClose: this.onSelectAuthor,
activateButton: _react2.default.createElement(
_ndlaButton2.default,
{ 'aria-label': authorAriaLabel, link: true },
authorName
) },
function (onClose) {
return _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
_ndlaModal.ModalHeader,
{ modifier: 'no-bottom-padding' },
_react2.default.createElement(_ndlaModal.ModalCloseButton, {
onClick: onClose,
title: t('article.closeLabel')
})
),
_react2.default.createElement(
_ndlaModal.ModalBody,
null,
_react2.default.createElement(_ArticleAuthorContent2.default, {
showAuthor: showAuthor,
onSelectAuthor: _this2.onSelectAuthor,
authors: authors
})
)
);
}
) : authorName
)
),
_react2.default.createElement(
'span',
null,
' (' + license + ')'
)
),
_react2.default.createElement(
'span',
classes('flex'),
_react2.default.createElement(
'span',
classes('icon'),
_react2.default.createElement(_common.Time, null)
),
_react2.default.createElement(
'span',
classes('date'),
t('article.lastUpdated'),
' ',
updated
)
),
additional && _react2.default.createElement(
'span',
classes('flex'),
_react2.default.createElement(
'span',
classes('additional'),
_react2.default.createElement(_common.Additional, {
key: 'additional',
className: 'c-icon--20 u-margin-right-tiny'
}),
t('article.additionalLabel')
)
),
licenseBox && _react2.default.createElement(
'span',
classes('flex'),
_react2.default.createElement(
_ndlaModal2.default,
{
activateButton: _react2.default.createElement(
_ndlaButton2.default,
{ link: true },
t('article.useContent')
),
size: 'medium' },
function (onClose) {
return _react2.default.createElement(
_react.Fragment,
null,
_react2.default.createElement(
_ndlaModal.ModalHeader,
{ modifier: 'no-bottom-padding' },
_react2.default.createElement(_ndlaModal.ModalCloseButton, { onClick: onClose, title: 'Lukk' })
),
_react2.default.createElement(
_ndlaModal.ModalBody,
null,
licenseBox
)
);
}
)
)
);
}
}]);
return ArticleByline;
}(_react.Component);
ArticleByline.propTypes = {
id: _propTypes2.default.string,
authors: _propTypes2.default.arrayOf(_propTypes2.default.shape({
name: _propTypes2.default.string.isRequired,
shortName: _propTypes2.default.string,
title: _propTypes2.default.string,
phone: _propTypes2.default.string,
email: _propTypes2.default.string,
image: _propTypes2.default.string,
introduction: _propTypes2.default.string,
role: _propTypes2.default.string,
urlContributions: _propTypes2.default.string,
urlAuthor: _propTypes2.default.string
})),
updated: _propTypes2.default.string.isRequired,
license: _propTypes2.default.string.isRequired,
licenseBox: _propTypes2.default.node,
additional: _propTypes2.default.bool,
t: _propTypes2.default.func.isRequired
};
ArticleByline.defaultProps = {
authors: [],
id: 'article-line-id',
additional: false
};
exports.default = (0, _ndlaI18n.injectT)(ArticleByline);