add wiki outline (#2263)

frontend/src/components/wiki-outline.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+class WikiOutlineItem extends React.Component {
+
+  handleNavItemClick = () => {
+    var index = this.props.item.key;
+    this.props.handleNavItemClick(index)
+  }
+
+  render() {
+    let item = this.props.item;
+    let activeIndex = parseInt(this.props.activeIndex);
+    let levelClass  = item.depth === 3 ? " textindent-2" : '';
+    let activeClass = item.key === activeIndex ? ' wiki-outline-item-active' : '';
+    let clazz = "wiki-outline-item"+ levelClass + activeClass;
+    return (
+      <li className={clazz} data-index={item.key} onClick={this.handleNavItemClick}>
+        <a href={item.id} title={item.text}>{item.text}</a>
+      </li>
+    )
+  }
+
+}
+
+class WikiOutline extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeIndex : 0,
+      scrollTop: 0,
+    }
+  }
+
+  handleNavItemClick = (index) => {
+    if (index !== this.state.activeIndex) {
+      this.setState({
+        activeIndex : index
+      })
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let _this = this;
+    let activeId = nextProps.activeId;
+    let navItems = nextProps.navItems;
+    let length = navItems.length;
+    for (let i = 0; i < length; i++) {
+      let flag = false;
+      let item = navItems[i];
+      if (item.id === activeId && item.key !== _this.state.activeIndex) {
+        let direction = item.key > _this.state.activeIndex ? "down" : "up";
+        let currentTop = parseInt(_this.state.scrollTop);
+        let scrollTop = 0; 
+        if (item.key > 20 && direction === "down") {
+          scrollTop = currentTop - 27 + "px";
+        } else if (currentTop < 0 && direction === "up") {
+          scrollTop = currentTop + 27 + "px";
+        }
+        _this.setState({
+          activeIndex : item.key,
+          scrollTop: scrollTop
+        })
+        flag = true;
+      }
+      if (flag) {
+        break;
+      }
+    }
+  }
+  
+  render() {
+    let style = {top: this.state.scrollTop};
+    return (
+      <ul className="wiki-viewer-outline" ref="outlineContainer" style={style}>
+        {this.props.navItems.map(item => {
+          return (
+            <WikiOutlineItem 
+              key={item.key} 
+              item={item} 
+              activeIndex={this.state.activeIndex}
+              handleNavItemClick={this.handleNavItemClick}
+            />
+          )
+        })}
+      </ul>
+    )
+  }
+}
+
+export default WikiOutline;