BasicLayout.tsx 2 KB
Newer Older
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
1
import { ConnectState, ConnectProps } from '@/models/connect';
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
2
import RightContent from '@/components/GlobalHeader/RightContent';
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
3
import { formatMessage } from 'umi-plugin-react/locale';
4
import { connect } from 'dva';
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
5
import React, { useState } from 'react';
6 7
import logo from '../assets/logo.svg';

ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
8 9 10 11 12
import {
  BasicLayout as BasicLayoutComponents,
  BasicLayoutProps as BasicLayoutComponentsProps,
  MenuDataItem,
  Settings,
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
13
  SettingDrawer,
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
14
} from '@ant-design/pro-layout';
15

ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
16
export interface BasicLayoutProps extends BasicLayoutComponentsProps, ConnectProps {
何乐's avatar
何乐 committed
17
  breadcrumbNameMap: { [path: string]: MenuDataItem };
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
18
  settings: Settings;
19 20
}

21
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
何乐's avatar
何乐 committed
22
  breadcrumbNameMap: { [path: string]: MenuDataItem };
23
};
24

何乐's avatar
何乐 committed
25
const BasicLayout: React.FC<BasicLayoutProps> = props => {
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
26
  const { dispatch, children, route, settings } = props;
27
  const { routes, authority } = route!;
何乐's avatar
何乐 committed
28 29 30
  /**
   * constructor
   */
31
  useState(() => {
何乐's avatar
何乐 committed
32
    dispatch!({ type: 'user/fetchCurrent' });
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
33
    dispatch!({ type: 'settings/getSetting' });
何乐's avatar
何乐 committed
34
    dispatch!({ type: 'menu/getMenuData', payload: { routes, authority } });
35
  });
何乐's avatar
何乐 committed
36 37 38
  /**
   * init variables
   */
39
  const handleMenuCollapse = (payload: boolean) =>
何乐's avatar
何乐 committed
40
    dispatch!({ type: 'global/changeLayoutCollapsed', payload });
41
  return (
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
42 43 44 45 46 47
    <>
      <BasicLayoutComponents
        logo={logo}
        onCollapse={handleMenuCollapse}
        rightContentRender={RightProps => <RightContent {...RightProps} />}
        {...props}
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
48
        {...settings}
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
49 50 51 52
      >
        {children}
      </BasicLayoutComponents>
      <SettingDrawer
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
53 54
        settings={settings}
        onSettingChange={config =>
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
55 56
          dispatch!({
            type: 'settings/changeSetting',
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
57
            payload: config,
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
58 59 60 61
          })
        }
      />
    </>
62 63 64
  );
};

ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
65
export default connect(({ global, settings, menu: menuModel }: ConnectState) => ({
66
  collapsed: global.collapsed,
ι™ˆεΈ…'s avatar
ι™ˆεΈ… committed
67
  settings,
68 69 70
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
}))(BasicLayout);