feat: add footer nav

site/component/ReactComponents/index.jsx

@@ -44,19 +44,13 @@ export default class ReactComponents extends React.Component {
   }
 
   render() {
-    const routes = this.props.routes;
-    const activeMenuItem = routes[routes.length - 1].path || 'introduce';
-
+    const activeMenuItem = utils.getActiveMenuItem(this.props, 'introduce');
     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];
+    const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem);
 
     return (
       <Row className="main-wrapper">

site/component/Resource/index.jsx

@@ -1,35 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
+import * as utils from '../utils';
 
 export default class Resource extends React.Component {
+  getMenuItems() {
+    return [
+      <Menu.Item key="download">
+        <Link to="/resource/download">
+          资源下载
+        </Link>
+      </Menu.Item>,
+      <Menu.Item key="reference">
+        <Link to="/resource/reference">
+          文献素材
+        </Link>
+      </Menu.Item>,
+      <Menu.Item key="github">
+        <a href="https://github.com/ant-design/ant-design" target="_blank">
+          GitHub
+        </a>
+      </Menu.Item>,
+    ];
+  }
+
   render() {
-    const routes = this.props.routes;
-    const activeMenuItem = routes[routes.length - 1].path || 'download';
+    const activeMenuItem = utils.getActiveMenuItem(this.props, 'download');
+    const menuItems = this.getMenuItems();
+    const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem);
 
     return (
       <Row className="main-wrapper">
         <Col span="4">
           <Menu mode="inline" selectedKeys={[activeMenuItem]}>
-            <Menu.Item key="download">
-              <Link to="/resource/download">
-                资源下载
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="reference">
-              <Link to="/resource/reference">
-                文献素材
-              </Link>
-            </Menu.Item>
-            <Menu.Item>
-              <a href="https://github.com/ant-design/ant-design" target="_blank">
-                GitHub
-              </a>
-            </Menu.Item>
+            { menuItems }
           </Menu>
         </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/Spec/index.jsx

@@ -1,62 +1,78 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
+import * as utils from '../utils';
 const SubMenu = Menu.SubMenu;
 
 export default class Spec extends React.Component {
+  getMenuItems() {
+    return [
+      <Menu.Item key="introduce">
+        <Link to="/spec/introduce">
+          Ant Design
+        </Link>
+      </Menu.Item>,
+      <SubMenu key="basic" title={<h4>基础</h4>}>
+        <Menu.Item key="font">
+          <Link to="/spec/font">
+            字体
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="typography">
+          <Link to="/spec/typography">
+            排版
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="colors">
+          <Link to="/spec/color">
+            色彩
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="layout">
+          <Link to="/spec/layout">
+            常用布局
+          </Link>
+        </Menu.Item>
+      </SubMenu>,
+      <SubMenu key="animation" title={<h4>动画</h4>}>
+        <Menu.Item key="easing">
+          <Link to="/spec/easing">
+            自然运动
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="page-transition">
+          <Link to="/spec/page-transition">
+            互动转换
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="motion">
+          <Link to="/spec/motion">
+            组件动画
+          </Link>
+        </Menu.Item>
+      </SubMenu>,
+    ];
+  }
+
   render() {
-    const routes = this.props.routes;
-    const activeMenuItem = routes[routes.length - 1].path || 'introduce';
+    const activeMenuItem = utils.getActiveMenuItem(this.props, 'introduce');
+    const menuItems = this.getMenuItems();
+    const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem);
 
     return (
       <Row className="main-wrapper">
         <Col span="4">
           <Menu mode="inline" defaultOpenKeys={['basic', 'animation']}
             selectedKeys={[activeMenuItem]}>
-            <Menu.Item key="introduce">
-              <Link to="/spec/introduce">
-                Ant Design
-              </Link>
-            </Menu.Item>
-            <SubMenu key="basic" title={<h4>基础</h4>}>
-              <Menu.Item key="font">
-                <Link to="/spec/font">
-                  字体
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="typography">
-                <Link to="/spec/typography">
-                  排版
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="colors">
-                色彩
-              </Menu.Item>
-              <Menu.Item key="layout">
-                常用布局
-              </Menu.Item>
-            </SubMenu>
-            <SubMenu key="animation" title={<h4>动画</h4>}>
-              <Menu.Item key="easing">
-                <Link to="/spec/easing">
-                  自然运动
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="page-transition">
-                <Link to="/spec/page-transition">
-                  互动转换
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="motion">
-                <Link to="/spec/motion">
-                  组件动画
-                </Link>
-              </Menu.Item>
-            </SubMenu>
+            { menuItems }
           </Menu>
         </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

@@ -68,3 +68,18 @@ export function flattenMenu(menu) {
 
   return flattenMenu(menu.props.children);
 }
+
+export function getActiveMenuItem(props, index) {
+  const routes = props.routes;
+  return routes[routes.length - 1].path || index;
+}
+
+export function getFooterNav(menuItems, activeMenuItem) {
+  const menuItemsList = flattenMenu(menuItems);
+  const activeMenuItemIndex = menuItemsList.findIndex((menuItem) => {
+    return menuItem.key === activeMenuItem;
+  });
+  const prev = menuItemsList[activeMenuItemIndex - 1];
+  const next = menuItemsList[activeMenuItemIndex + 1];
+  return { prev, next };
+}