陈帅
7 years ago
22 changed files with 39 additions and 1527 deletions
@ -1,53 +0,0 @@ |
|||
import React, { Component } from 'react'; |
|||
import { Icon } from 'antd'; |
|||
import Link from 'umi/link'; |
|||
import debounce from 'lodash/debounce'; |
|||
import styles from './index.less'; |
|||
import RightContent, { GlobalHeaderRightProps } from './RightContent'; |
|||
|
|||
type PartialGlobalHeaderRightProps = { |
|||
[K in |
|||
| 'onMenuClick' |
|||
| 'onNoticeClear' |
|||
| 'onNoticeVisibleChange' |
|||
| 'currentUser']?: GlobalHeaderRightProps[K] |
|||
}; |
|||
|
|||
export interface GlobalHeaderProps extends PartialGlobalHeaderRightProps { |
|||
collapsed?: boolean; |
|||
onCollapse?: (collapsed: boolean) => void; |
|||
isMobile?: boolean; |
|||
logo?: string; |
|||
} |
|||
|
|||
export default class GlobalHeader extends Component<GlobalHeaderProps> { |
|||
triggerResizeEvent = debounce(() => { |
|||
const event = document.createEvent('HTMLEvents'); |
|||
event.initEvent('resize', true, false); |
|||
window.dispatchEvent(event); |
|||
}); |
|||
componentWillUnmount() { |
|||
this.triggerResizeEvent.cancel(); |
|||
} |
|||
toggle = () => { |
|||
const { collapsed, onCollapse } = this.props; |
|||
if (onCollapse) onCollapse(!collapsed); |
|||
this.triggerResizeEvent(); |
|||
}; |
|||
render() { |
|||
const { collapsed, isMobile, logo } = this.props; |
|||
return ( |
|||
<div className={styles.header}> |
|||
{isMobile && ( |
|||
<Link to="/" className={styles.logo} key="logo"> |
|||
<img src={logo} alt="logo" width="32" /> |
|||
</Link> |
|||
)} |
|||
<span className={styles.trigger} onClick={this.toggle}> |
|||
<Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} /> |
|||
</span> |
|||
<RightContent {...this.props} /> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
@ -1,9 +0,0 @@ |
|||
import { Icon } from 'antd'; |
|||
import defaultSettings from '../../../config/defaultSettings'; |
|||
|
|||
const { iconfontUrl } = defaultSettings; |
|||
const scriptUrl = iconfontUrl; |
|||
// 使用：
|
|||
// import IconFont from '@/components/IconFont';
|
|||
// <IconFont type='icon-demo' className='xxx-xxx' />
|
|||
export default Icon.createFromIconfontCN({ scriptUrl }); |
|||
@ -1,31 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Tooltip, Icon } from 'antd'; |
|||
import style from './index.less'; |
|||
|
|||
export interface BlockChecboxProps { |
|||
value: string; |
|||
onChange: (key: string) => void; |
|||
list: any[]; |
|||
} |
|||
|
|||
const BlockChecbox: React.FC<BlockChecboxProps> = ({ value, onChange, list }) => ( |
|||
<div className={style.blockChecbox} key={value}> |
|||
{list.map(item => ( |
|||
<Tooltip title={item.title} key={item.key}> |
|||
<div className={style.item} onClick={() => onChange(item.key)}> |
|||
<img src={item.url} alt={item.key} /> |
|||
<div |
|||
className={style.selectIcon} |
|||
style={{ |
|||
display: value === item.key ? 'block' : 'none', |
|||
}} |
|||
> |
|||
<Icon type="check" /> |
|||
</div> |
|||
</div> |
|||
</Tooltip> |
|||
))} |
|||
</div> |
|||
); |
|||
|
|||
export default BlockChecbox; |
|||
@ -1,21 +0,0 @@ |
|||
.themeColor { |
|||
margin-top: 24px; |
|||
overflow: hidden; |
|||
.title { |
|||
margin-bottom: 12px; |
|||
color: rgba(0, 0, 0, 0.65); |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
} |
|||
.colorBlock { |
|||
float: left; |
|||
width: 20px; |
|||
height: 20px; |
|||
margin-right: 8px; |
|||
color: #fff; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
border-radius: 2px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Tooltip, Icon } from 'antd'; |
|||
import { formatMessage } from 'umi-plugin-locale'; |
|||
import styles from './ThemeColor.less'; |
|||
|
|||
export interface TagProps { |
|||
color: string; |
|||
check: boolean; |
|||
className?: string; |
|||
onClick?: () => void; |
|||
} |
|||
|
|||
const Tag: React.FC<TagProps> = ({ color, check, ...rest }) => ( |
|||
<div {...rest} style={{ backgroundColor: color }}> |
|||
{check ? <Icon type="check" /> : ''} |
|||
</div> |
|||
); |
|||
|
|||
export interface ThemeColorProps { |
|||
colors?: any[]; |
|||
title?: string; |
|||
value: string; |
|||
onChange: (color: string) => void; |
|||
} |
|||
|
|||
const ThemeColor: React.FC<ThemeColorProps> = ({ colors, title, value, onChange }) => { |
|||
const colorList = colors || [ |
|||
{ |
|||
key: 'dust', |
|||
color: '#F5222D', |
|||
}, |
|||
{ |
|||
key: 'volcano', |
|||
color: '#FA541C', |
|||
}, |
|||
{ |
|||
key: 'sunset', |
|||
color: '#FAAD14', |
|||
}, |
|||
{ |
|||
key: 'cyan', |
|||
color: '#13C2C2', |
|||
}, |
|||
{ |
|||
key: 'green', |
|||
color: '#52C41A', |
|||
}, |
|||
{ |
|||
key: 'daybreak', |
|||
color: '#1890FF', |
|||
}, |
|||
{ |
|||
key: 'geekblue', |
|||
color: '#2F54EB', |
|||
}, |
|||
{ |
|||
key: 'purple', |
|||
color: '#722ED1', |
|||
}, |
|||
]; |
|||
return ( |
|||
<div className={styles.themeColor}> |
|||
<h3 className={styles.title}>{title}</h3> |
|||
<div className={styles.content}> |
|||
{colorList.map(({ key, color }) => ( |
|||
<Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}> |
|||
<Tag |
|||
className={styles.colorBlock} |
|||
color={color} |
|||
check={value === color} |
|||
onClick={() => onChange && onChange(color)} |
|||
/> |
|||
</Tooltip> |
|||
))} |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default ThemeColor; |
|||
@ -1,81 +0,0 @@ |
|||
@import '~antd/lib/style/themes/default.less'; |
|||
|
|||
.content { |
|||
position: relative; |
|||
min-height: 100%; |
|||
background: #fff; |
|||
:global { |
|||
.ant-list-item { |
|||
span { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blockChecbox { |
|||
display: flex; |
|||
.item { |
|||
position: relative; |
|||
margin-right: 16px; |
|||
// box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); |
|||
border-radius: @border-radius-base; |
|||
cursor: pointer; |
|||
img { |
|||
width: 48px; |
|||
} |
|||
} |
|||
.selectIcon { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 15px; |
|||
padding-left: 24px; |
|||
color: @primary-color; |
|||
font-weight: bold; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.color_block { |
|||
display: inline-block; |
|||
width: 38px; |
|||
height: 22px; |
|||
margin: 4px; |
|||
margin-right: 12px; |
|||
vertical-align: middle; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.title { |
|||
margin-bottom: 12px; |
|||
color: @heading-color; |
|||
font-size: 14px; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
.handle { |
|||
position: absolute; |
|||
top: 240px; |
|||
right: 300px; |
|||
z-index: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 48px; |
|||
height: 48px; |
|||
font-size: 16px; |
|||
text-align: center; |
|||
background: @primary-color; |
|||
border-radius: 4px 0 0 4px; |
|||
cursor: pointer; |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.productionHint { |
|||
margin-top: 16px; |
|||
font-size: 12px; |
|||
} |
|||
@ -1,272 +0,0 @@ |
|||
import { ConnectProps, ConnectState, SettingModelState } from '@/models/connect'; |
|||
import React, { Component } from 'react'; |
|||
import { Select, message, Drawer, List, Switch, Divider, Icon, Button, Alert, Tooltip } from 'antd'; |
|||
import { formatMessage } from 'umi-plugin-react/locale'; |
|||
import { CopyToClipboard } from 'react-copy-to-clipboard'; |
|||
import { connect } from 'dva'; |
|||
import omit from 'omit.js'; |
|||
import styles from './index.less'; |
|||
import ThemeColor from './ThemeColor'; |
|||
import BlockCheckbox from './BlockCheckbox'; |
|||
|
|||
const { Option } = Select; |
|||
interface BodyProps { |
|||
title: string; |
|||
style?: React.CSSProperties; |
|||
} |
|||
|
|||
const Body: React.FC<BodyProps> = ({ children, title, style }) => ( |
|||
<div style={{ ...style, marginBottom: 24 }}> |
|||
<h3 className={styles.title}>{title}</h3> |
|||
{children} |
|||
</div> |
|||
); |
|||
|
|||
interface SettingItemProps { |
|||
title: React.ReactNode; |
|||
action: React.ReactElement; |
|||
disabled?: boolean; |
|||
disabledReason?: React.ReactNode; |
|||
} |
|||
|
|||
export interface SettingDrawerProps extends ConnectProps { |
|||
setting?: SettingModelState; |
|||
} |
|||
|
|||
export interface SettingDrawerState extends Partial<SettingModelState> { |
|||
collapse: boolean; |
|||
} |
|||
|
|||
@connect(({ setting }: ConnectState) => ({ setting })) |
|||
class SettingDrawer extends Component<SettingDrawerProps, SettingDrawerState> { |
|||
state: SettingDrawerState = { |
|||
collapse: false, |
|||
}; |
|||
|
|||
getLayoutSetting = (): SettingItemProps[] => { |
|||
const { setting } = this.props; |
|||
const { contentWidth, fixedHeader, layout, autoHideHeader, fixSiderbar } = setting!; |
|||
return [ |
|||
{ |
|||
title: formatMessage({ id: 'app.setting.content-width' }), |
|||
action: ( |
|||
<Select |
|||
value={contentWidth} |
|||
size="small" |
|||
onSelect={value => this.changeSetting('contentWidth', value)} |
|||
style={{ width: 80 }} |
|||
> |
|||
{layout === 'sidemenu' ? null : ( |
|||
<Option value="Fixed"> |
|||
{formatMessage({ id: 'app.setting.content-width.fixed' })} |
|||
</Option> |
|||
)} |
|||
<Option value="Fluid"> |
|||
{formatMessage({ id: 'app.setting.content-width.fluid' })} |
|||
</Option> |
|||
</Select> |
|||
), |
|||
}, |
|||
{ |
|||
title: formatMessage({ id: 'app.setting.fixedheader' }), |
|||
action: ( |
|||
<Switch |
|||
size="small" |
|||
checked={!!fixedHeader} |
|||
onChange={checked => this.changeSetting('fixedHeader', checked)} |
|||
/> |
|||
), |
|||
}, |
|||
{ |
|||
title: formatMessage({ id: 'app.setting.hideheader' }), |
|||
disabled: !fixedHeader, |
|||
disabledReason: formatMessage({ id: 'app.setting.hideheader.hint' }), |
|||
action: ( |
|||
<Switch |
|||
size="small" |
|||
checked={!!autoHideHeader} |
|||
onChange={checked => this.changeSetting('autoHideHeader', checked)} |
|||
/> |
|||
), |
|||
}, |
|||
{ |
|||
title: formatMessage({ id: 'app.setting.fixedsidebar' }), |
|||
disabled: layout === 'topmenu', |
|||
disabledReason: formatMessage({ id: 'app.setting.fixedsidebar.hint' }), |
|||
action: ( |
|||
<Switch |
|||
size="small" |
|||
checked={!!fixSiderbar} |
|||
onChange={checked => this.changeSetting('fixSiderbar', checked)} |
|||
/> |
|||
), |
|||
}, |
|||
]; |
|||
}; |
|||
|
|||
changeSetting = (key: string, value: any) => { |
|||
const { setting } = this.props; |
|||
const nextState = { ...setting! }; |
|||
nextState[key] = value; |
|||
if (key === 'layout') { |
|||
nextState.contentWidth = value === 'topmenu' ? 'Fixed' : 'Fluid'; |
|||
} else if (key === 'fixedHeader' && !value) { |
|||
nextState.autoHideHeader = false; |
|||
} |
|||
this.setState(nextState, () => { |
|||
const { dispatch } = this.props; |
|||
dispatch!({ |
|||
type: 'setting/changeSetting', |
|||
payload: this.state, |
|||
}); |
|||
}); |
|||
}; |
|||
|
|||
togglerContent = () => { |
|||
const { collapse } = this.state; |
|||
this.setState({ collapse: !collapse }); |
|||
}; |
|||
|
|||
renderLayoutSettingItem = (item: SettingItemProps) => { |
|||
const action = React.cloneElement(item.action, { |
|||
disabled: item.disabled, |
|||
}); |
|||
return ( |
|||
<Tooltip title={item.disabled ? item.disabledReason : ''} placement="left"> |
|||
<List.Item actions={[action]}> |
|||
<span style={{ opacity: item.disabled ? 0.5 : 1 }}>{item.title}</span> |
|||
</List.Item> |
|||
</Tooltip> |
|||
); |
|||
}; |
|||
|
|||
render() { |
|||
const { setting } = this.props; |
|||
const { navTheme, primaryColor, layout, colorWeak } = setting!; |
|||
const { collapse } = this.state; |
|||
return ( |
|||
<Drawer |
|||
visible={collapse} |
|||
width={300} |
|||
onClose={this.togglerContent} |
|||
placement="right" |
|||
handler={ |
|||
<div className={styles.handle} onClick={this.togglerContent}> |
|||
<Icon |
|||
type={collapse ? 'close' : 'setting'} |
|||
style={{ |
|||
color: '#fff', |
|||
fontSize: 20, |
|||
}} |
|||
/> |
|||
</div> |
|||
} |
|||
style={{ |
|||
zIndex: 999, |
|||
}} |
|||
> |
|||
<div className={styles.content}> |
|||
<Body title={formatMessage({ id: 'app.setting.pagestyle' })}> |
|||
<BlockCheckbox |
|||
list={[ |
|||
{ |
|||
key: 'dark', |
|||
url: 'https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg', |
|||
title: formatMessage({ id: 'app.setting.pagestyle.dark' }), |
|||
}, |
|||
{ |
|||
key: 'light', |
|||
url: 'https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg', |
|||
title: formatMessage({ id: 'app.setting.pagestyle.light' }), |
|||
}, |
|||
]} |
|||
value={navTheme} |
|||
onChange={value => this.changeSetting('navTheme', value)} |
|||
/> |
|||
</Body> |
|||
|
|||
<ThemeColor |
|||
title={formatMessage({ id: 'app.setting.themecolor' })} |
|||
value={primaryColor} |
|||
onChange={color => this.changeSetting('primaryColor', color)} |
|||
/> |
|||
|
|||
<Divider /> |
|||
|
|||
<Body title={formatMessage({ id: 'app.setting.navigationmode' })}> |
|||
<BlockCheckbox |
|||
list={[ |
|||
{ |
|||
key: 'sidemenu', |
|||
url: 'https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg', |
|||
title: formatMessage({ id: 'app.setting.sidemenu' }), |
|||
}, |
|||
{ |
|||
key: 'topmenu', |
|||
url: 'https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg', |
|||
title: formatMessage({ id: 'app.setting.topmenu' }), |
|||
}, |
|||
]} |
|||
value={layout} |
|||
onChange={value => this.changeSetting('layout', value)} |
|||
/> |
|||
</Body> |
|||
|
|||
<List |
|||
split={false} |
|||
dataSource={this.getLayoutSetting()} |
|||
renderItem={this.renderLayoutSettingItem} |
|||
/> |
|||
|
|||
<Divider /> |
|||
|
|||
<Body title={formatMessage({ id: 'app.setting.othersettings' })}> |
|||
<List |
|||
split={false} |
|||
renderItem={this.renderLayoutSettingItem} |
|||
dataSource={[ |
|||
{ |
|||
title: formatMessage({ id: 'app.setting.weakmode' }), |
|||
action: ( |
|||
<Switch |
|||
size="small" |
|||
checked={!!colorWeak} |
|||
onChange={checked => this.changeSetting('colorWeak', checked)} |
|||
/> |
|||
), |
|||
}, |
|||
]} |
|||
/> |
|||
</Body> |
|||
<Divider /> |
|||
<CopyToClipboard |
|||
text={JSON.stringify(omit(setting, ['colorWeak']), null, 2)} |
|||
onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))} |
|||
> |
|||
<Button block icon="copy"> |
|||
{formatMessage({ id: 'app.setting.copy' })} |
|||
</Button> |
|||
</CopyToClipboard> |
|||
<Alert |
|||
type="warning" |
|||
className={styles.productionHint} |
|||
message={ |
|||
<div> |
|||
{formatMessage({ id: 'app.setting.production.hint' })}{' '} |
|||
<a |
|||
href="https://u.ant.design/pro-v2-default-settings" |
|||
target="_blank" |
|||
rel="noopener noreferrer" |
|||
> |
|||
src/defaultSettings.js |
|||
</a> |
|||
</div> |
|||
} |
|||
/> |
|||
</div> |
|||
</Drawer> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default SettingDrawer; |
|||
@ -1,206 +0,0 @@ |
|||
import IconFont from '@/components/IconFont'; |
|||
import { isUrl } from '@/utils/utils'; |
|||
import { Icon, Menu } from 'antd'; |
|||
import { MenuMode, MenuTheme } from 'antd/es/menu'; |
|||
import classNames from 'classnames'; |
|||
import React, { Component } from 'react'; |
|||
import { RouterTypes } from 'umi'; |
|||
import Link from 'umi/link'; |
|||
import { urlToList } from '../_utils/pathTools'; |
|||
import styles from './index.less'; |
|||
import { getMenuMatches } from './SiderMenuUtils'; |
|||
|
|||
const { SubMenu } = Menu; |
|||
|
|||
// Allow menu.js config icon as string or ReactNode
|
|||
// icon: 'setting',
|
|||
// icon: 'icon-geren' #For Iconfont ,
|
|||
// icon: 'http://demo.com/icon.png',
|
|||
// icon: <Icon type="setting" />,
|
|||
const getIcon = (icon?: string | React.ReactNode) => { |
|||
if (typeof icon === 'string') { |
|||
if (isUrl(icon)) { |
|||
return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />; |
|||
} |
|||
if (icon.startsWith('icon-')) { |
|||
return <IconFont type={icon} />; |
|||
} |
|||
return <Icon type={icon} />; |
|||
} |
|||
return icon; |
|||
}; |
|||
|
|||
export interface MenuDataItem { |
|||
authority?: string[] | string; |
|||
children?: MenuDataItem[]; |
|||
hideChildrenInMenu?: boolean; |
|||
hideInMenu?: boolean; |
|||
icon?: string; |
|||
locale?: string; |
|||
name?: string; |
|||
path: string; |
|||
[key: string]: any; |
|||
} |
|||
|
|||
export interface Route extends MenuDataItem { |
|||
routes?: Route[]; |
|||
} |
|||
|
|||
export interface BaseMenuProps extends Partial<RouterTypes<Route>> { |
|||
className?: string; |
|||
collapsed?: boolean; |
|||
flatMenuKeys?: any[]; |
|||
handleOpenChange?: (openKeys: string[]) => void; |
|||
isMobile?: boolean; |
|||
menuData?: MenuDataItem[]; |
|||
mode?: MenuMode; |
|||
onCollapse?: (collapsed: boolean) => void; |
|||
onOpenChange?: (openKeys: string[]) => void; |
|||
openKeys?: string[]; |
|||
style?: React.CSSProperties; |
|||
theme?: MenuTheme; |
|||
} |
|||
|
|||
export default class BaseMenu extends Component<BaseMenuProps> { |
|||
static defaultProps: Partial<BaseMenuProps> = { |
|||
flatMenuKeys: [], |
|||
onCollapse: () => void 0, |
|||
isMobile: false, |
|||
openKeys: [], |
|||
collapsed: false, |
|||
handleOpenChange: () => void 0, |
|||
menuData: [], |
|||
onOpenChange: () => void 0, |
|||
}; |
|||
|
|||
/** |
|||
* 获得菜单子节点 |
|||
*/ |
|||
getNavMenuItems = (menusData: MenuDataItem[] = []): React.ReactNode[] => { |
|||
return menusData |
|||
.filter(item => item.name && !item.hideInMenu) |
|||
.map(item => this.getSubMenuOrItem(item)) |
|||
.filter(item => item); |
|||
}; |
|||
|
|||
// Get the currently selected menu
|
|||
getSelectedMenuKeys = (pathname: string): string[] => { |
|||
const { flatMenuKeys } = this.props; |
|||
return urlToList(pathname) |
|||
.map(itemPath => getMenuMatches(flatMenuKeys, itemPath).pop()) |
|||
.filter(item => item) as string[]; |
|||
}; |
|||
|
|||
/** |
|||
* get SubMenu or Item |
|||
*/ |
|||
getSubMenuOrItem = (item: MenuDataItem): React.ReactNode => { |
|||
if ( |
|||
Array.isArray(item.children) && |
|||
!item.hideChildrenInMenu && |
|||
item.children.some(child => (child.name ? true : false)) |
|||
) { |
|||
return ( |
|||
<SubMenu |
|||
title={ |
|||
item.icon ? ( |
|||
<span> |
|||
{getIcon(item.icon)} |
|||
<span>{item.name}</span> |
|||
</span> |
|||
) : ( |
|||
item.name |
|||
) |
|||
} |
|||
key={item.path} |
|||
> |
|||
{this.getNavMenuItems(item.children)} |
|||
</SubMenu> |
|||
); |
|||
} |
|||
return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>; |
|||
}; |
|||
|
|||
/** |
|||
* 判断是否是http链接.返回 Link 或 a |
|||
* Judge whether it is http link.return a or Link |
|||
* @memberof SiderMenu |
|||
*/ |
|||
getMenuItemPath = (item: MenuDataItem) => { |
|||
const { name } = item; |
|||
const itemPath = this.conversionPath(item.path); |
|||
const icon = getIcon(item.icon); |
|||
const { target } = item; |
|||
// Is it a http link
|
|||
if (/^https?:\/\//.test(itemPath)) { |
|||
return ( |
|||
<a href={itemPath} target={target}> |
|||
{icon} |
|||
<span>{name}</span> |
|||
</a> |
|||
); |
|||
} |
|||
const { location, isMobile, onCollapse } = this.props; |
|||
return ( |
|||
<Link |
|||
to={itemPath} |
|||
target={target} |
|||
replace={itemPath === location!.pathname} |
|||
onClick={isMobile ? () => onCollapse!(true) : void 0} |
|||
> |
|||
{icon} |
|||
<span>{name}</span> |
|||
</Link> |
|||
); |
|||
}; |
|||
|
|||
conversionPath = (path: string) => { |
|||
if (path && path.indexOf('http') === 0) { |
|||
return path; |
|||
} |
|||
return `/${path || ''}`.replace(/\/+/g, '/'); |
|||
}; |
|||
|
|||
render() { |
|||
const { |
|||
openKeys, |
|||
theme, |
|||
mode, |
|||
location, |
|||
className, |
|||
collapsed, |
|||
handleOpenChange, |
|||
style, |
|||
menuData, |
|||
} = this.props; |
|||
// if pathname can't match, use the nearest parent's key
|
|||
let selectedKeys = this.getSelectedMenuKeys(location!.pathname); |
|||
if (!selectedKeys.length && openKeys) { |
|||
selectedKeys = [openKeys[openKeys.length - 1]]; |
|||
} |
|||
let props = {}; |
|||
if (openKeys && !collapsed) { |
|||
props = { |
|||
openKeys: openKeys.length === 0 ? [...selectedKeys] : openKeys, |
|||
}; |
|||
} |
|||
const cls = classNames(className, { |
|||
'top-nav-menu': mode === 'horizontal', |
|||
}); |
|||
|
|||
return ( |
|||
<Menu |
|||
key="Menu" |
|||
mode={mode} |
|||
theme={theme} |
|||
onOpenChange={handleOpenChange} |
|||
selectedKeys={selectedKeys} |
|||
style={style} |
|||
className={cls} |
|||
{...props} |
|||
> |
|||
{this.getNavMenuItems(menuData)} |
|||
</Menu> |
|||
); |
|||
} |
|||
} |
|||
@ -1,124 +0,0 @@ |
|||
import { Layout } from 'antd'; |
|||
import classNames from 'classnames'; |
|||
import React, { Component, Suspense } from 'react'; |
|||
import Link from 'umi/link'; |
|||
import defaultSettings from '../../../config/defaultSettings'; |
|||
import PageLoading from '../PageLoading'; |
|||
import { BaseMenuProps } from './BaseMenu'; |
|||
import styles from './index.less'; |
|||
import { getDefaultCollapsedSubMenus } from './SiderMenuUtils'; |
|||
|
|||
const BaseMenu = React.lazy(() => import('./BaseMenu')); |
|||
const { Sider } = Layout; |
|||
const { title } = defaultSettings; |
|||
let firstMount: boolean = true; |
|||
|
|||
export interface SiderMenuProps extends BaseMenuProps { |
|||
logo?: string; |
|||
fixSiderbar?: boolean; |
|||
} |
|||
|
|||
interface SiderMenuState { |
|||
pathname?: string; |
|||
openKeys?: string[]; |
|||
flatMenuKeysLen?: number; |
|||
} |
|||
|
|||
export default class SiderMenu extends Component<SiderMenuProps, SiderMenuState> { |
|||
static defaultProps: Partial<SiderMenuProps> = { |
|||
flatMenuKeys: [], |
|||
onCollapse: () => void 0, |
|||
isMobile: false, |
|||
openKeys: [], |
|||
collapsed: false, |
|||
handleOpenChange: () => void 0, |
|||
menuData: [], |
|||
onOpenChange: () => void 0, |
|||
}; |
|||
|
|||
static getDerivedStateFromProps(props: SiderMenuProps, state: SiderMenuState) { |
|||
const { pathname, flatMenuKeysLen } = state; |
|||
if (props.location!.pathname !== pathname || props.flatMenuKeys!.length !== flatMenuKeysLen) { |
|||
return { |
|||
pathname: props.location!.pathname, |
|||
flatMenuKeysLen: props.flatMenuKeys!.length, |
|||
openKeys: getDefaultCollapsedSubMenus(props), |
|||
}; |
|||
} |
|||
return null; |
|||
} |
|||
|
|||
constructor(props: SiderMenuProps) { |
|||
super(props); |
|||
this.state = { |
|||
openKeys: getDefaultCollapsedSubMenus(props), |
|||
}; |
|||
} |
|||
|
|||
componentDidMount() { |
|||
firstMount = false; |
|||
} |
|||
|
|||
isMainMenu: (key: string) => boolean = key => { |
|||
const { menuData } = this.props; |
|||
return menuData!.some(item => { |
|||
if (key) { |
|||
return item.key === key || item.path === key; |
|||
} |
|||
return false; |
|||
}); |
|||
}; |
|||
|
|||
handleOpenChange: (openKeys: string[]) => void = openKeys => { |
|||
const moreThanOne = openKeys.filter(openKey => this.isMainMenu(openKey)).length > 1; |
|||
if (moreThanOne) { |
|||
this.setState({ openKeys: [openKeys.pop()].filter(item => item) as string[] }); |
|||
} else { |
|||
this.setState({ openKeys: [...openKeys] }); |
|||
} |
|||
}; |
|||
|
|||
render() { |
|||
const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile } = this.props; |
|||
const { openKeys } = this.state; |
|||
const defaultProps = collapsed ? {} : { openKeys }; |
|||
|
|||
const siderClassName = classNames(styles.sider, { |
|||
[styles.fixSiderBar]: fixSiderbar, |
|||
[styles.light]: theme === 'light', |
|||
}); |
|||
return ( |
|||
<Sider |
|||
collapsible |
|||
trigger={null} |
|||
collapsed={collapsed} |
|||
breakpoint="lg" |
|||
onCollapse={collapse => { |
|||
if (firstMount || !isMobile) { |
|||
onCollapse!(collapse); |
|||
} |
|||
}} |
|||
width={256} |
|||
theme={theme} |
|||
className={siderClassName} |
|||
> |
|||
<div className={styles.logo} id="logo"> |
|||
<Link to="/"> |
|||
<img src={logo} alt="logo" /> |
|||
<h1>{title}</h1> |
|||
</Link> |
|||
</div> |
|||
<Suspense fallback={<PageLoading />}> |
|||
<BaseMenu |
|||
{...this.props} |
|||
mode="inline" |
|||
handleOpenChange={this.handleOpenChange} |
|||
onOpenChange={this.handleOpenChange} |
|||
style={{ padding: '16px 0', width: '100%' }} |
|||
{...defaultProps} |
|||
/> |
|||
</Suspense> |
|||
</Sider> |
|||
); |
|||
} |
|||
} |
|||
@ -1,33 +0,0 @@ |
|||
import pathToRegexp from 'path-to-regexp'; |
|||
import { urlToList } from '../_utils/pathTools'; |
|||
import { MenuDataItem, BaseMenuProps } from './BaseMenu'; |
|||
|
|||
/** |
|||
* Recursively flatten the data |
|||
* [{path:string},{path:string}] => {path,path2} |
|||
* @param menus |
|||
*/ |
|||
export const getFlatMenuKeys = (menuData: MenuDataItem[] = []) => { |
|||
let keys: string[] = []; |
|||
menuData.forEach(item => { |
|||
keys.push(item.path); |
|||
if (item.children) { |
|||
keys = keys.concat(getFlatMenuKeys(item.children)); |
|||
} |
|||
}); |
|||
return keys; |
|||
}; |
|||
|
|||
export const getMenuMatches = (flatMenuKeys: string[] = [], path: string) => |
|||
flatMenuKeys.filter(item => item && pathToRegexp(item).test(path)); |
|||
|
|||
/** |
|||
* 获得菜单子节点 |
|||
*/ |
|||
export const getDefaultCollapsedSubMenus = (props: BaseMenuProps) => { |
|||
const { location, flatMenuKeys } = props; |
|||
return urlToList(location!.pathname) |
|||
.map(item => getMenuMatches(flatMenuKeys, item)[0]) |
|||
.filter(item => item) |
|||
.reduce((acc, curr) => [...acc, curr], ['/']); |
|||
}; |
|||
@ -1,105 +0,0 @@ |
|||
@import '~antd/lib/style/themes/default.less'; |
|||
|
|||
@nav-header-height: @layout-header-height; |
|||
|
|||
.logo { |
|||
position: relative; |
|||
height: @nav-header-height; |
|||
padding-left: (@menu-collapsed-width - 32px) / 2; |
|||
overflow: hidden; |
|||
line-height: @nav-header-height; |
|||
background: #002140; |
|||
transition: all 0.3s; |
|||
img { |
|||
display: inline-block; |
|||
height: 32px; |
|||
vertical-align: middle; |
|||
} |
|||
h1 { |
|||
display: inline-block; |
|||
margin: 0 0 0 12px; |
|||
color: white; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
.sider { |
|||
position: relative; |
|||
z-index: 10; |
|||
min-height: 100vh; |
|||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); |
|||
&.fixSiderBar { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); |
|||
:global { |
|||
.ant-menu-root { |
|||
height: ~'calc(100vh - @{nav-header-height})'; |
|||
overflow-y: auto; |
|||
} |
|||
.ant-menu-inline { |
|||
border-right: 0; |
|||
.ant-menu-item, |
|||
.ant-menu-submenu-title { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
&.light { |
|||
background-color: white; |
|||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); |
|||
.logo { |
|||
background: white; |
|||
box-shadow: 1px 1px 0 0 @border-color-split; |
|||
h1 { |
|||
color: @primary-color; |
|||
} |
|||
} |
|||
:global(.ant-menu-light) { |
|||
border-right-color: transparent; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.icon { |
|||
width: 14px; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
:global { |
|||
.top-nav-menu li.ant-menu-item { |
|||
height: @nav-header-height; |
|||
line-height: @nav-header-height; |
|||
} |
|||
.drawer .drawer-content { |
|||
background: #001529; |
|||
} |
|||
.ant-menu-inline-collapsed { |
|||
& > .ant-menu-item .sider-menu-item-img + span, |
|||
& |
|||
> .ant-menu-item-group |
|||
> .ant-menu-item-group-list |
|||
> .ant-menu-item |
|||
.sider-menu-item-img |
|||
+ span, |
|||
& > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span { |
|||
display: inline-block; |
|||
max-width: 0; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
.ant-menu-item .sider-menu-item-img + span, |
|||
.ant-menu-submenu-title .sider-menu-item-img + span { |
|||
opacity: 1; |
|||
transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out; |
|||
} |
|||
.ant-drawer-left { |
|||
.ant-drawer-body { |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
@ -1,34 +0,0 @@ |
|||
import React from 'react'; |
|||
import { Drawer } from 'antd'; |
|||
import { SiderMenuProps } from './SiderMenu'; |
|||
import SiderMenu from './SiderMenu'; |
|||
import { getFlatMenuKeys } from './SiderMenuUtils'; |
|||
|
|||
export { SiderMenuProps }; |
|||
export { MenuDataItem, Route } from './BaseMenu'; |
|||
|
|||
const SiderMenuWrapper: React.FC<SiderMenuProps> = props => { |
|||
const { isMobile, menuData, collapsed, onCollapse } = props; |
|||
const flatMenuKeys = getFlatMenuKeys(menuData); |
|||
return isMobile ? ( |
|||
<Drawer |
|||
visible={!collapsed} |
|||
placement="left" |
|||
onClose={() => onCollapse!(true)} |
|||
style={{ |
|||
padding: 0, |
|||
height: '100vh', |
|||
}} |
|||
> |
|||
<SiderMenu {...props} flatMenuKeys={flatMenuKeys} collapsed={isMobile ? false : collapsed} /> |
|||
</Drawer> |
|||
) : ( |
|||
<SiderMenu {...props} flatMenuKeys={flatMenuKeys} /> |
|||
); |
|||
}; |
|||
|
|||
SiderMenuWrapper.defaultProps = { |
|||
onCollapse: () => void 0, |
|||
}; |
|||
|
|||
export default React.memo(SiderMenuWrapper); |
|||
@ -1,72 +0,0 @@ |
|||
@import '~antd/lib/style/themes/default.less'; |
|||
|
|||
.head { |
|||
position: relative; |
|||
width: 100%; |
|||
height: @layout-header-height; |
|||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
|||
transition: background 0.3s, width 0.2s; |
|||
:global { |
|||
.ant-menu-submenu.ant-menu-submenu-horizontal { |
|||
height: 100%; |
|||
line-height: @layout-header-height; |
|||
.ant-menu-submenu-title { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
&.light { |
|||
background-color: #fff; |
|||
} |
|||
.main { |
|||
display: flex; |
|||
height: @layout-header-height; |
|||
padding-left: 24px; |
|||
&.wide { |
|||
max-width: 1200px; |
|||
margin: auto; |
|||
padding-left: 0; |
|||
} |
|||
.left { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
.right { |
|||
width: 324px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.logo { |
|||
position: relative; |
|||
width: 165px; |
|||
height: @layout-header-height; |
|||
overflow: hidden; |
|||
line-height: @layout-header-height; |
|||
transition: all 0.3s; |
|||
img { |
|||
display: inline-block; |
|||
height: 32px; |
|||
vertical-align: middle; |
|||
} |
|||
h1 { |
|||
display: inline-block; |
|||
margin: 0 0 0 12px; |
|||
color: #fff; |
|||
font-weight: 400; |
|||
font-size: 16px; |
|||
vertical-align: top; |
|||
} |
|||
} |
|||
|
|||
.light { |
|||
h1 { |
|||
color: #002140; |
|||
} |
|||
} |
|||
|
|||
.menu { |
|||
height: @layout-header-height; |
|||
line-height: @layout-header-height; |
|||
border: none; |
|||
} |
|||
@ -1,59 +0,0 @@ |
|||
import { SiderMenuProps } from '@/components/SiderMenu'; |
|||
import React, { Component } from 'react'; |
|||
import Link from 'umi/link'; |
|||
import RightContent, { GlobalHeaderRightProps } from '../GlobalHeader/RightContent'; |
|||
import BaseMenu from '../SiderMenu/BaseMenu'; |
|||
import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils'; |
|||
import styles from './index.less'; |
|||
import defaultSettings, { ContentWidth } from '../../../config/defaultSettings'; |
|||
|
|||
export interface TopNavHeaderProps extends SiderMenuProps, GlobalHeaderRightProps { |
|||
contentWidth?: ContentWidth; |
|||
} |
|||
|
|||
interface TopNavHeaderState { |
|||
maxWidth?: number; |
|||
} |
|||
|
|||
export default class TopNavHeader extends Component<TopNavHeaderProps, TopNavHeaderState> { |
|||
static getDerivedStateFromProps(props: TopNavHeaderProps) { |
|||
return { |
|||
maxWidth: |
|||
(props.contentWidth === 'Fixed' && window.innerWidth > 1200 ? 1200 : window.innerWidth) - |
|||
280 - |
|||
120 - |
|||
40, |
|||
}; |
|||
} |
|||
|
|||
state: TopNavHeaderState = {}; |
|||
|
|||
maim: HTMLDivElement | null = null; |
|||
|
|||
render() { |
|||
const { theme, contentWidth, menuData, logo } = this.props; |
|||
const { maxWidth } = this.state; |
|||
const flatMenuKeys = getFlatMenuKeys(menuData); |
|||
return ( |
|||
<div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}> |
|||
<div |
|||
ref={ref => (this.maim = ref)} |
|||
className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`} |
|||
> |
|||
<div className={styles.left}> |
|||
<div className={styles.logo} key="logo" id="logo"> |
|||
<Link to="/"> |
|||
<img src={logo} alt="logo" /> |
|||
<h1>{defaultSettings.title}</h1> |
|||
</Link> |
|||
</div> |
|||
<div style={{ maxWidth }}> |
|||
<BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} /> |
|||
</div> |
|||
</div> |
|||
<RightContent {...this.props} /> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
@import '~antd/lib/style/themes/default.less'; |
|||
|
|||
.content { |
|||
margin: 24px; |
|||
padding-top: @layout-header-height; |
|||
} |
|||
@ -1,37 +0,0 @@ |
|||
import { Icon, Layout } from 'antd'; |
|||
import React, { Fragment } from 'react'; |
|||
import { GlobalFooter } from 'ant-design-pro'; |
|||
|
|||
const { Footer } = Layout; |
|||
const FooterView = () => ( |
|||
<Footer style={{ padding: 0 }}> |
|||
<GlobalFooter |
|||
links={[ |
|||
{ |
|||
key: 'Pro 首页', |
|||
title: 'Pro 首页', |
|||
href: 'https://pro.ant.design', |
|||
blankTarget: true, |
|||
}, |
|||
{ |
|||
key: 'github', |
|||
title: <Icon type="github" />, |
|||
href: 'https://github.com/ant-design/ant-design-pro', |
|||
blankTarget: true, |
|||
}, |
|||
{ |
|||
key: 'Ant Design', |
|||
title: 'Ant Design', |
|||
href: 'https://ant.design', |
|||
blankTarget: true, |
|||
}, |
|||
]} |
|||
copyright={ |
|||
<Fragment> |
|||
Copyright <Icon type="copyright" /> 2019 蚂蚁金服体验技术部出品 |
|||
</Fragment> |
|||
} |
|||
/> |
|||
</Footer> |
|||
); |
|||
export default FooterView; |
|||
@ -1,8 +0,0 @@ |
|||
.fixedHeader { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 9; |
|||
width: 100%; |
|||
transition: width 0.2s; |
|||
} |
|||
@ -1,179 +0,0 @@ |
|||
import GlobalHeader, { GlobalHeaderProps } from '@/components/GlobalHeader'; |
|||
import TopNavHeader, { TopNavHeaderProps } from '@/components/TopNavHeader'; |
|||
import { ConnectProps, ConnectState, SettingModelState } from '@/models/connect'; |
|||
import React, { Component } from 'react'; |
|||
import { formatMessage } from 'umi-plugin-react/locale'; |
|||
import { Layout, message } from 'antd'; |
|||
import { ClickParam } from 'antd/es/menu'; |
|||
import { connect } from 'dva'; |
|||
import Animate from 'rc-animate'; |
|||
import router from 'umi/router'; |
|||
import styles from './Header.less'; |
|||
|
|||
const { Header } = Layout; |
|||
|
|||
export interface HeaderViewProps extends ConnectProps, TopNavHeaderProps, GlobalHeaderProps { |
|||
isMobile?: boolean; |
|||
collapsed?: boolean; |
|||
setting?: SettingModelState; |
|||
autoHideHeader?: boolean; |
|||
handleMenuCollapse?: (collapse: boolean) => void; |
|||
} |
|||
|
|||
interface HeaderViewState { |
|||
visible: boolean; |
|||
} |
|||
|
|||
class HeaderView extends Component<HeaderViewProps, HeaderViewState> { |
|||
static getDerivedStateFromProps(props: HeaderViewProps, state: HeaderViewState) { |
|||
if (!props.autoHideHeader && !state.visible) { |
|||
return { |
|||
visible: true, |
|||
}; |
|||
} |
|||
return null; |
|||
} |
|||
state = { |
|||
visible: true, |
|||
}; |
|||
|
|||
ticking: boolean = false; |
|||
oldScrollTop: number = 0; |
|||
|
|||
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: string) => { |
|||
const { dispatch } = this.props; |
|||
message.success( |
|||
`${formatMessage({ id: 'component.noticeIcon.cleared' })} ${formatMessage({ |
|||
id: `component.globalHeader.${type}`, |
|||
})}`,
|
|||
); |
|||
dispatch!({ |
|||
type: 'global/clearNotices', |
|||
payload: type, |
|||
}); |
|||
}; |
|||
|
|||
handleMenuClick = ({ key }: ClickParam) => { |
|||
const { dispatch } = this.props; |
|||
if (key === 'userCenter') { |
|||
router.push('/account/center'); |
|||
return; |
|||
} |
|||
if (key === 'triggerError') { |
|||
router.push('/exception/trigger'); |
|||
return; |
|||
} |
|||
if (key === 'userinfo') { |
|||
router.push('/account/settings/base'); |
|||
return; |
|||
} |
|||
if (key === 'logout') { |
|||
dispatch!({ |
|||
type: 'login/logout', |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
handleNoticeVisibleChange = (visible: boolean) => { |
|||
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, zIndex: 2 }} |
|||
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 }: ConnectState) => ({ |
|||
currentUser: user.currentUser, |
|||
collapsed: global.collapsed, |
|||
fetchingMoreNotices: loading.effects['global/fetchMoreNotices'], |
|||
fetchingNotices: loading.effects['global/fetchNotices'], |
|||
notices: global.notices, |
|||
setting, |
|||
}))(HeaderView); |
|||
Loading…
Reference in new issue