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

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

import React from 'react';
import { packageVersion } from 'site-desktop-shared';
import './style.less';

class Navbar extends React.Component {
  constructor(props) {
    super(props);

    this.$refs = {
      version: React.createRef(),
    };

    this.state = {
      packageVersion,
      showVersionPop: false,
    };
  }

  // { lang: "en-US", label: "EN" }
  get anotherLang() {
    const items = this.props.langConfigs.filter((item) => item.lang !== this.props.lang);
    if (items.length) {
      return items[0];
    }

    return {};
  }

  get langLabel() {
    return this.anotherLang.label;
  }

  get langLink() {
    return window.location.hash.replace(this.props.lang, this.anotherLang.lang);
  }

  toggleVersionPop = () => {
    const val = !this.state.showVersionPop;

    const action = val ? 'add' : 'remove';
    document.body[`${action}EventListener`]('click', this.checkHideVersionPop);

    this.setState({
      showVersionPop: val,
    });
  };

  checkHideVersionPop = (event) => {
    if (!this.$refs.version.contains(event.target)) {
      this.setState({
        showVersionPop: false,
      });
    }
  };

  onSwitchVersion = (version) => {
    if (version && version.link) {
      window.location.href = version.link;
    }
  };

  render() {
    const { config = {}, versions } = this.props;
    const { showVersionPop } = this.state;
    return (
      <div className='wgoo-doc-header'>
        <div className='wgoo-doc-row'>
          <div className='wgoo-doc-header__top'>
            <a className='wgoo-doc-header__logo'>
              <img src={config.logo} />
              <span>{config.title}</span>
            </a>

            {/*<ul className='wgoo-doc-header__top-nav'>*/}
            {/*  {config.links.map((item, index) => {*/}
            {/*    return (*/}
            {/*      <li key={index} className='wgoo-doc-header__top-nav-item'>*/}
            {/*        <a className='wgoo-doc-header__link' target='_blank' href={item.url}>*/}
            {/*          {item.logo ? <img src={item.logo} /> : item.text ? <span>{item.text}</span> : null}*/}
            {/*        </a>*/}
            {/*      </li>*/}
            {/*    );*/}
            {/*  })}*/}

            {/*  {versions && (*/}
            {/*    <li className='wgoo-doc-header__top-nav-item' ref={this.$refs.version}>*/}
            {/*      <span className='wgoo-doc-header__cube wgoo-doc-header__version' onClick={this.toggleVersionPop}>*/}
            {/*        {packageVersion}*/}
            {/*        <div className='wgoo-doc-dropdown'>*/}
            {/*          {showVersionPop && (*/}
            {/*            <div className='wgoo-doc-header__version-pop'>*/}
            {/*              {versions.map((item, index) => {*/}
            {/*                return (*/}
            {/*                  <div*/}
            {/*                    key={index}*/}
            {/*                    className='wgoo-doc-header__version-pop-item'*/}
            {/*                    onClick={() => this.onSwitchVersion(item)}*/}
            {/*                  >*/}
            {/*                    {item.label}*/}
            {/*                  </div>*/}
            {/*                );*/}
            {/*              })}*/}
            {/*            </div>*/}
            {/*          )}*/}
            {/*        </div>*/}
            {/*      </span>*/}
            {/*    </li>*/}
            {/*  )}*/}

            {/*  {this.langLabel && this.langLink && (*/}
            {/*    <li className='wgoo-doc-header__top-nav-item'>*/}
            {/*      <a className='wgoo-doc-header__cube' href={this.langLink}>*/}
            {/*        {this.langLabel}*/}
            {/*      </a>*/}
            {/*    </li>*/}
            {/*  )}*/}
            {/*</ul>*/}
          </div>
        </div>
      </div>
    );
  }
}

export default Navbar;