Articles11
Tags0
Categories0

Antd Pro BasicLayout.js页面解读

antd pro BasicLayout.js页面解读:

import React from 'react';                                  
import { Layout } from 'antd';
/* 
  react-document-title
  根据不同的路由改变文档的title
*/
import DocumentTitle from 'react-document-title';
import isEqual from 'lodash/isEqual';

/* 
  memoize-one
  这个库的每个实例都缓存了一个结果
  记忆化库
  memoizeOne(resultFn, isEqual)
  接收一个结果函数和一个对比函数,对比函数为空则默认使用===来进行入参的比较。
*/
import memoizeOne from 'memoize-one';
import { connect } from 'dva';
/* 
  react-container-query 
  https://www.npmjs.com/package/react-container-query
  响应组件
  参数 
    query 响应式的断点位置
    props.children 需要是一个返回组件的函数
    context:提供全局共享的value,此处为提供者,当在别的组件使用      context.Consumer时可随意使用提供的value
    <ContainerQuery query={query}>
      {params => (
        <Context.Provider value={this.getContext()}>
          <div className={classNames(params)}>{layout}</div>
        </Context.Provider>
      )}
    </ContainerQuery>
*/
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';

/* 
        在路径字符串中使用正则
*/
import pathToRegexp from 'path-to-regexp';
import { enquireScreen, unenquireScreen } from 'enquire-js';
import { formatMessage } from 'umi/locale';
import SiderMenu from '@/components/SiderMenu';
import Authorized from '@/utils/Authorized';
import SettingDrawer from '@/components/SettingDrawer';
import logo from '../assets/logo.svg';
import Footer from './Footer';
import Header from './Header';
import Context from './MenuContext';
import Exception403 from '../pages/Exception/403';
import { red } from '_ansi-colors@3.2.4@ansi-colors';

const { Content } = Layout;

// 将路由器转换为菜单
function formatter(data, parentAuthority, parentName) {
//local由父路由和子路由的名字组成,在根据local文件夹中的不同语言文件
    //映射不同的菜单名字
  return data
    .map(item => {
      let locale = 'menu';
      if (parentName && item.name) {
        locale = `${parentName}.${item.name}`;
      } else if (item.name) {
        locale = `menu.${item.name}`;
      } else if (parentName) {
        locale = parentName;
      }
      if (item.path) {
        const result = {
          ...item,
          locale,
          authority: item.authority || parentAuthority,
        };
        //有子路由时,添加子菜单
        if (item.routes) {
          const children = formatter(item.routes, item.authority, locale);
          // Reduce memory usage
          result.children = children;
        }
        delete result.routes;
        return result;
      }

      return null;
    })
    .filter(item => item);
}

const memoizeOneFormatter = memoizeOne(formatter, isEqual);
//媒体自适应
const query = {
  'screen-xs': {
    maxWidth: 575,
  },
  'screen-sm': {
    minWidth: 576,
    maxWidth: 767,
  },
  'screen-md': {
    minWidth: 768,
    maxWidth: 991,
  },
  'screen-lg': {
    minWidth: 992,
    maxWidth: 1199,
  },
  'screen-xl': {
    minWidth: 1200,
    maxWidth: 1599,
  },
  'screen-xxl': {
    minWidth: 1600,
  },
};

class BasicLayout extends React.PureComponent {
  constructor(props) {
    super(props);
    this.getPageTitle = memoizeOne(this.getPageTitle);
    this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual);
    this.breadcrumbNameMap = this.getBreadcrumbNameMap();
    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
  }

  state = {
    rendering: true,
    //用于判断时侧栏导航还是头部导航
    isMobile: false,
    menuData: this.getMenuData(),
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
        //得到用户信息
      type: 'user/fetchCurrent',
    });
    dispatch({
        //得到设置信息
      type: 'setting/getSetting',
    });
    this.renderRef = requestAnimationFrame(() => {
      this.setState({
        rendering: false,
      });
    });
    this.enquireHandler = enquireScreen(mobile => {
      const { isMobile } = this.state;
      if (isMobile !== mobile) {
        this.setState({
          isMobile: mobile,
        });
      }
    });
  }

  componentDidUpdate(preProps) {
    // After changing to phone mode,
    // if collapsed is true, you need to click twice to display
    this.breadcrumbNameMap = this.getBreadcrumbNameMap();
    const { isMobile } = this.state;
    //折叠面板
    const { collapsed } = this.props;
    if (isMobile && !preProps.isMobile && !collapsed) {
      this.handleMenuCollapse(false);
    }
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.renderRef);
    unenquireScreen(this.enquireHandler);
  }
  //用于提供context:面包屑和当前location:path等
  getContext() {
    const { location } = this.props;
    // console.log("provide",location,this.breadcrumbNameMap)
    return {
      location,
      breadcrumbNameMap: this.breadcrumbNameMap,
    };
  }
  //对应路由映射来的菜单数据
  getMenuData() {
    const {
      route: { routes },
    } = this.props;
    //将路由映射成了菜单,locale用于国际化的菜单名
    //console.log('000',memoizeOneFormatter(routes))
    return memoizeOneFormatter(routes);
  }

  /**
   * 获取面包屑映射
   * @param {Object} menuData 菜单配置
   */
  getBreadcrumbNameMap() {
    const routerMap = {};
    const mergeMenuAndRouter = data => {
      data.forEach(menuItem => {
        if (menuItem.children) {
          mergeMenuAndRouter(menuItem.children);
        }
        // 减少内存使用量
        routerMap[menuItem.path] = menuItem;
      });
    };
    mergeMenuAndRouter(this.getMenuData());
    console.log("routerMap", routerMap)
    //产生成一个路径对应menuItem的对象
    return routerMap;
  }

  matchParamsPath = pathname => {
    const pathKey = Object.keys(this.breadcrumbNameMap).find(key => {
      pathToRegexp(key).test(pathname);

    }
    );
    console.log("pathKey", pathKey)
    //return this.breadcrumbNameMap[pathKey];
    return this.breadcrumbNameMap[pathname];
  };
  //标题
  getPageTitle = pathname => {
    const currRouterData = this.matchParamsPath(pathname);
    //const currRouterData = this.breadcrumbNameMap['/account/center']
    if (!currRouterData) {
      return 'Ant Design Pro';
    }
    const message = formatMessage({
      id: currRouterData.locale || currRouterData.name,
      defaultMessage: currRouterData.name,
    });
    return `${message} - Ant Design Pro`;
  };
  //处理侧边栏有无时主体内容的布局
  getLayoutStyle = () => {
    const { isMobile } = this.state;
    const { fixSiderbar, collapsed, layout } = this.props;
    if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
      return {
        paddingLeft: collapsed ? '80px' : '256px',
      };
    }
    return null;
  };
  //固定在头部
  getContentStyle = () => {
    const { fixedHeader } = this.props;
    return {
      margin: '24px 24px 0',
      paddingTop: fixedHeader ? 64 : 0,

    };
  };
  //处理侧边栏的展开和收起
  handleMenuCollapse = collapsed => {
    const { dispatch } = this.props;
    dispatch({
      type: 'global/changeLayoutCollapsed',
      payload: collapsed,
    });
  };

  renderSettingDrawer() {
    // Do not render SettingDrawer in production
    // unless it is deployed in preview.pro.ant.design as demo
    const { rendering } = this.state;
    if ((rendering || process.env.NODE_ENV === 'production') && APP_TYPE !== 'site') {
      return null;
    }
    return <SettingDrawer />;
  }

  render() {
    console.log("this.props", this.props)
    const {
      navTheme,
      layout: PropsLayout,
      children,
      location: { pathname },
    } = this.props;
    const { isMobile, menuData } = this.state;
    const isTop = PropsLayout === 'topmenu';
    const routerConfig = this.matchParamsPath(pathname);
    const layout = (
      <Layout>
        {isTop && !isMobile ? null : (
          <SiderMenu
            logo={logo}
            Authorized={Authorized}
            theme={navTheme}
            onCollapse={this.handleMenuCollapse}
            menuData={menuData}
            isMobile={isMobile}
            {...this.props}
          />
        )}
        <Layout
          style={{
            ...this.getLayoutStyle(),
            minHeight: '100vh',
          }}
        >
          <Header
            menuData={menuData}
            handleMenuCollapse={this.handleMenuCollapse}
            logo={logo}
            isMobile={isMobile}
            {...this.props}
          />
          <Content style={this.getContentStyle()}>
            <Authorized
              authority={routerConfig && routerConfig.authority}
              noMatch={<Exception403 />}
            >
              {children}
            </Authorized>
          </Content>
          <Footer />
        </Layout>
      </Layout>
    );
    return (
      //React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。
      <React.Fragment>
        <DocumentTitle title={this.getPageTitle(pathname)}>
          <ContainerQuery query={query}>
            {params => (
              <Context.Provider value={this.getContext()}>
                <div className={classNames(params)}>{layout}</div>
              </Context.Provider>
            )}
          </ContainerQuery>
        </DocumentTitle>
        {this.renderSettingDrawer()}
      </React.Fragment>
    );
  }
}

export default connect(({ global, setting }) => ({
  collapsed: global.collapsed,
  layout: setting.layout,
  ...setting,
}))(BasicLayout);
Author:shuo
Link:http://yoursite.com/2019/08/28/antd pro BasicLayout.js页面解读:/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可