@wgoo/cli/site/desktop/components/Doc.jsx

Wgoo Cli 是一个 React 组件库构建工具，通过 Wgoo Cli 可以快速搭建一套功能完备的 React 组件库。

import React from 'react';
import './style.less';

import Navbar from './Navbar';
import Sidebar from './Sidebar';
import Section from './Section';
import Simulator from './Simulator';

class Doc extends React.Component {
  
  componentDidMount() {
    window.addEventListener('hashchange', this.setNav);
    this.setNav();
    this.keyboardHandler();
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.setNav);
  }

  setNav = () => {
    const { nav } = this.props.config;
    const items = nav.reduce((list, item) => list.concat(item.items), []);
    const currentPath = window.location.hash.replace(/#\//g, '/').split('/').pop();

    let currentIndex = -1;
    for (let i = 0, len = items.length; i < len; i++) {
      if (items[i].path === currentPath) {
        currentIndex = i;
        break;
      }
    }

    this.leftNav = items[currentIndex - 1];
    this.rightNav = items[currentIndex + 1];
  };

  keyboardNav = (direction) => {
    const nav = direction === 'prev' ? this.leftNav : this.rightNav;
    if (nav && nav.path) {
      window.location.hash = '#' + this.props.base + nav.path;
    }
  };

  keyboardHandler = () => {
    window.addEventListener('keyup', (event) => {
      switch (event.keyCode) {
        case 37: // left
          this.keyboardNav('prev');
          break;
        case 39: // right
          this.keyboardNav('next');
          break;
      }
    });
  };

  render() {
    const { lang, config, versions, langConfigs, hasSimulator, simulator, children } = this.props;

    return (
      <div className='wgoo-doc'>
        <Navbar lang={lang} config={config} versions={versions} langConfigs={langConfigs} />
        <Sidebar lang={lang} navConfig={config.nav} />
        <Section hasSimulator={hasSimulator}>{children}</Section>
        {hasSimulator && <Simulator src={simulator} />}
      </div>
    );
  }
}

export default Doc;