mirror of
https://github.com/chillzhuang/Sword
synced 2024-12-23 09:29:25 +08:00
177 lines
4.7 KiB
JavaScript
177 lines
4.7 KiB
JavaScript
|
import React from 'react';
|
||
|
import { formatMessage } from 'umi/locale';
|
||
|
import { Layout, message, Modal } from 'antd';
|
||
|
import Animate from 'rc-animate';
|
||
|
import { connect } from 'dva';
|
||
|
import router from 'umi/router';
|
||
|
import GlobalHeader from '@/components/GlobalHeader';
|
||
|
import TopNavHeader from '@/components/TopNavHeader';
|
||
|
import styles from './Header.less';
|
||
|
|
||
|
const { Header } = Layout;
|
||
|
|
||
|
class HeaderView extends React.Component {
|
||
|
state = {
|
||
|
visible: true,
|
||
|
};
|
||
|
|
||
|
static getDerivedStateFromProps(props, state) {
|
||
|
if (!props.autoHideHeader && !state.visible) {
|
||
|
return {
|
||
|
visible: true,
|
||
|
};
|
||
|
}
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
componentDidMount() {
|
||
|
document.addEventListener('scroll', this.handScroll, { passive: true });
|
||
|
}
|
||
|
|
||
|
componentWillUnmount() {
|
||
|
document.removeEventListener('scroll', this.handScroll);
|
||
|
}
|
||
|
|
||
|
getHeadWidth = () => {
|
||
|
const { isMobile, collapsed, setting } = this.props;
|
||
|
const { fixedHeader, layout } = setting;
|
||
|
if (isMobile || !fixedHeader || layout === 'topmenu') {
|
||
|
return '100%';
|
||
|
}
|
||
|
return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
|
||
|
};
|
||
|
|
||
|
handleNoticeClear = type => {
|
||
|
message.success(
|
||
|
`${formatMessage({ id: 'component.noticeIcon.cleared' })} ${formatMessage({
|
||
|
id: `component.globalHeader.${type}`,
|
||
|
})}`
|
||
|
);
|
||
|
const { dispatch } = this.props;
|
||
|
dispatch({
|
||
|
type: 'global/clearNotices',
|
||
|
payload: type,
|
||
|
});
|
||
|
};
|
||
|
|
||
|
handleMenuClick = ({ key }) => {
|
||
|
const { dispatch } = this.props;
|
||
|
if (key === 'userCenter') {
|
||
|
message.success('即将开放');
|
||
|
// router.push('/account/center');
|
||
|
return;
|
||
|
}
|
||
|
if (key === 'userinfo') {
|
||
|
router.push('/account/settings/base');
|
||
|
return;
|
||
|
}
|
||
|
if (key === 'password') {
|
||
|
router.push('/account/settings/password');
|
||
|
return;
|
||
|
}
|
||
|
if (key === 'triggerError') {
|
||
|
router.push('/exception/trigger');
|
||
|
return;
|
||
|
}
|
||
|
if (key === 'logout') {
|
||
|
Modal.confirm({
|
||
|
title: '退出确认',
|
||
|
content: '是否确定退出登录?',
|
||
|
okText: '确定',
|
||
|
okType: 'danger',
|
||
|
cancelText: '取消',
|
||
|
onOk() {
|
||
|
dispatch({
|
||
|
type: 'login/logout',
|
||
|
});
|
||
|
},
|
||
|
onCancel() {},
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
|
||
|
handleNoticeVisibleChange = visible => {
|
||
|
if (visible) {
|
||
|
const { dispatch } = this.props;
|
||
|
dispatch({
|
||
|
type: 'global/fetchNotices',
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
|
||
|
handScroll = () => {
|
||
|
const { autoHideHeader } = this.props;
|
||
|
const { visible } = this.state;
|
||
|
if (!autoHideHeader) {
|
||
|
return;
|
||
|
}
|
||
|
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
|
||
|
if (!this.ticking) {
|
||
|
this.ticking = true;
|
||
|
requestAnimationFrame(() => {
|
||
|
if (this.oldScrollTop > scrollTop) {
|
||
|
this.setState({
|
||
|
visible: true,
|
||
|
});
|
||
|
} else if (scrollTop > 300 && visible) {
|
||
|
this.setState({
|
||
|
visible: false,
|
||
|
});
|
||
|
} else if (scrollTop < 300 && !visible) {
|
||
|
this.setState({
|
||
|
visible: true,
|
||
|
});
|
||
|
}
|
||
|
this.oldScrollTop = scrollTop;
|
||
|
this.ticking = false;
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
const { isMobile, handleMenuCollapse, setting } = this.props;
|
||
|
const { navTheme, layout, fixedHeader } = setting;
|
||
|
const { visible } = this.state;
|
||
|
const isTop = layout === 'topmenu';
|
||
|
const width = this.getHeadWidth();
|
||
|
const HeaderDom = visible ? (
|
||
|
<Header style={{ padding: 0, width }} className={fixedHeader ? styles.fixedHeader : ''}>
|
||
|
{isTop && !isMobile ? (
|
||
|
<TopNavHeader
|
||
|
theme={navTheme}
|
||
|
mode="horizontal"
|
||
|
onCollapse={handleMenuCollapse}
|
||
|
onNoticeClear={this.handleNoticeClear}
|
||
|
onMenuClick={this.handleMenuClick}
|
||
|
onNoticeVisibleChange={this.handleNoticeVisibleChange}
|
||
|
{...this.props}
|
||
|
/>
|
||
|
) : (
|
||
|
<GlobalHeader
|
||
|
onCollapse={handleMenuCollapse}
|
||
|
onNoticeClear={this.handleNoticeClear}
|
||
|
onMenuClick={this.handleMenuClick}
|
||
|
onNoticeVisibleChange={this.handleNoticeVisibleChange}
|
||
|
{...this.props}
|
||
|
/>
|
||
|
)}
|
||
|
</Header>
|
||
|
) : null;
|
||
|
return (
|
||
|
<Animate component="" transitionName="fade">
|
||
|
{HeaderDom}
|
||
|
</Animate>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default connect(({ user, global, setting, loading }) => ({
|
||
|
currentUser: user.currentUser,
|
||
|
collapsed: global.collapsed,
|
||
|
fetchingMoreNotices: loading.effects['global/fetchMoreNotices'],
|
||
|
fetchingNotices: loading.effects['global/fetchNotices'],
|
||
|
loadedAllNotices: global.loadedAllNotices,
|
||
|
notices: global.notices,
|
||
|
setting,
|
||
|
}))(HeaderView);
|