You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.5 KiB
145 lines
4.5 KiB
import React, { PureComponent } from 'react';
|
|
import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip } from 'antd';
|
|
import moment from 'moment';
|
|
import groupBy from 'lodash/groupBy';
|
|
import NoticeIcon from '../NoticeIcon';
|
|
import HeaderSearch from '../HeaderSearch';
|
|
import styles from './index.less';
|
|
|
|
export default class GlobalHeaderRight extends PureComponent {
|
|
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');
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
currentUser,
|
|
fetchingNotices,
|
|
onNoticeVisibleChange,
|
|
onMenuClick,
|
|
onNoticeClear,
|
|
theme,
|
|
} = this.props;
|
|
const menu = (
|
|
<Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
|
|
<Menu.Item key="userCenter">
|
|
<Icon type="user" />个人中心
|
|
</Menu.Item>
|
|
<Menu.Item key="userinfo">
|
|
<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();
|
|
let className = styles.right;
|
|
if (theme === 'dark') {
|
|
className = `${styles.right} ${styles.dark}`;
|
|
}
|
|
return (
|
|
<div className={className}>
|
|
<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}
|
|
title="使用文档"
|
|
>
|
|
<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}
|
|
alt="avatar"
|
|
/>
|
|
<span className={styles.name}>{currentUser.name}</span>
|
|
</span>
|
|
</Dropdown>
|
|
) : (
|
|
<Spin size="small" style={{ marginLeft: 8 }} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|