123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- import React, { PureComponent } from 'react';
- import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider, Tooltip } from 'antd';
- import moment from 'moment';
- import groupBy from 'lodash/groupBy';
- import Debounce from 'lodash-decorators/debounce';
- import { Link } from 'dva/router';
- import NoticeIcon from '../NoticeIcon';
- import HeaderSearch from '../HeaderSearch';
- import styles from './index.less';
-
- export default class GlobalHeader extends PureComponent {
- componentWillUnmount() {
- this.triggerResizeEvent.cancel();
- }
- getNoticeData() {
- const { notices = [] } = this.props;
- if (notices.length === 0) {
- return {};
- }
- const newNotices = notices.map(notice => {
- const newNotice = { ...notice };
- if (newNotice.datetime) {
- newNotice.datetime = moment(notice.datetime).fromNow();
- }
- // transform id to item key
- if (newNotice.id) {
- newNotice.key = newNotice.id;
- }
- if (newNotice.extra && newNotice.status) {
- const color = {
- todo: '',
- processing: 'blue',
- urgent: 'red',
- doing: 'gold',
- }[newNotice.status];
- newNotice.extra = (
- <Tag color={color} style={{ marginRight: 0 }}>
- {newNotice.extra}
- </Tag>
- );
- }
- return newNotice;
- });
- return groupBy(newNotices, 'type');
- }
- toggle = () => {
- const { collapsed, onCollapse } = this.props;
- onCollapse(!collapsed);
- this.triggerResizeEvent();
- };
- /* eslint-disable*/
- @Debounce(600)
- triggerResizeEvent() {
- const event = document.createEvent('HTMLEvents');
- event.initEvent('resize', true, false);
- window.dispatchEvent(event);
- }
- render() {
- const {
- currentUser = {},
- collapsed,
- fetchingNotices,
- isMobile,
- logo,
- onNoticeVisibleChange,
- onMenuClick,
- onNoticeClear,
- } = this.props;
- const menu = (
- <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
- <Menu.Item disabled>
- <Icon type="user" />个人中心
- </Menu.Item>
- <Menu.Item disabled>
- <Icon type="setting" />设置
- </Menu.Item>
- <Menu.Item key="triggerError">
- <Icon type="close-circle" />触发报错
- </Menu.Item>
- <Menu.Divider />
- <Menu.Item key="logout">
- <Icon type="logout" />退出登录
- </Menu.Item>
- </Menu>
- );
- const noticeData = this.getNoticeData();
- return (
- <div className={styles.header}>
- {isMobile && [
- <Link to="/" className={styles.logo} key="logo">
- <img src={logo} alt="logo" width="32" />
- </Link>,
- <Divider type="vertical" key="line" />,
- ]}
- <Icon
- className={styles.trigger}
- type={collapsed ? 'menu-unfold' : 'menu-fold'}
- onClick={this.toggle}
- />
- <div className={styles.right}>
- <HeaderSearch
- className={`${styles.action} ${styles.search}`}
- placeholder="站内搜索"
- dataSource={['搜索提示一', '搜索提示二', '搜索提示三']}
- onSearch={value => {
- console.log('input', value); // eslint-disable-line
- }}
- onPressEnter={value => {
- console.log('enter', value); // eslint-disable-line
- }}
- />
- <Tooltip title="使用文档">
- <a
- target="_blank"
- href="http://pro.ant.design/docs/getting-started"
- rel="noopener noreferrer"
- className={styles.action}
- >
- <Icon type="question-circle-o" />
- </a>
- </Tooltip>
- <NoticeIcon
- className={styles.action}
- count={currentUser.notifyCount}
- onItemClick={(item, tabProps) => {
- console.log(item, tabProps); // eslint-disable-line
- }}
- onClear={onNoticeClear}
- onPopupVisibleChange={onNoticeVisibleChange}
- loading={fetchingNotices}
- popupAlign={{ offset: [20, -16] }}
- >
- <NoticeIcon.Tab
- list={noticeData['通知']}
- title="通知"
- emptyText="你已查看所有通知"
- emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
- />
- <NoticeIcon.Tab
- list={noticeData['消息']}
- title="消息"
- emptyText="您已读完所有消息"
- emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
- />
- <NoticeIcon.Tab
- list={noticeData['待办']}
- title="待办"
- emptyText="你已完成所有待办"
- emptyImage="https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg"
- />
- </NoticeIcon>
- {currentUser.name ? (
- <Dropdown overlay={menu}>
- <span className={`${styles.action} ${styles.account}`}>
- <Avatar size="small" className={styles.avatar} src={currentUser.avatar} />
- <span className={styles.name}>{currentUser.name}</span>
- </span>
- </Dropdown>
- ) : (
- <Spin size="small" style={{ marginLeft: 8 }} />
- )}
- </div>
- </div>
- );
- }
- }
|