site: fix header menu highlight

ant-design · Dec 5, 2016 · fc1c5e4 · fc1c5e4
1 parent def0cd2
commit fc1c5e4
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 30 deletions.
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -27,11 +27,11 @@ onClick | set the handler to handle `click` event | function | -
 `<Button>Hello world!</Button>` will be rendered into `<button>Hello world!</button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
 
 <style>
-[id^="components-button-demo-"] .ant-btn {
+[id^=components-button-demo-] .ant-btn {
   margin-right: 8px;
   margin-bottom: 12px;
 }
-[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
+[id^=components-button-demo-] .ant-btn-group > .ant-btn {
   margin-right: 0;
 }
 </style>
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
@@ -66,7 +66,7 @@ module.exports = {
     if (filePath.endsWith('/index.html')) {
       return [filePath, filePath.replace(/\/index\.html$/, '-cn/index.html')];
     }
-    if (filePath !== '/404.html') {
+    if (filePath !== '/404.html' && filePath !== '/index-cn.html') {
       return [filePath, filePath.replace(/\.html$/, '-cn.html')];
     }
     return filePath;

diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
@@ -14,6 +14,18 @@ function getActiveMenuItem(props) {
     props.location.pathname.replace(/(^\/|-cn$)/g, '');
 }
 
+function getModuleData(props) {
+  const pathname = props.location.pathname;
+  const moduleName = /^\/?components/.test(pathname) ?
+          'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
+  const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
+          moduleName === 'changelog' || moduleName === 'changelog-cn' ?
+          [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
+          props.picked[moduleName];
+  const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
+  return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
+}
+
 function fileNameToPath(filename) {
   const snippets = filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').split('/');
   return snippets[snippets.length - 1];
@@ -30,26 +42,17 @@ export default class MainContent extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { openKeys: [] };
+    this.state = { openKeys: this.getSideBarOpenKeys(props) || [] };
   }
 
   componentDidMount() {
-    this.componentWillReceiveProps(this.props);
     this.componentDidUpdate();
   }
 
   componentWillReceiveProps(nextProps) {
-    const prevModule = this.currentModule;
-    this.currentModule = location.pathname.split('/')[2] || 'components';
-    if (this.currentModule === 'react') {
-      this.currentModule = 'components';
-    }
-    if (prevModule !== this.currentModule) {
-      const moduleData = this.getModuleData(nextProps);
-      const shouldOpenKeys = Object.keys(utils.getMenuItems(
-        moduleData, this.context.intl.locale
-      ));
-      this.setState({ openKeys: shouldOpenKeys });
+    const openKeys = this.getSideBarOpenKeys(nextProps);
+    if (openKeys) {
+      this.setState({ openKeys });
     }
   }
 
@@ -75,6 +78,21 @@ export default class MainContent extends React.Component {
     this.setState({ openKeys });
   }
 
+  getSideBarOpenKeys(nextProps) {
+    const pathname = nextProps.location.pathname;
+    const prevModule = this.currentModule;
+    this.currentModule = pathname.split('/')[2] || 'components';
+    if (this.currentModule === 'react') {
+      this.currentModule = 'components';
+    }
+    const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
+    if (prevModule !== this.currentModule) {
+      const moduleData = getModuleData(nextProps);
+      const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData, locale));
+      return shouldOpenKeys;
+    }
+  }
+
   generateMenuItem(isTop, item) {
     const locale = this.context.intl.locale;
     const key = fileNameToPath(item.filename);
@@ -123,21 +141,8 @@ export default class MainContent extends React.Component {
     return [...topLevel, ...itemGroups];
   }
 
-  getModuleData(props) {
-    const pathname = props.location.pathname;
-    const moduleName = /^\/?components/.test(pathname) ?
-            'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
-    const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
-            moduleName === 'changelog' || moduleName === 'changelog-cn' ?
-            [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
-            props.picked[moduleName];
-    const locale = this.context.intl.locale;
-    const excludedSuffix = locale === 'zh-CN' ? 'en-US.md' : 'zh-CN.md';
-    return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
-  }
-
   getMenuItems() {
-    const moduleData = this.getModuleData(this.props);
+    const moduleData = getModuleData(this.props);
     const menuItems = utils.getMenuItems(
       moduleData, this.context.intl.locale
     );