static.console-fe.src.layouts.MainLayout.js Maven / Gradle / Ivy

Go to download
/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 *
 * 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 { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { ConfigProvider, Icon, Menu } from '@alifd/next';
import Header from './Header';
import { getState } from '../reducers/base';
import getMenuData from './menu';

const { SubMenu, Item } = Menu;

@withRouter
@connect(state => ({ ...state.locale, ...state.base }), { getState })
@ConfigProvider.config
class MainLayout extends React.Component {
  static displayName = 'MainLayout';

  static propTypes = {
    locale: PropTypes.object,
    location: PropTypes.object,
    history: PropTypes.object,
    version: PropTypes.any,
    getState: PropTypes.func,
    functionMode: PropTypes.string,
    children: PropTypes.object,
  };

  componentDidMount() {
    this.props.getState();
  }

  goBack() {
    this.props.history.goBack();
  }

  navTo(url) {
    const { search } = this.props.location;
    this.props.history.push([url, search].join(''));
  }

  isCurrentPath(url) {
    const { location } = this.props;
    return url === location.pathname ? 'current-path' : undefined;
  }

  defaultOpenKeys() {
    const MenuData = getMenuData(this.props.functionMode);
    for (let i = 0, len = MenuData.length; i < len; i++) {
      const { children } = MenuData[i];
      if (children && children.filter(({ url }) => url === this.props.location.pathname).length) {
        return String(i);
      }
    }
  }

  isShowGoBack() {
    const urls = [];
    const MenuData = getMenuData(this.props.functionMode);
    MenuData.forEach(item => {
      if (item.url) urls.push(item.url);
      if (item.children) item.children.forEach(({ url }) => urls.push(url));
    });
    return !urls.includes(this.props.location.pathname);
  }

  render() {
    const { locale = {}, version, functionMode } = this.props;
    const MenuData = getMenuData(functionMode);
    return (
      <>
        
        
          
            {this.isShowGoBack() ? (
               this.goBack()}>
                
              
            ) : (
              <>
                
                  {locale.nacosName}
                  {version}
                
                
                  {MenuData.map((subMenu, idx) => {
                    if (subMenu.children) {
                      return (
                        
                          {subMenu.children.map((item, i) => (
                             this.navTo(item.url)}
                              className={this.isCurrentPath(item.url)}
                            >
                              {locale[item.key]}
                            
                          ))}
                        
                      );
                    }
                    return (
                       c)
                          .join(' ')}
                        onClick={() => this.navTo(subMenu.url)}
                      >
                        {locale[subMenu.key]}
                      
                    );
                  })}
                
              
            )}
          
          {this.props.children}
        
      
    );
  }
}

export default MainLayout;