ndla-ui
Version:
UI component library for NDLA.
294 lines (243 loc) • 12.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Article = exports.ArticleIntroduction = exports.ArticleTitle = exports.ArticleHeaderWrapper = exports.ArticleWrapper = undefined;
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 _ndlaLicenses = require('ndla-licenses');
var _isString = require('lodash/isString');
var _isString2 = _interopRequireDefault(_isString);
var _reactDeviceDetect = require('react-device-detect');
var _ArticleFootNotes = require('./ArticleFootNotes');
var _ArticleFootNotes2 = _interopRequireDefault(_ArticleFootNotes);
var _ArticleContent = require('./ArticleContent');
var _ArticleContent2 = _interopRequireDefault(_ArticleContent);
var _ArticleByline = require('./ArticleByline');
var _ArticleByline2 = _interopRequireDefault(_ArticleByline);
var _Layout = require('../Layout');
var _Layout2 = _interopRequireDefault(_Layout);
var _shapes = require('../shapes');
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',
prefix: 'c-'
});
var ArticleWrapper = exports.ArticleWrapper = function ArticleWrapper(_ref) {
var children = _ref.children,
modifier = _ref.modifier;
return _react2.default.createElement(
'article',
classes(undefined, modifier),
children
);
};
ArticleWrapper.propTypes = {
children: _propTypes2.default.node.isRequired,
modifier: _propTypes2.default.string
};
var ArticleHeaderWrapper = exports.ArticleHeaderWrapper = function (_Component) {
_inherits(ArticleHeaderWrapper, _Component);
function ArticleHeaderWrapper() {
_classCallCheck(this, ArticleHeaderWrapper);
return _possibleConstructorReturn(this, (ArticleHeaderWrapper.__proto__ || Object.getPrototypeOf(ArticleHeaderWrapper)).apply(this, arguments));
}
_createClass(ArticleHeaderWrapper, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (_reactDeviceDetect.isMobile) {
var heroContentList = document.querySelectorAll('.c-article__header');
if (heroContentList.length === 1) {
heroContentList[0].scrollIntoView(true);
window.scrollBy(0, heroContentList[0].offsetTop - 120); // Adjust for header
}
}
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
classes('header'),
this.props.children
);
}
}]);
return ArticleHeaderWrapper;
}(_react.Component);
ArticleHeaderWrapper.propTypes = {
children: _propTypes2.default.node.isRequired
};
var ArticleTitle = exports.ArticleTitle = function ArticleTitle(_ref2) {
var children = _ref2.children,
icon = _ref2.icon,
label = _ref2.label,
hasCompetenceGoals = _ref2.hasCompetenceGoals;
var modifiers = [];
if (icon) {
modifiers.push('icon');
}
if (hasCompetenceGoals) {
modifiers.push('with-competence-goals');
}
var labelView = null;
if (label) {
labelView = _react2.default.createElement(
'p',
null,
label
);
}
return _react2.default.createElement(
'div',
classes('title', modifiers),
icon,
labelView,
_react2.default.createElement(
'h1',
null,
children
)
);
};
ArticleTitle.propTypes = {
hasCompetenceGoals: _propTypes2.default.bool,
children: _propTypes2.default.node.isRequired,
label: _propTypes2.default.string,
icon: _propTypes2.default.node
};
ArticleTitle.defaultProps = {
icon: null,
label: null
};
var ArticleIntroduction = exports.ArticleIntroduction = function ArticleIntroduction(_ref3) {
var children = _ref3.children;
if ((0, _isString2.default)(children)) {
/* Since article introduction is already escaped from the api
we run into a double escaping issues as React escapes all strings.
Use dangerouslySetInnerHTML to circumvent the issue */
return _react2.default.createElement('p', {
className: 'article_introduction',
dangerouslySetInnerHTML: { __html: children }
});
}
if (children) {
return _react2.default.createElement(
'p',
{ className: 'article_introduction' },
children
);
}
return null;
};
ArticleIntroduction.propTypes = {
children: _propTypes2.default.node
};
var Article = exports.Article = function Article(_ref4) {
var _ref4$article = _ref4.article,
title = _ref4$article.title,
introduction = _ref4$article.introduction,
updated = _ref4$article.updated,
content = _ref4$article.content,
footNotes = _ref4$article.footNotes,
_ref4$article$copyrig = _ref4$article.copyright,
licenseObj = _ref4$article$copyrig.license,
creators = _ref4$article$copyrig.creators,
rightsholders = _ref4$article$copyrig.rightsholders,
icon = _ref4.icon,
additional = _ref4.additional,
licenseBox = _ref4.licenseBox,
modifier = _ref4.modifier,
messages = _ref4.messages,
children = _ref4.children,
competenceGoals = _ref4.competenceGoals,
competenceGoalsNarrow = _ref4.competenceGoalsNarrow;
var license = (0, _ndlaLicenses.getLicenseByAbbreviation)(licenseObj.license).abbreviation;
var showCreators = Array.isArray(creators) && creators.length > 0;
var authors = showCreators ? creators : rightsholders;
return _react2.default.createElement(
ArticleWrapper,
{ modifier: modifier },
_react2.default.createElement(
_Layout2.default,
{ layout: 'center' },
_react2.default.createElement(
ArticleHeaderWrapper,
null,
competenceGoals,
_react2.default.createElement(
ArticleTitle,
{
icon: icon,
label: messages.label,
hasCompetenceGoals: competenceGoals !== null },
title
),
_react2.default.createElement(
ArticleIntroduction,
null,
introduction
),
_react2.default.createElement(_ArticleByline2.default, {
authors: authors,
updated: updated,
license: license,
additional: additional,
licenseBox: licenseBox
}),
competenceGoalsNarrow
)
),
_react2.default.createElement(
_Layout2.default,
{ layout: 'center' },
_react2.default.createElement(_ArticleContent2.default, { content: content })
),
_react2.default.createElement(
_Layout2.default,
{ layout: 'center' },
footNotes && footNotes.length > 0 && _react2.default.createElement(_ArticleFootNotes2.default, { footNotes: footNotes })
),
_react2.default.createElement(
_Layout2.default,
{ layout: 'extend' },
children
)
);
};
Article.propTypes = {
article: _shapes.ArticleShape.isRequired,
modifier: _propTypes2.default.string,
icon: _propTypes2.default.node,
licenseBox: _propTypes2.default.node,
additional: _propTypes2.default.bool,
competenceGoals: _propTypes2.default.node,
competenceGoalsNarrow: _propTypes2.default.node,
children: _propTypes2.default.node,
messages: _propTypes2.default.shape({
label: _propTypes2.default.string
}).isRequired
};
Article.defaultProps = {
licenseBox: null,
additional: null,
competenceGoals: null,
competenceGoalsNarrow: null,
icon: null,
children: null
};
exports.default = Article;