fix: change subcategory format (#1026)

* fix: change subcategory format

* Fix sidebars

* Refactor

* Fix implementation

* Change format
This commit is contained in:
Yangshun Tay 2018-10-10 08:33:20 -07:00 committed by GitHub
parent c277f46a60
commit fe500dea82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 493 additions and 15047 deletions

View file

@ -61,44 +61,48 @@ class SideNav extends React.Component {
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)}
{category.sub_categories &&
category.sub_categories.map(this.renderSubCategory, this)}
</ul>
</div>
);
}
renderCategory = categoryItem => (
<div className="navGroup" key={categoryItem.title}>
<h3 className="navGroupCategoryTitle">
{this.getLocalizedCategoryString(categoryItem.title)}
</h3>
<ul>
{categoryItem.children.map(item => {
switch (item.type) {
case 'LINK':
return this.renderItemLink(item);
case 'SUBCATEGORY':
return this.renderSubcategory(item);
default:
return null;
}
})}
</ul>
</div>
);
renderSubCategory(subCategory) {
return (
<div className="navGroup subNavGroup" key={subCategory.name}>
<h4 className="navGroupSubCategoryTitle">
{this.getLocalizedCategoryString(subCategory.name)}
</h4>
<ul>{subCategory.links.map(this.renderItemLink, this)}</ul>
</div>
);
}
renderSubcategory = subcategoryItem => (
<div className="navGroup subNavGroup" key={subcategoryItem.title}>
<h4 className="navGroupSubcategoryTitle">
{this.getLocalizedCategoryString(subcategoryItem.title)}
</h4>
<ul>{subcategoryItem.children.map(this.renderItemLink)}</ul>
</div>
);
renderItemLink(link) {
renderItemLink = linkItem => {
const linkMetadata = linkItem.item;
const itemClasses = classNames('navListItem', {
navListItemActive: link.id === this.props.current.id,
navListItemActive: linkMetadata.id === this.props.current.id,
});
return (
<li className={itemClasses} key={link.id}>
<a className="navItem" href={this.getLink(link)}>
{this.getLocalizedString(link)}
<li className={itemClasses} key={linkMetadata.id}>
<a className="navItem" href={this.getLink(linkMetadata)}>
{this.getLocalizedString(linkMetadata)}
</a>
</li>
);
}
};
render() {
return (
@ -122,7 +126,7 @@ class SideNav extends React.Component {
)}
</div>
<div className="navGroups">
{this.props.contents.map(this.renderCategory, this)}
{this.props.contents.map(this.renderCategory)}
</div>
</section>
</div>