Fix changelog page active menu

site/theme/template/Content/MainContent.jsx

@@ -25,7 +25,7 @@ export default class MainContent extends React.Component {
   }
 
   getActiveMenuItem(props) {
-    return props.params.children;
+    return props.params.children || props.location.pathname;
   }
 
   fileNameToPath(filename) {
@@ -64,21 +64,18 @@ export default class MainContent extends React.Component {
   generateSubMenuItems(obj) {
     const topLevel = (obj.topLevel || []).map(this.generateMenuItem.bind(this, true));
     const itemGroups = Object.keys(obj).filter(this.isNotTopLevel)
-            .sort((a, b) => {
-              return config.typeOrder[a] - config.typeOrder[b];
-            })
-            .map((type, index) => {
-              const groupItems = obj[type].sort((a, b) => {
-                return (a.title || a.english).charCodeAt(0) -
-                  (b.title || b.english).charCodeAt(0);
-              }).map(this.generateMenuItem.bind(this, false));
-
-              return (
-                <Menu.ItemGroup title={type} key={index}>
-                  {groupItems}
-                </Menu.ItemGroup>
-              );
-            });
+      .sort((a, b) => config.typeOrder[a] - config.typeOrder[b])
+      .map((type, index) => {
+        const groupItems = obj[type].sort((a, b) => {
+          return (a.title || a.english).charCodeAt(0) -
+          (b.title || b.english).charCodeAt(0);
+        }).map(this.generateMenuItem.bind(this, false));
+        return (
+          <Menu.ItemGroup title={type} key={index}>
+            {groupItems}
+          </Menu.ItemGroup>
+        );
+      });
     return [...topLevel, ...itemGroups];
   }
 
@@ -87,19 +84,15 @@ export default class MainContent extends React.Component {
     const menuItems = utils.getMenuItems(moduleData, this.context.intl.locale);
     const topLevel = this.generateSubMenuItems(menuItems.topLevel);
     const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
-            .sort((a, b) => {
-              return config.categoryOrder[a] - config.categoryOrder[b];
-            })
-            .map((category) => {
-              const subMenuItems = this.generateSubMenuItems(menuItems[category]);
-
-              return (
-                <SubMenu title={<h4>{category}</h4>} key={category}>
-                  {subMenuItems}
-                </SubMenu>
-              );
-            });
-
+      .sort((a, b) => config.categoryOrder[a] - config.categoryOrder[b])
+      .map((category) => {
+        const subMenuItems = this.generateSubMenuItems(menuItems[category]);
+        return (
+          <SubMenu title={<h4>{category}</h4>} key={category}>
+            {subMenuItems}
+          </SubMenu>
+        );
+      });
     return [...topLevel, ...subMenu];
   }
 

site/theme/template/Layout/Header.jsx

@@ -87,20 +87,21 @@ export default class Header extends React.Component {
     const { routes, components } = this.props;
     const route = routes[0].path.replace(/^\//, '');
     let activeMenuItem = route.slice(0, route.indexOf(':') - 1) || 'home';
-    activeMenuItem = activeMenuItem === 'components' ? 'docs/react' : activeMenuItem;
+    if (activeMenuItem === 'components' || route === 'changelog') {
+      activeMenuItem = 'docs/react';
+    }
 
     const options = components
-            .map(({ meta }) => {
-              const pathSnippet = meta.filename.split('/')[1];
-              const url = `/components/${pathSnippet}`;
-
-              return (
-                <Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
-                  <strong>{meta.title || meta.english}</strong>
-                  <span className="ant-component-decs">{meta.subtitle || meta.chinese}</span>
-                </Option>
-              );
-            });
+      .map(({ meta }) => {
+        const pathSnippet = meta.filename.split('/')[1];
+        const url = `/components/${pathSnippet}`;
+        return (
+          <Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
+            <strong>{meta.title || meta.english}</strong>
+            <span className="ant-component-decs">{meta.subtitle || meta.chinese}</span>
+          </Option>
+        );
+      });
 
     const menuStyle = {
       display: this.state.menuVisible ? 'block' : '',

site/theme/template/utils.jsx

@@ -3,14 +3,14 @@ export function collectDocs(docs) {
   const locale = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US') ?
         'zh-CN' : 'en-US';
   const docsList = Object.keys(docs)
-          .map((key) => docs[key])
-          .map((value) => {
-            if (typeof value !== 'function') {
-              return value[locale] || value.index[locale] || value.index;
-            }
-            return value;
-          })
-          .map((fn) => fn());
+    .map(key => docs[key])
+    .map((value) => {
+      if (typeof value !== 'function') {
+        return value[locale] || value.index[locale] || value.index;
+      }
+      return value;
+    })
+    .map(fn => fn());
   return docsList;
 }