github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add keydown

pull/9/head
tangjinzhou 2018-01-09 14:21:15 +08:00
parent c782de1fe1
commit 2c164770b6
10 changed files with 33 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/_util/cloneElement.js
View File

@ -1,8 +0,0 @@
export default (node, nodeProps) => {
const { props, style, class: cls, attrs, key } = nodeProps
if (node.componentOptions) {
const propsData = node.componentOptions.propsData
Object.assign(propsData, nodeProps)
}
return node
}

7
components/_util/vnode.js
View File

@ -78,11 +78,18 @@ export function cloneElement (n, nodeProps, clone) {
const { style = data.style,
class: cls = data.class,
attrs = data.attrs,
ref,
} = nodeProps
node.data = Object.assign(data, { style, attrs, class: cls, on: { ...(data.on || {}), ...on }})
if (key !== undefined) {
node.key = key
node.data.key = key
}
if (typeof ref === 'string') {
node.data.ref = ref
}
return node
}
export function getComponentName (opts) {
return opts && (opts.Ctor.options.name || opts.tag)
}

12
components/menu/demo/antd.vue
View File

@ -1,8 +1,6 @@
<script>
import { cloneElement } from '../../_util/vnode'
import Clone from '../../_util/Clone'
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
import { Icon } from 'antd'
import animate from 'css-animation'
function handleSelect (info) {
@ -74,17 +72,16 @@ export default {
</SubMenu>
</SubMenu>
</SubMenu>)
function onOpenChange (value) {
console.log('onOpenChange', value)
const onOpenChange = (value) => {
console.log('onOpenChange', value, this.$refs)
}
const commonMenu = () => (
<Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
<SubMenu key='1' title={<span>sub menu</span>}>
<SubMenu ref='test' key='1' title={<span>sub menu</span>}>
<MenuItem key='1-1'>
0-1
</MenuItem>
<MenuItem key='1-2'>0-2</MenuItem>
<MenuItem key='1-2' disabled>0-2</MenuItem>
</SubMenu>
{nestSubMenu()}
<MenuItem key='2'>1</MenuItem>
@ -130,6 +127,7 @@ export default {
<div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
mode: 'inline',
defaultOpenKeys: ['1'],
defaultSelectedKeys: ['1-2', '4-1'],
openAnimation: animation,
}} >
{commonMenu()}

1
components/menu/src/DOMWrap.vue
View File

@ -33,6 +33,7 @@ export default {
const Tag = this.$props.tag
const tagProps = {
attr: { ...otherProps, ...this.$attrs },
on: this.$listeners,
}
return <Tag {...tagProps} class={this.class}>{this.$slots.default}</Tag>
},

2
components/menu/src/Menu.vue
View File

@ -163,7 +163,7 @@ const Menu = {
const { sOpenKeys } = this.$data
if (sOpenKeys.length) {
lastOpen = this.getFlatInstanceArray().filter((c) => {
return c && sOpenKeys.indexOf(c.props.eventKey) !== -1
return c && sOpenKeys.indexOf(c.eventKey) !== -1
})
}
return lastOpen[0]

1
components/menu/src/MenuItem.vue
View File

@ -14,6 +14,7 @@ const MenuItem = {
selectedKeys: PropTypes.array,
disabled: PropTypes.bool,
title: PropTypes.string,
index: PropTypes.number,
inlineIndent: PropTypes.number.def(24),
level: PropTypes.number.def(1),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),

65
components/menu/src/MenuMixin.js
View File

@ -9,10 +9,8 @@ function allDisabled (arr) {
if (!arr.length) {
return true
}
return arr.every(c => {
const propsData = c.componentOptions.propsData || {}
return !!propsData.disabled
return !!c.disabled
})
}
@ -53,10 +51,6 @@ export default {
deep: true,
},
},
created () {
this.instanceArray = []
},
methods: {
getActiveKey (originalActiveKey) {
let activeKey = originalActiveKey
@ -86,23 +80,13 @@ export default {
}
return activeKey
},
saveRef (index, subIndex, c) {
if (c) {
if (subIndex !== undefined) {
this.instanceArray[index] = this.instanceArray[index] || []
this.instanceArray[index][subIndex] = c
} else {
this.instanceArray[index] = c
}
}
},
// all keyboard events callbacks run from here at first
onKeyDown (e, callback) {
onKeyDown (e) {
const keyCode = e.keyCode
let handled
this.getFlatInstanceArray().forEach((obj) => {
if (obj && obj.$props.active) {
handled = this.$emit('keydown', e)
if (obj && obj.active) {
handled = obj.onKeyDown(e)
}
})
if (handled) {
@ -115,15 +99,11 @@ export default {
if (activeItem) {
e.preventDefault()
this.setState({
sActiveKey: activeItem.$props.eventKey,
sActiveKey: activeItem.eventKey,
}, () => {
scrollIntoView(activeItem.$el, this.$el, {
onlyScrollIfNeeded: true,
})
// https://github.com/react-component/menu/commit/9899a9672f6f028ec3cdf773f1ecea5badd2d33e
if (typeof callback === 'function') {
callback(activeItem)
}
})
return 1
} else if (activeItem === undefined) {
@ -143,22 +123,13 @@ export default {
},
getFlatInstanceArray () {
let instanceArray = this.instanceArray
const hasInnerArray = instanceArray.some((a) => {
return Array.isArray(a)
})
if (hasInnerArray) {
instanceArray = []
this.instanceArray.forEach((a) => {
if (Array.isArray(a)) {
instanceArray.push.apply(instanceArray, a)
} else {
instanceArray.push(a)
}
})
this.instanceArray = instanceArray
let instance = []
try {
instance = this.$children[0].$children || []
} catch (error) {
}
return instanceArray
return instance
},
renderCommonMenuItem (child, i, subIndex, extraProps) {
@ -175,7 +146,6 @@ export default {
renderMenuItem: this.renderMenuItem,
rootPrefixCls: props.prefixCls,
index: i,
// parentMenu: this,
eventKey: key,
active: !childProps.disabled && isActive,
multiple: props.multiple,
@ -195,11 +165,7 @@ export default {
destroy: this.onDestroy,
select: this.onSelect,
},
// ref: childProps.disabled ? undefined : child.ref,
// ref: childProps.disabled ? undefined
// : createChainedFunction(child.ref, saveRef.bind(this, i, subIndex)),
}
// !childProps.disabled && this.saveRef(i, subIndex, child.ref)
if (props.mode === 'inline') {
newChildProps.props.triggerSubMenuAction = 'click'
}
@ -210,7 +176,6 @@ export default {
},
renderRoot (props, children = []) {
this.instanceArray = []
const className = {
[props.prefixCls]: true,
[props.class]: true,
@ -236,7 +201,7 @@ export default {
domProps.attrs.tabIndex = '0'
domProps.on.keydown = this.onKeyDown
}
const newChildren = children.map(this.renderMenuItem)
const newChildren = children.map((c, i) => this.renderMenuItem(c, i))
return (
<DOMWrap
{...domProps}
@ -259,8 +224,7 @@ export default {
// find current activeIndex
let activeIndex = -1
children.every((c, ci) => {
const propsData = c.componentOptions.propsData || {}
if (c && propsData.eventKey === sActiveKey) {
if (c && c.eventKey === sActiveKey) {
activeIndex = ci
return false
}
@ -275,8 +239,7 @@ export default {
let i = start
for (; ;) {
const child = children[i]
const propsData = child.componentOptions.propsData || {}
if (!child || propsData.disabled) {
if (!child || child.disabled) {
i = (i + 1 + len) % len
// complete a loop
if (i === start) {

3
components/menu/src/SubMenu.vue
View File

@ -31,6 +31,7 @@ export default {
multiple: PropTypes.bool,
active: PropTypes.bool, // TODO: remove
isRootMenu: PropTypes.bool,
index: PropTypes.number,
// onItemHover: PropTypes.func,
// onSelect: PropTypes.func,
triggerSubMenuAction: PropTypes.string,
@ -100,7 +101,7 @@ export default {
onKeyDown (e) {
const keyCode = e.keyCode
const menu = this.menuInstance
const menu = this.$refs.menuInstance
const isOpen = this.isOpen()
if (keyCode === KeyCode.ENTER) {

1
components/trigger/index.vue
View File

@ -258,7 +258,6 @@ export default {
},
getRootDomNode () {
console.log('this.$el.children', this.$el.children)
return this.$el.children ? this.$el.children[0] : this.$el
},

4
package.json
View File

@ -67,16 +67,16 @@
"style-loader": "^0.18.2",
"stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0",
"vue": "^2.4.4",
"vue-loader": "^13.0.5",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.4.4",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"add-dom-event-listener": "^1.0.2",
"css-animation": "^1.4.1",
"dom-align": "^1.6.6",
"dom-scroll-into-view": "^1.2.1",
"eslint-plugin-vue": "^3.13.0",
"lodash.clonedeep": "^4.5.0",