2018-03-19 02:16:27 +00:00
|
|
|
|
2018-01-16 11:15:07 +00:00
|
|
|
import omit from 'omit.js'
|
2018-04-07 06:29:59 +00:00
|
|
|
import VcMenu, { Divider, ItemGroup, SubMenu } from '../vc-menu'
|
2018-01-16 11:15:07 +00:00
|
|
|
import PropTypes from '../_util/vue-types'
|
2018-01-16 07:41:00 +00:00
|
|
|
import animation from '../_util/openAnimation'
|
|
|
|
import warning from '../_util/warning'
|
|
|
|
import Item from './MenuItem'
|
|
|
|
import { hasProp } from '../_util/props-util'
|
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
2018-02-06 09:22:36 +00:00
|
|
|
import commonPropsType from '../vc-menu/commonPropsType'
|
2018-01-16 07:41:00 +00:00
|
|
|
|
|
|
|
export const MenuMode = PropTypes.oneOf(['vertical', 'vertical-left', 'vertical-right', 'horizontal', 'inline'])
|
|
|
|
|
|
|
|
export const menuProps = {
|
2018-01-19 10:18:17 +00:00
|
|
|
...commonPropsType,
|
2018-01-16 07:41:00 +00:00
|
|
|
theme: PropTypes.oneOf(['light', 'dark']).def('light'),
|
2018-01-17 11:15:18 +00:00
|
|
|
mode: MenuMode.def('vertical'),
|
2018-01-16 07:41:00 +00:00
|
|
|
selectable: PropTypes.bool,
|
2018-01-16 11:15:07 +00:00
|
|
|
selectedKeys: PropTypes.arrayOf(PropTypes.string),
|
2018-01-16 07:41:00 +00:00
|
|
|
defaultSelectedKeys: PropTypes.array,
|
|
|
|
openKeys: PropTypes.array,
|
|
|
|
defaultOpenKeys: PropTypes.array,
|
|
|
|
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
|
|
openTransitionName: PropTypes.string,
|
|
|
|
prefixCls: PropTypes.string.def('ant-menu'),
|
|
|
|
multiple: PropTypes.bool,
|
|
|
|
inlineIndent: PropTypes.number.def(24),
|
|
|
|
inlineCollapsed: PropTypes.bool,
|
2018-01-30 09:13:44 +00:00
|
|
|
isRootMenu: PropTypes.bool.def(true),
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AMenu',
|
2018-01-16 07:41:00 +00:00
|
|
|
props: menuProps,
|
2018-04-08 13:17:20 +00:00
|
|
|
Divider: { ...Divider, name: 'AMenuDivider' },
|
|
|
|
Item: { ...Item, name: 'AMenuItem' },
|
|
|
|
SubMenu: { ...SubMenu, name: 'ASubMenu' },
|
|
|
|
ItemGroup: { ...ItemGroup, name: 'AMenuItemGroup' },
|
2018-01-16 07:41:00 +00:00
|
|
|
provide () {
|
|
|
|
return {
|
2018-01-17 11:15:18 +00:00
|
|
|
getInlineCollapsed: this.getInlineCollapsed,
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
inject: {
|
2018-04-20 04:52:31 +00:00
|
|
|
layoutSiderContext: { default: {}},
|
2018-01-16 11:15:07 +00:00
|
|
|
},
|
2018-01-17 11:15:18 +00:00
|
|
|
model: {
|
|
|
|
prop: 'selectedKeys',
|
|
|
|
event: 'selectChange',
|
|
|
|
},
|
2018-02-12 04:13:37 +00:00
|
|
|
mounted () {
|
2018-04-20 04:52:31 +00:00
|
|
|
this.preProps = { ...this.$props }
|
2018-02-12 04:13:37 +00:00
|
|
|
},
|
2018-01-16 11:15:07 +00:00
|
|
|
watch: {
|
|
|
|
'$props': {
|
|
|
|
handler: function (nextProps) {
|
2018-01-17 11:15:18 +00:00
|
|
|
const { preProps, sOpenKeys } = this
|
|
|
|
const { prefixCls } = preProps
|
|
|
|
if (preProps.mode === 'inline' && nextProps.mode !== 'inline') {
|
|
|
|
this.switchModeFromInline = true
|
|
|
|
}
|
|
|
|
if (hasProp(this, 'openKeys')) {
|
|
|
|
this.setState({ sOpenKeys: nextProps.openKeys })
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (nextProps.inlineCollapsed && !preProps.inlineCollapsed) {
|
|
|
|
this.switchModeFromInline =
|
|
|
|
!!sOpenKeys.length && !!this.$el.querySelectorAll(`.${prefixCls}-submenu-open`).length
|
|
|
|
this.inlineOpenKeys = sOpenKeys
|
|
|
|
this.setState({ sOpenKeys: [] })
|
|
|
|
}
|
2018-01-16 11:15:07 +00:00
|
|
|
|
2018-01-17 11:15:18 +00:00
|
|
|
if (!nextProps.inlineCollapsed && preProps.inlineCollapsed) {
|
|
|
|
this.setState({ sOpenKeys: this.inlineOpenKeys })
|
|
|
|
this.inlineOpenKeys = []
|
|
|
|
}
|
2018-02-12 04:13:37 +00:00
|
|
|
this.preProps = { ...nextProps }
|
2018-01-16 11:15:07 +00:00
|
|
|
},
|
2018-02-22 07:10:38 +00:00
|
|
|
deep: true,
|
2018-01-16 11:15:07 +00:00
|
|
|
},
|
2018-04-20 04:52:31 +00:00
|
|
|
'layoutSiderContext.sCollapsed': function (val) {
|
2018-04-20 08:58:40 +00:00
|
|
|
const { openKeys, sOpenKeys = [], prefixCls } = this
|
2018-01-17 11:15:18 +00:00
|
|
|
if (hasProp(this, 'openKeys')) {
|
|
|
|
this.setState({ sOpenKeys: openKeys })
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (val) {
|
|
|
|
this.switchModeFromInline =
|
|
|
|
!!sOpenKeys.length && !!this.$el.querySelectorAll(`.${prefixCls}-submenu-open`).length
|
|
|
|
this.inlineOpenKeys = sOpenKeys
|
|
|
|
this.setState({ sOpenKeys: [] })
|
|
|
|
} else {
|
|
|
|
this.setState({ sOpenKeys: this.inlineOpenKeys })
|
|
|
|
this.inlineOpenKeys = []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
|
|
|
data () {
|
|
|
|
const props = this.$props
|
|
|
|
warning(
|
|
|
|
!(hasProp(this, 'inlineCollapsed') && props.mode !== 'inline'),
|
|
|
|
'`inlineCollapsed` should only be used when Menu\'s `mode` is inline.',
|
|
|
|
)
|
|
|
|
this.switchModeFromInline = false
|
|
|
|
this.leaveAnimationExecutedWhenInlineCollapsed = false
|
|
|
|
this.inlineOpenKeys = []
|
|
|
|
let sOpenKeys
|
|
|
|
if (hasProp(this, 'defaultOpenKeys')) {
|
|
|
|
sOpenKeys = props.defaultOpenKeys
|
|
|
|
} else if (hasProp(this, 'openKeys')) {
|
|
|
|
sOpenKeys = props.openKeys
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
sOpenKeys,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleClick (e) {
|
|
|
|
this.handleOpenChange([])
|
2018-01-16 11:15:07 +00:00
|
|
|
this.$emit('click', e)
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
2018-01-17 11:15:18 +00:00
|
|
|
handleSelect (info) {
|
|
|
|
this.$emit('select', info)
|
|
|
|
this.$emit('selectChange', info.selectedKeys)
|
|
|
|
},
|
|
|
|
handleDeselect (info) {
|
|
|
|
this.$emit('deselect', info)
|
|
|
|
this.$emit('selectChange', info.selectedKeys)
|
|
|
|
},
|
2018-01-16 07:41:00 +00:00
|
|
|
handleOpenChange (openKeys) {
|
|
|
|
this.setOpenKeys(openKeys)
|
2018-01-16 11:15:07 +00:00
|
|
|
this.$emit('openChange', openKeys)
|
2018-01-17 11:15:18 +00:00
|
|
|
this.$emit('update:openKeys', openKeys)
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
|
|
|
setOpenKeys (openKeys) {
|
2018-01-16 11:15:07 +00:00
|
|
|
if (!hasProp(this, 'openKeys')) {
|
|
|
|
this.setState({ sOpenKeys: openKeys })
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
getRealMenuMode () {
|
|
|
|
const inlineCollapsed = this.getInlineCollapsed()
|
|
|
|
if (this.switchModeFromInline && inlineCollapsed) {
|
|
|
|
return 'inline'
|
|
|
|
}
|
2018-01-16 11:15:07 +00:00
|
|
|
const { mode } = this.$props
|
2018-01-16 07:41:00 +00:00
|
|
|
return inlineCollapsed ? 'vertical' : mode
|
|
|
|
},
|
|
|
|
getInlineCollapsed () {
|
2018-01-16 11:15:07 +00:00
|
|
|
const { inlineCollapsed } = this.$props
|
2018-04-20 04:52:31 +00:00
|
|
|
if (this.layoutSiderContext.sCollapsed !== undefined) {
|
|
|
|
return this.layoutSiderContext.sCollapsed
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
return inlineCollapsed
|
|
|
|
},
|
|
|
|
getMenuOpenAnimation (menuMode) {
|
2018-01-16 11:15:07 +00:00
|
|
|
const { openAnimation, openTransitionName } = this.$props
|
2018-01-16 07:41:00 +00:00
|
|
|
let menuOpenAnimation = openAnimation || openTransitionName
|
|
|
|
if (openAnimation === undefined && openTransitionName === undefined) {
|
|
|
|
switch (menuMode) {
|
|
|
|
case 'horizontal':
|
|
|
|
menuOpenAnimation = 'slide-up'
|
|
|
|
break
|
|
|
|
case 'vertical':
|
|
|
|
case 'vertical-left':
|
|
|
|
case 'vertical-right':
|
|
|
|
// When mode switch from inline
|
|
|
|
// submenu should hide without animation
|
|
|
|
if (this.switchModeFromInline) {
|
|
|
|
menuOpenAnimation = ''
|
|
|
|
this.switchModeFromInline = false
|
|
|
|
} else {
|
|
|
|
menuOpenAnimation = 'zoom-big'
|
|
|
|
}
|
|
|
|
break
|
|
|
|
case 'inline':
|
2018-01-17 11:15:18 +00:00
|
|
|
menuOpenAnimation = { on: {
|
2018-01-16 07:41:00 +00:00
|
|
|
...animation,
|
2018-01-16 11:15:07 +00:00
|
|
|
leave: (node, done) => animation.leave(node, () => {
|
2018-01-16 07:41:00 +00:00
|
|
|
// Make sure inline menu leave animation finished before mode is switched
|
|
|
|
this.switchModeFromInline = false
|
2018-01-16 11:15:07 +00:00
|
|
|
// this.setState({})
|
|
|
|
this.$forceUpdate()
|
2018-01-16 07:41:00 +00:00
|
|
|
// when inlineCollapsed change false to true, all submenu will be unmounted,
|
|
|
|
// so that we don't need handle animation leaving.
|
|
|
|
if (this.getRealMenuMode() === 'vertical') {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
done()
|
|
|
|
}),
|
2018-01-17 11:15:18 +00:00
|
|
|
}}
|
2018-01-16 07:41:00 +00:00
|
|
|
break
|
|
|
|
default:
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return menuOpenAnimation
|
|
|
|
},
|
|
|
|
},
|
|
|
|
render () {
|
2018-04-20 04:52:31 +00:00
|
|
|
const { layoutSiderContext, $slots, $listeners } = this
|
|
|
|
const { collapsedWidth } = layoutSiderContext
|
2018-01-16 11:15:07 +00:00
|
|
|
const { prefixCls, theme } = this.$props
|
2018-01-16 07:41:00 +00:00
|
|
|
const menuMode = this.getRealMenuMode()
|
|
|
|
const menuOpenAnimation = this.getMenuOpenAnimation(menuMode)
|
|
|
|
|
|
|
|
const menuClassName = {
|
|
|
|
[`${prefixCls}-${theme}`]: true,
|
|
|
|
[`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
|
|
|
|
}
|
|
|
|
|
|
|
|
const menuProps = {
|
2018-01-16 11:15:07 +00:00
|
|
|
props: {
|
|
|
|
...omit(this.$props, ['inlineCollapsed']),
|
|
|
|
openKeys: this.sOpenKeys,
|
|
|
|
mode: menuMode,
|
|
|
|
},
|
|
|
|
on: {
|
2018-01-17 11:15:18 +00:00
|
|
|
...$listeners,
|
|
|
|
select: this.handleSelect,
|
|
|
|
deselect: this.handleDeselect,
|
2018-01-16 11:15:07 +00:00
|
|
|
openChange: this.handleOpenChange,
|
|
|
|
},
|
2018-01-17 11:15:18 +00:00
|
|
|
}
|
|
|
|
if (!hasProp(this, 'selectedKeys')) {
|
|
|
|
delete menuProps.props.selectedKeys
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (menuMode !== 'inline') {
|
|
|
|
// closing vertical popup submenu after click it
|
2018-01-16 11:15:07 +00:00
|
|
|
menuProps.on.click = this.handleClick
|
|
|
|
menuProps.props.openTransitionName = menuOpenAnimation
|
2018-01-16 07:41:00 +00:00
|
|
|
} else {
|
2018-01-16 11:15:07 +00:00
|
|
|
menuProps.props.openAnimation = menuOpenAnimation
|
2018-01-16 07:41:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/8587
|
|
|
|
if (
|
|
|
|
this.getInlineCollapsed() &&
|
|
|
|
(collapsedWidth === 0 || collapsedWidth === '0' || collapsedWidth === '0px')
|
|
|
|
) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2018-04-07 06:29:59 +00:00
|
|
|
return <VcMenu {...menuProps} class={menuClassName}>{$slots.default}</VcMenu>
|
2018-01-16 07:41:00 +00:00
|
|
|
},
|
|
|
|
}
|
|
|
|
|