ndla-ui
Version:
UI component library for NDLA.
292 lines (257 loc) • 12.7 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 _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 _common = require('ndla-icons/common');
var _ndlaI18n = require('ndla-i18n');
var _ndlaUi = require('ndla-ui');
var _shapes = require('../shapes');
var _Search = require('../Search');
var _TopicMenu = require('./TopicMenu');
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; }
var SubtopicLink = function SubtopicLink(_ref) {
var classes = _ref.classes,
to = _ref.to,
_ref$subtopic = _ref.subtopic,
id = _ref$subtopic.id,
name = _ref$subtopic.name,
additional = _ref$subtopic.additional,
onSubtopicExpand = _ref.onSubtopicExpand,
expandedSubtopicId = _ref.expandedSubtopicId,
subtopicId = _ref.subtopicId,
additionalTooltipLabel = _ref.additionalTooltipLabel;
var active = id === expandedSubtopicId;
return _react2.default.createElement(
'li',
_extends({}, classes('subtopic-item', active && 'active'), { key: id }),
_react2.default.createElement(
_ndlaUi.SafeLink,
_extends({}, classes('link'), {
onClick: function onClick(event) {
event.preventDefault();
onSubtopicExpand(subtopicId);
},
to: to }),
_react2.default.createElement(
'span',
null,
name,
(0, _TopicMenu.renderAdditionalIcon)(additional, additionalTooltipLabel)
),
_react2.default.createElement(_common.ChevronRight, null)
)
);
};
SubtopicLink.propTypes = {
classes: _propTypes2.default.func.isRequired,
subtopic: _shapes.TopicShape.isRequired,
to: _propTypes2.default.string.isRequired,
onSubtopicExpand: _propTypes2.default.func,
expandedSubtopicId: _propTypes2.default.string,
toTopic: _propTypes2.default.func,
subtopicId: _propTypes2.default.string,
additionalTooltipLabel: _propTypes2.default.string
};
var SubtopicLinkList = function (_Component) {
_inherits(SubtopicLinkList, _Component);
function SubtopicLinkList(props) {
_classCallCheck(this, SubtopicLinkList);
var _this = _possibleConstructorReturn(this, (SubtopicLinkList.__proto__ || Object.getPrototypeOf(SubtopicLinkList)).call(this, props));
_this.state = {
showAdditionalResources: false
};
_this.toggleAdditionalResources = _this.toggleAdditionalResources.bind(_this);
_this.containerRef = null;
return _this;
}
_createClass(SubtopicLinkList, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.setFocusOnFirstLink();
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (this.props.topic.id !== prevProps.topic.id) {
this.setFocusOnFirstLink();
}
}
}, {
key: 'setFocusOnFirstLink',
value: function setFocusOnFirstLink() {
this.containerRef.querySelector('a').focus();
}
}, {
key: 'toggleAdditionalResources',
value: function toggleAdditionalResources() {
this.setState(function (prevState) {
return {
showAdditionalResources: !prevState.showAdditionalResources
};
});
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
className = _props.className,
classes = _props.classes,
closeMenu = _props.closeMenu,
topic = _props.topic,
toTopic = _props.toTopic,
expandedSubtopicId = _props.expandedSubtopicId,
onSubtopicExpand = _props.onSubtopicExpand,
onGoBack = _props.onGoBack,
backLabel = _props.backLabel,
resourceToLinkProps = _props.resourceToLinkProps,
competenceButton = _props.competenceButton,
defaultCount = _props.defaultCount,
t = _props.t;
var showAdditionalResources = this.state.showAdditionalResources;
var hasSubTopics = topic.subtopics && topic.subtopics.length > 0;
var hasContentTypeResults = topic.contentTypeResults && topic.contentTypeResults.length > 0;
var hasContentTypeInfo = hasContentTypeResults && topic.contentTypeResults.some(function (result) {
return result.contentType;
});
var someResourcesAreAdditional = hasContentTypeResults && topic.contentTypeResults.some(function (result) {
return result.resources.some(function (resource) {
return resource.additional;
});
});
return _react2.default.createElement(
'div',
{
className: className,
ref: function ref(_ref2) {
_this2.containerRef = _ref2;
} },
_react2.default.createElement(
'button',
_extends({ type: 'button' }, classes('back-button'), { onClick: onGoBack }),
_react2.default.createElement(_common.Back, null),
' ',
_react2.default.createElement(
'span',
null,
backLabel
)
),
_react2.default.createElement(
_ndlaUi.SafeLink,
_extends({}, classes('link', ['big']), {
onClick: closeMenu,
to: toTopic(topic.id) }),
_react2.default.createElement(
'span',
classes('link-label'),
t('masthead.menu.goTo'),
': '
),
_react2.default.createElement(
'span',
classes('link-target'),
topic.name,
' ',
_react2.default.createElement(
'span',
classes('arrow'),
'\u203A'
)
),
_react2.default.createElement(_common.ChevronRight, null)
),
hasSubTopics && _react2.default.createElement(
'ul',
classes('list'),
topic.subtopics.map(function (subtopic) {
return _react2.default.createElement(SubtopicLink, {
onSubtopicExpand: onSubtopicExpand,
expandedSubtopicId: expandedSubtopicId,
classes: classes,
key: subtopic.id,
to: toTopic(topic.id, subtopic.id),
subtopicId: subtopic.id,
subtopic: subtopic,
additionalTooltipLabel: t('resource.additionalTooltip')
});
})
),
hasContentTypeResults && _react2.default.createElement(
'aside',
classes('content-type-results', [hasContentTypeInfo ? 'with-content-badges' : '', this.state.showAdditionalResources ? 'show-all' : '']),
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h1',
null,
t('masthead.menu.learningResourcesHeading')
),
someResourcesAreAdditional && _react2.default.createElement(_Search.SearchToggleFilter, {
wide: true,
checked: showAdditionalResources,
label: t('masthead.menu.additionalFilterLabel'),
onClick: this.toggleAdditionalResources
})
),
topic.contentTypeResults.map(function (result) {
return _react2.default.createElement(_Search.ContentTypeResult, {
resourceToLinkProps: resourceToLinkProps,
onNavigate: closeMenu,
key: result.title,
contentTypeResult: result,
messages: {
allResultLabel: t('masthead.menu.contentTypeResultsShowMore.' + result.contentType),
showLessResultLabel: t('masthead.menu.contentTypeResultsShowLess.' + result.contentType),
noHit: t('masthead.menu.contentTypeResultsNoHit.' + result.contentType)
},
defaultCount: defaultCount,
iconOnRight: true,
showAdditionalResources: showAdditionalResources
});
}),
someResourcesAreAdditional && _react2.default.createElement(_Search.SearchToggleFilter, {
narrow: true,
checked: showAdditionalResources,
label: t('masthead.menu.additionalFilterLabel'),
onClick: this.toggleAdditionalResources
})
),
competenceButton
);
}
}]);
return SubtopicLinkList;
}(_react.Component);
SubtopicLinkList.propTypes = {
resourceToLinkProps: _propTypes2.default.func.isRequired,
expandedSubtopicId: _propTypes2.default.string,
onSubtopicExpand: _propTypes2.default.func,
classes: _propTypes2.default.func.isRequired,
className: _propTypes2.default.string,
closeMenu: _propTypes2.default.func.isRequired,
topic: _shapes.TopicShape.isRequired,
toTopic: _propTypes2.default.func.isRequired,
onGoBack: _propTypes2.default.func.isRequired,
backLabel: _propTypes2.default.string.isRequired,
competenceButton: _propTypes2.default.node,
defaultCount: _propTypes2.default.number,
t: _propTypes2.default.func.isRequired
};
exports.default = (0, _ndlaI18n.injectT)(SubtopicLinkList);