index.tsx 4.29 KB
Newer Older
1
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
2

3
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
4
import { FormattedMessage } from 'umi-plugin-react/locale';
陈帅's avatar
陈帅 committed
5
import { GridContent } from '@ant-design/pro-layout';
6
import { Menu } from 'antd';
陈帅's avatar
陈帅 committed
7
import { connect } from 'dva';
8 9
import BaseView from './components/base';
import BindingView from './components/binding';
陈帅's avatar
陈帅 committed
10
import { CurrentUser } from './data.d';
陈帅's avatar
陈帅 committed
11 12 13
import NotificationView from './components/notification';
import SecurityView from './components/security';
import styles from './style.less';
14 15 16

const { Item } = Menu;

17
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
陈帅's avatar
陈帅 committed
18
  dispatch: Dispatch<any>;
19 20 21 22 23 24 25 26 27 28 29 30
  currentUser: CurrentUser;
}

type PAGE_NAME_UPPER_CAMEL_CASEStateKeys = 'base' | 'security' | 'binding' | 'notification';
interface PAGE_NAME_UPPER_CAMEL_CASEState {
  mode: 'inline' | 'horizontal';
  menuMap: {
    [key: string]: React.ReactNode;
  };
  selectKey: PAGE_NAME_UPPER_CAMEL_CASEStateKeys;
}
@connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: { currentUser: CurrentUser } }) => ({
31 32
  currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
}))
33 34 35 36 37
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
  PAGE_NAME_UPPER_CAMEL_CASEProps,
  PAGE_NAME_UPPER_CAMEL_CASEState
> {
  constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
    super(props);
    const menuMap = {
      base: <FormattedMessage id="BLOCK_NAME.menuMap.basic" defaultMessage="Basic Settings" />,
      security: (
        <FormattedMessage id="BLOCK_NAME.menuMap.security" defaultMessage="Security Settings" />
      ),
      binding: (
        <FormattedMessage id="BLOCK_NAME.menuMap.binding" defaultMessage="Account Binding" />
      ),
      notification: (
        <FormattedMessage
          id="BLOCK_NAME.menuMap.notification"
          defaultMessage="New Message Notification"
        />
      ),
    };
    this.state = {
      mode: 'inline',
      menuMap,
      selectKey: 'base',
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'BLOCK_NAME_CAMEL_CASE/fetchCurrent',
    });
    window.addEventListener('resize', this.resize);
    this.resize();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

74
  getMenu = () => {
75 76 77 78 79 80 81 82 83
    const { menuMap } = this.state;
    return Object.keys(menuMap).map(item => <Item key={item}>{menuMap[item]}</Item>);
  };

  getRightTitle = () => {
    const { selectKey, menuMap } = this.state;
    return menuMap[selectKey];
  };

84
  selectKey = (key: PAGE_NAME_UPPER_CAMEL_CASEStateKeys) => {
85 86 87 88 89 90 91 92 93 94 95 96 97
    this.setState({
      selectKey: key,
    });
  };

  resize = () => {
    if (!this.main) {
      return;
    }
    requestAnimationFrame(() => {
      if (!this.main) {
        return;
      }
98
      let mode: 'inline' | 'horizontal' = 'inline';
99 100 101 102 103 104 105 106 107 108 109 110 111
      const { offsetWidth } = this.main;
      if (this.main.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      this.setState({
        mode,
      });
    });
  };

陈帅's avatar
陈帅 committed
112 113
  main: HTMLDivElement | undefined;

114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
  renderChildren = () => {
    const { selectKey } = this.state;
    switch (selectKey) {
      case 'base':
        return <BaseView />;
      case 'security':
        return <SecurityView />;
      case 'binding':
        return <BindingView />;
      case 'notification':
        return <NotificationView />;
      default:
        break;
    }

    return null;
  };

  render() {
    const { currentUser } = this.props;
    if (!currentUser.userid) {
      return '';
    }
    const { mode, selectKey } = this.state;
    return (
陈帅's avatar
陈帅 committed
139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
      <GridContent>
        <div
          className={styles.main}
          ref={ref => {
            if (ref) {
              this.main = ref;
            }
          }}
        >
          <div className={styles.leftMenu}>
            <Menu
              mode={mode}
              selectedKeys={[selectKey]}
              onClick={({ key }) => this.selectKey(key as PAGE_NAME_UPPER_CAMEL_CASEStateKeys)}
            >
              {this.getMenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>{this.getRightTitle()}</div>
            {this.renderChildren()}
          </div>
161
        </div>
陈帅's avatar
陈帅 committed
162
      </GridContent>
163 164 165 166 167
    );
  }
}

export default PAGE_NAME_UPPER_CAMEL_CASE;