docusaurus/lib/core/nav/SideNav.js
Yangshun Tay e8e3f42685
ESLintify Part 1 (#837)
* ESLint-ify

* Allow empty try/catch

* Escape regexp
2018-07-08 09:13:18 -07:00

150 lines
4.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const classNames = require('classnames');
const siteConfig = require(process.cwd() + '/siteConfig.js');
const translation = require('../../server/translation.js');
const utils = require('../utils.js');
class SideNav extends React.Component {
// return appropriately translated category string
getLocalizedCategoryString(category) {
let categoryString = translation[this.props.language]
? translation[this.props.language]['localized-strings'][category] ||
category
: category;
return categoryString;
}
// return appropriately translated label to use for doc/blog in sidebar
getLocalizedString(metadata) {
let localizedString;
const i18n = translation[this.props.language];
const sbTitle = metadata.sidebar_label;
if (sbTitle) {
localizedString = i18n
? i18n['localized-strings'][sbTitle] || sbTitle
: sbTitle;
} else {
const id = metadata.original_id || metadata.localized_id;
localizedString = i18n
? i18n['localized-strings'][id] || metadata.title
: metadata.title;
}
return localizedString;
}
// return link to doc in sidebar
getLink(metadata) {
if (metadata.permalink) {
const targetLink = utils.getPath(metadata.permalink, siteConfig.cleanUrl);
if (targetLink.match(/^https?:/)) {
return targetLink;
}
return siteConfig.baseUrl + targetLink;
}
if (metadata.path) {
return (
siteConfig.baseUrl +
'blog/' +
utils.getPath(metadata.path, siteConfig.cleanUrl)
);
}
return null;
}
renderCategory(category) {
return (
<div className="navGroup" key={category.name}>
<h3 className="navGroupCategoryTitle">
{this.getLocalizedCategoryString(category.name)}
</h3>
<ul>{category.links.map(this.renderItemLink, this)}</ul>
</div>
);
}
renderItemLink(link) {
const itemClasses = classNames('navListItem', {
navListItemActive: link.id === this.props.current.id,
});
return (
<li className={itemClasses} key={link.id}>
<a className="navItem" href={this.getLink(link)}>
{this.getLocalizedString(link)}
</a>
</li>
);
}
render() {
return (
<nav className="toc">
<div className="toggleNav">
<section className="navWrapper wrapper">
<div className="navBreadcrumb wrapper">
<div className="navToggle" id="navToggler">
<i />
</div>
<h2>
<i></i>
<span>
{this.getLocalizedCategoryString(this.props.current.category)}
</span>
</h2>
{siteConfig.onPageNav === 'separate' && (
<div className="tocToggler" id="tocToggler">
<i className="icon-toc" />
</div>
)}
</div>
<div className="navGroups">
{this.props.contents.map(this.renderCategory, this)}
</div>
</section>
</div>
<script
dangerouslySetInnerHTML={{
__html: `
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
`,
}}
/>
</nav>
);
}
}
SideNav.defaultProps = {
contents: [],
};
module.exports = SideNav;