feat: support footer navigation

site/common/lib.js

@@ -7,3 +7,4 @@ import './styles/font.less';
 import './styles/resource.less';
 import './styles/clearfix.less';
 import './styles/demo.less';
+import './styles/page-nav.less';

site/common/styles/page-nav.less

@@ -0,0 +1,37 @@
+.prev-next-nav {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  font-size: 16px;
+  border-top: 1px solid #e9e9e9;
+}
+
+.prev-next-nav > .prev-page,
+.prev-next-nav > .next-page {
+  padding: 0 24px;
+  width: 50%;
+  float: left;
+  line-height: 72px;
+  height: 72px;
+}
+
+.prev-next-nav > a.prev-page:before {
+  font-family: 'anticon';
+  content: '\e601';
+  font-size: 12px;
+  margin-right: 1em;
+}
+
+.prev-next-nav > .next-page {
+  text-align: right;
+  float: right;
+}
+
+.prev-next-nav > a.next-page:after {
+  font-family: 'anticon';
+  content: '\e600';
+  font-size: 12px;
+  margin-left: 1em;
+}

site/component/ComponentDoc/index.jsx

@@ -19,7 +19,7 @@ export default class ComponentDoc extends React.Component {
     });
 
     return (
-      <div>
+      <article>
         <section className="markdown">
           <h1>{doc.meta.title}</h1>
           { doc.description.map(utils.objectToComponent) }
@@ -32,7 +32,7 @@ export default class ComponentDoc extends React.Component {
         <section className="markdown">
           { doc.api.map(utils.objectToComponent) }
         </section>
-      </div>
+      </article>
     );
   }
 }

site/component/ReactComponents/index.jsx

@@ -1,48 +1,70 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
+import * as utils from '../utils';
 import componentsList from '../../../_site/data/components-list';
 
-export default class ReactComponents extends React.Component {
-  render() {
-    const componentMenuItems = [];
-    ['基本', '表单', '展示', '导航', '其它'].forEach((category) => {
-      const grandChildren = componentsList[category].map((item) => {
-        const key = item.english.toLowerCase();
-        return (
-          <Menu.Item key={key}>
-            <Link to={`/components/${key}`}>{item.title}</Link>
-          </Menu.Item>
-        );
-      });
+const componentMenuItems = [];
+['基本', '表单', '展示', '导航', '其它'].forEach((category) => {
+  const grandChildren = componentsList[category].map((item) => {
+    const key = item.english.toLowerCase();
+    return (
+      <Menu.Item key={key}>
+        <Link to={`/components/${key}`}>{item.title}</Link>
+      </Menu.Item>
+    );
+  });
 
-      componentMenuItems.push(
-        <Menu.ItemGroup title={category} key={category} mode="vertical">
-          { grandChildren }
-        </Menu.ItemGroup>
-      );
+  componentMenuItems.push(
+    <Menu.ItemGroup title={category} key={category} mode="vertical">
+      { grandChildren }
+    </Menu.ItemGroup>
+  );
+});
+
+export default class ReactComponents extends React.Component {
+  getTopLevelMenuItems() {
+    return [
+      <Menu.Item key="introduce">
+        <Link to="/components/introduce">Ant Design of React</Link>
+      </Menu.Item>,
+      <Menu.Item key="getting-started">
+        <Link to="/components/getting-started">快速上手</Link>
+      </Menu.Item>,
+      <Menu.Item key="install">
+        <Link to="/components/install">安装</Link>
+      </Menu.Item>,
+      <Menu.Item key="upgrade-notes">
+        <Link to="/components/upgrade-notes">升级指南</Link>
+      </Menu.Item>,
+      <Menu.Item key="changelog">
+        <Link to="/components/changelog">更新日志</Link>
+      </Menu.Item>,
+    ];
+  }
+
+  render() {
+    const routes = this.props.routes;
+    const activeMenuItem = routes[routes.length - 1].path;
+
+    const topLevelMenuItems = this.getTopLevelMenuItems();
+    const menuItems = topLevelMenuItems.concat(
+      utils.flattenMenu(componentMenuItems)
+    );
+
+    const activeMenuItemIndex = menuItems.findIndex((menuItem) => {
+      return menuItem.key === activeMenuItem;
     });
+    const prev = menuItems[activeMenuItemIndex - 1];
+    const next = menuItems[activeMenuItemIndex + 1];
 
     return (
       <Row className="main-wrapper">
         <Col span="4">
           <Menu className="sidebar" mode="inline"
-            defaultOpenKeys={['components']}>
-            <Menu.Item key="introduce">
-              <Link to="/components/introduce">Ant Design of React</Link>
-            </Menu.Item>
-            <Menu.Item key="getting-started">
-              <Link to="/components/getting-started">快速上手</Link>
-            </Menu.Item>
-            <Menu.Item key="install">
-              <Link to="/components/install">安装</Link>
-            </Menu.Item>
-            <Menu.Item key="upgrade-notes">
-              <Link to="/components/upgrade-notes">升级指南</Link>
-            </Menu.Item>
-            <Menu.Item key="changelog">
-              <Link to="/components/changelog">更新日志</Link>
-            </Menu.Item>
+            defaultOpenKeys={['components']}
+            selectedKeys={[activeMenuItem]}>
+            { topLevelMenuItems }
             <Menu.SubMenu title="Components" key="components">
               { componentMenuItems }
             </Menu.SubMenu>
@@ -50,6 +72,10 @@ export default class ReactComponents extends React.Component {
         </Col>
         <Col span="20" className="main-container">
           { this.props.children }
+          <section className="prev-next-nav">
+            { !!prev ? React.cloneElement(prev.props.children, { className: 'prev-page' }) : null }
+            { !!next ? React.cloneElement(next.props.children, { className: 'next-page' }) : null }
+          </section>
         </Col>
       </Row>
     );

site/component/utils.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import hljs from 'highlight.js';
+import { Menu } from '../../';
 
 export function objectToComponent(object, index) {
   if (object === null) return;
@@ -36,3 +37,17 @@ export function objectToComponent(object, index) {
     children && children.map(objectToComponent) // `hr` has no children
   );
 }
+
+export function flattenMenu(menu) {
+  if (menu.type === Menu.Item) {
+    return menu;
+  }
+
+  if (Array.isArray(menu)) {
+    return menu.reduce((acc, item) => {
+      return acc.concat(flattenMenu(item));
+    }, []);
+  }
+
+  return flattenMenu(menu.props.children);
+}