taihu/app/components/Navigator/index.tsx

/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

import React from 'react'
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
import { Link, useLocation } from 'react-router-dom'
import classnames from 'classnames'
import DownloadList from '../DownloadList'

import { loadDownloadList, downloadFile } from 'containers/App/actions'
import {
  makeSelectLoginUser,
  makeSelectDownloadList,
  makeSelectDownloadListLoading
} from 'containers/App/selectors'

import { Dropdown, Menu, Icon } from 'antd'
import { IDownloadRecord } from 'app/containers/App/types'

const styles = require('./Navigator.less')

const goGithub = () => window.open('https://github.com/edp963/davinci')
const goDoc = () => window.open('https://edp963.github.io/davinci/')

interface INavigatorProps {
  show: boolean
  loginUser: object
  downloadList: IDownloadRecord[]
  onLogout: () => void
  onLoadDownloadList: () => void
  onDownloadFile: (id) => void
}

export function Navigator(props: INavigatorProps) {
  const { show, downloadList, onLogout, onLoadDownloadList, onDownloadFile } =
    props
  const headerClass = classnames({
    [styles.header]: true,
    [styles.hide]: !show
  })
  const menu = (
    <Menu>
      {/*<Menu.Item key='0'>*/}
      {/*  <Link to='/account'>*/}
      {/*    用户设置*/}
      {/*  </Link>*/}
      {/*</Menu.Item>*/}
      <Menu.Divider />
      <Menu.Item key='3'>
        <a href='javascript:;' onClick={onLogout}>
          退出登录
        </a>
      </Menu.Item>
    </Menu>
  )

  const location = useLocation()
  const { pathname } = location

  const menus = []

  return (
    <nav className={headerClass}>
      <div className={styles.logoPc}>
        <div className={styles.logo}>
          <Link to='/project/1/dataManager'>
            <img src={require('assets/images/logo_white.svg')} />
          </Link>
        </div>
        <ul className={styles.menus}>
          {[
            {
              link: '/project/1/dataManager',
              name: '数据管理'
            },
            {
              link: '/project/1/dataShareService',
              name: '数据开放服务'
            },
            {
              link: '/project/1/dataGovernance',
              name: '数据治理'
            }
          ].map((r) => (
            <li key={r.name} className={pathname.includes(r.link) ? styles.active : null}>
              <Link to={r.link}>{r.name}</Link>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.logoMobile}>
        <div className={styles.logo}>
          <Link to='/projects'>
            <img src={require('assets/images/logo_white.svg')} />
          </Link>
        </div>
      </div>

      <ul className={styles.tools}>
        <li>
          <Dropdown overlay={menu} trigger={['click']} placement='bottomCenter'>
            <Icon type='user' />
          </Dropdown>
        </li>
      </ul>
    </nav>
  )
}

const mapStateToProps = createStructuredSelector({
  loginUser: makeSelectLoginUser(),
  downloadList: makeSelectDownloadList()
})

function mapDispatchToProps(dispatch) {
  return {
    onLoadDownloadList: () => dispatch(loadDownloadList()),
    onDownloadFile: (id) => dispatch(downloadFile(id))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Navigator)