BasicLayout.js 6.09 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Suspense } from 'react';
jim's avatar
jim committed
2
import { Layout } from 'antd';
3
import DocumentTitle from 'react-document-title';
afc163's avatar
afc163 committed
4
import isEqual from 'lodash/isEqual';
陈帅's avatar
陈帅 committed
5
import memoizeOne from 'memoize-one';
6
import { connect } from 'dva';
afc163's avatar
afc163 committed
7 8
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
jim's avatar
jim committed
9
import pathToRegexp from 'path-to-regexp';
陈帅's avatar
陈帅 committed
10
import Media from 'react-media';
陈帅's avatar
陈帅 committed
11
import { formatMessage } from 'umi/locale';
12
import Authorized from '@/utils/Authorized';
13
import logo from '../assets/logo.svg';
jim's avatar
jim committed
14 15
import Footer from './Footer';
import Header from './Header';
16
import Context from './MenuContext';
陈帅's avatar
陈帅 committed
17
import Exception403 from '../pages/Exception/403';
陈帅's avatar
陈帅 committed
18 19 20
import PageLoading from '@/components/PageLoading';
import SiderMenu from '@/components/SiderMenu';

21 22
import styles from './BasicLayout.less';

陈帅's avatar
陈帅 committed
23 24
// lazy load SettingDrawer
const SettingDrawer = React.lazy(() => import('@/components/SettingDrawer'));
25

jim's avatar
jim committed
26
const { Content } = Layout;
ddcat1115's avatar
ddcat1115 committed
27

afc163's avatar
afc163 committed
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
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,
yoyo837's avatar
yoyo837 committed
46 47 48 49
    maxWidth: 1599,
  },
  'screen-xxl': {
    minWidth: 1600,
afc163's avatar
afc163 committed
50 51 52
  },
};

53
class BasicLayout extends React.PureComponent {
陈帅's avatar
陈帅 committed
54 55
  constructor(props) {
    super(props);
陈帅's avatar
陈帅 committed
56
    this.getPageTitle = memoizeOne(this.getPageTitle);
陈帅's avatar
陈帅 committed
57
    this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
陈帅's avatar
陈帅 committed
58
  }
59 60

  componentDidMount() {
陈小聪's avatar
陈小聪 committed
61 62 63 64
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
afc163's avatar
afc163 committed
65 66 67 68 69 70
    dispatch({
      type: 'user/fetchCurrent',
    });
    dispatch({
      type: 'setting/getSetting',
    });
陈小聪's avatar
陈小聪 committed
71 72 73 74
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });
75 76
  }

77 78 79
  componentDidUpdate(preProps) {
    // After changing to phone mode,
    // if collapsed is true, you need to click twice to display
陈帅's avatar
陈帅 committed
80
    const { collapsed, isMobile } = this.props;
81 82 83
    if (isMobile && !preProps.isMobile && !collapsed) {
      this.handleMenuCollapse(false);
    }
84 85
  }

jim's avatar
jim committed
86
  getContext() {
87
    const { location, breadcrumbNameMap } = this.props;
ddcat1115's avatar
ddcat1115 committed
88 89
    return {
      location,
90
      breadcrumbNameMap,
ddcat1115's avatar
ddcat1115 committed
91
    };
92
  }
93

94 95 96
  matchParamsPath = (pathname, breadcrumbNameMap) => {
    const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
    return breadcrumbNameMap[pathKey];
陈帅's avatar
陈帅 committed
97 98
  };

99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
  getRouterAuthority = (pathname, routeData) => {
    let routeAuthority = ['noAuthority'];
    const getAuthority = (key, routes) => {
      routes.map(route => {
        if (route.path === key) {
          routeAuthority = route.authority;
        } else if (route.routes) {
          routeAuthority = getAuthority(key, route.routes);
        }
        return route;
      });
      return routeAuthority;
    };
    return getAuthority(pathname, routeData);
  };

115 116
  getPageTitle = (pathname, breadcrumbNameMap) => {
    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
陈帅's avatar
陈帅 committed
117

陈帅's avatar
陈帅 committed
118 119
    if (!currRouterData) {
      return 'Ant Design Pro';
ddcat1115's avatar
ddcat1115 committed
120
    }
xiaoiver's avatar
xiaoiver committed
121
    const pageName = formatMessage({
陈帅's avatar
陈帅 committed
122 123 124
      id: currRouterData.locale || currRouterData.name,
      defaultMessage: currRouterData.name,
    });
125

xiaoiver's avatar
xiaoiver committed
126
    return `${pageName} - Ant Design Pro`;
陈帅's avatar
陈帅 committed
127
  };
陈帅's avatar
陈帅 committed
128

jim's avatar
jim committed
129
  getLayoutStyle = () => {
陈帅's avatar
陈帅 committed
130
    const { fixSiderbar, isMobile, collapsed, layout } = this.props;
131
    if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
jim's avatar
jim committed
132
      return {
133
        paddingLeft: collapsed ? '80px' : '256px',
jim's avatar
jim committed
134 135 136 137
      };
    }
    return null;
  };
陈帅's avatar
陈帅 committed
138

jim's avatar
jim committed
139
  handleMenuCollapse = collapsed => {
陈帅's avatar
陈帅 committed
140 141
    const { dispatch } = this.props;
    dispatch({
142 143 144
      type: 'global/changeLayoutCollapsed',
      payload: collapsed,
    });
jim's avatar
jim committed
145
  };
146

陈帅's avatar
陈帅 committed
147
  renderSettingDrawer = () => {
kennylbj's avatar
kennylbj committed
148 149
    // Do not render SettingDrawer in production
    // unless it is deployed in preview.pro.ant.design as demo
陈帅's avatar
陈帅 committed
150
    if (process.env.NODE_ENV === 'production' && APP_TYPE !== 'site') {
151 152 153
      return null;
    }
    return <SettingDrawer />;
陈帅's avatar
陈帅 committed
154
  };
155

156
  render() {
陈帅's avatar
陈帅 committed
157
    const {
afc163's avatar
afc163 committed
158
      navTheme,
陈帅's avatar
陈帅 committed
159
      layout: PropsLayout,
愚道's avatar
愚道 committed
160
      children,
陈帅's avatar
陈帅 committed
161
      location: { pathname },
陈帅's avatar
陈帅 committed
162
      isMobile,
陈小聪's avatar
陈小聪 committed
163
      menuData,
164
      breadcrumbNameMap,
165
      route: { routes },
166
      fixedHeader,
陈帅's avatar
陈帅 committed
167
    } = this.props;
168

陈帅's avatar
陈帅 committed
169
    const isTop = PropsLayout === 'topmenu';
170
    const routerConfig = this.getRouterAuthority(pathname, routes);
171
    const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
afc163's avatar
afc163 committed
172 173
    const layout = (
      <Layout>
jim's avatar
jim committed
174
        {isTop && !isMobile ? null : (
jim's avatar
jim committed
175 176
          <SiderMenu
            logo={logo}
afc163's avatar
afc163 committed
177
            theme={navTheme}
jim's avatar
jim committed
178
            onCollapse={this.handleMenuCollapse}
179
            menuData={menuData}
180
            isMobile={isMobile}
jim's avatar
jim committed
181
            {...this.props}
jim's avatar
jim committed
182 183
          />
        )}
陈帅's avatar
陈帅 committed
184 185 186 187 188 189
        <Layout
          style={{
            ...this.getLayoutStyle(),
            minHeight: '100vh',
          }}
        >
190 191 192 193
          <Header
            menuData={menuData}
            handleMenuCollapse={this.handleMenuCollapse}
            logo={logo}
194
            isMobile={isMobile}
195 196
            {...this.props}
          />
197
          <Content className={styles.content} style={contentStyle}>
198
            <Authorized authority={routerConfig} noMatch={<Exception403 />}>
陈帅's avatar
陈帅 committed
199 200 201
              {children}
            </Authorized>
          </Content>
jim's avatar
jim committed
202
          <Footer />
203
        </Layout>
afc163's avatar
afc163 committed
204 205 206
      </Layout>
    );
    return (
陈帅's avatar
陈帅 committed
207
      <React.Fragment>
208
        <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
陈帅's avatar
陈帅 committed
209 210 211 212 213 214 215 216
          <ContainerQuery query={query}>
            {params => (
              <Context.Provider value={this.getContext()}>
                <div className={classNames(params)}>{layout}</div>
              </Context.Provider>
            )}
          </ContainerQuery>
        </DocumentTitle>
陈帅's avatar
陈帅 committed
217
        <Suspense fallback={<PageLoading />}>{this.renderSettingDrawer()}</Suspense>
陈帅's avatar
陈帅 committed
218
      </React.Fragment>
219 220 221 222
    );
  }
}

陈小聪's avatar
陈小聪 committed
223
export default connect(({ global, setting, menu }) => ({
Andreas Cederström's avatar
Andreas Cederström committed
224
  collapsed: global.collapsed,
jim's avatar
jim committed
225
  layout: setting.layout,
陈小聪's avatar
陈小聪 committed
226
  menuData: menu.menuData,
227
  breadcrumbNameMap: menu.breadcrumbNameMap,
jim's avatar
jim committed
228
  ...setting,
陈帅's avatar
陈帅 committed
229 230 231 232 233
}))(props => (
  <Media query="(max-width: 599px)">
    {isMobile => <BasicLayout {...props} isMobile={isMobile} />}
  </Media>
));