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

fix select

pull/165/head
tangjinzhou 2018-02-09 18:42:19 +08:00
parent 75bf88dbe4
commit 19b108db83
6 changed files with 79 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/_util/vnode.js
View File

@ -59,19 +59,23 @@ export function cloneElement (n, nodeProps, clone) {
return null
}
const node = clone ? cloneVNode(ele, true) : ele
const { props = {}, key, on = {}} = nodeProps
const { props = {}, key, on = {}, children } = nodeProps
const data = node.data || {}
const { style = data.style,
class: cls = data.class,
attrs = data.attrs,
ref,
domProps = data.domProps,
} = nodeProps
node.data = Object.assign({}, data, { style, attrs, class: cls })
node.data = Object.assign({}, data, { style, attrs, class: cls, domProps })
if (node.componentOptions) {
node.componentOptions.propsData = node.componentOptions.propsData || {}
node.componentOptions.listeners = node.componentOptions.listeners || {}
node.componentOptions.propsData = { ...node.componentOptions.propsData, ...props }
node.componentOptions.listeners = { ...node.componentOptions.listeners, ...on }
if (children) {
node.componentOptions.children = children
}
} else {
node.data.on = { ...(node.data.on || {}), ...on }
}

7
components/trigger/Popup.vue
View File

@ -118,13 +118,14 @@ export default {
ref: 'popupInstance',
style: { ...this.getZIndexStyle(), ...popupStyle },
}
const transitionProps = {
let transitionProps = {
props: Object.assign({
appear: true,
css: false,
}),
}
const transitionName = getTransitionName()
let useTransition = !!transitionName
const transitionEvent = {
beforeEnter: (el) => {
el.style.display = el.__vOriginalDisplay
@ -144,6 +145,7 @@ export default {
}
if (typeof animation === 'object') {
useTransition = true
const { on = {}, props = {}} = animation
transitionProps.props = { ...transitionProps.props, ...props }
transitionProps.on = { ...transitionEvent, ...on, afterLeave: (el) => {
@ -153,6 +155,9 @@ export default {
} else {
transitionProps.on = transitionEvent
}
if (!useTransition) {
transitionProps = {}
}
return (<transition
{...transitionProps}
>

2
components/vc-menu/MenuItem.vue
View File

@ -33,7 +33,7 @@ const MenuItem = {
onKeyDown (e) {
const keyCode = e.keyCode
if (keyCode === KeyCode.ENTER) {
this.__emit('click', e)
this.onClick(e)
return true
}
},

7
components/vc-select/DropdownMenu.vue
View File

@ -5,6 +5,7 @@ import scrollIntoView from 'dom-scroll-into-view'
import { getSelectKeys, preventDefaultEvent } from './util'
import { cloneElement } from '../_util/vnode'
import BaseMixin from '../_util/BaseMixin'
import { hasProp, getSlotOptions } from '../_util/props-util'
export default {
name: 'DropdownMenu',
@ -144,9 +145,9 @@ export default {
}
clonedMenuItems = menuItems.map(item => {
if (item.type.isMenuItemGroup) {
const children = item.$slots.default.map(clone)
return cloneElement(item, {}, children)
if (getSlotOptions(item).isMenuItemGroup) {
const children = item.componentOptions.children.map(clone)
return cloneElement(item, { children })
}
return clone(item)
})

1
components/vc-select/Option.vue
View File

@ -7,6 +7,7 @@ export default {
PropTypes.string,
PropTypes.number,
]),
disabled: PropTypes.bool,
},
isSelectOption: true,
}

92
components/vc-select/Select.vue
View File

@ -31,7 +31,6 @@ import {
} from './util'
import SelectTrigger from './SelectTrigger'
import { SelectPropTypes } from './PropTypes'
import { setTimeout } from 'timers'
function noop () {}
@ -128,7 +127,7 @@ export default {
})
}
}
this.adjustOpenState()
// this.adjustOpenState()
},
deep: true,
},
@ -190,6 +189,7 @@ export default {
},
onDropdownVisibleChange (open) {
console.log('onDropdownVisibleChange', open)
if (open && !this._focused) {
this.clearBlurTime()
this.timeoutFocus()
@ -321,10 +321,10 @@ export default {
},
onArrowClick (e) {
// e.stopPropagation()
// if (!this.disabled) {
// this.setOpenState(!this.openStatus, !this.openStatus)
// }
e.stopPropagation()
if (!this.disabled) {
this.setOpenState(!this.openStatus, !this.openStatus)
}
},
onPlaceholderClick (e) {
@ -363,11 +363,13 @@ export default {
},
onOuterBlur (e) {
console.log('onOuterBlur')
if (this.disabled) {
e.preventDefault()
return
}
this.blurTimer = setTimeout(() => {
console.log('onOuterBlur setTimeout')
this._focused = false
this.updateFocusClassName()
const props = this.$props
@ -399,6 +401,7 @@ export default {
this.__emit('blur', this.getVLForOnChange(sValue))
this.setOpenState(false)
}, 10)
console.log('this.blurTimer', this.blurTimer)
},
onClearSelection (event) {
@ -406,15 +409,21 @@ export default {
if (disabled) {
return
}
event.stopPropagation()
if (inputValue || sValue.length) {
if (sValue.length) {
this.fireChange([])
}
this.setOpenState(false, true)
// this.setOpenState(false, true)
if (inputValue) {
this.setInputValue('')
}
if (this._focused) {
this._focused = false
} else {
event.stopPropagation()
}
} else {
event.stopPropagation()
}
},
@ -516,9 +525,6 @@ export default {
}
if (placeholder) {
const p = {
props: {
},
on: {
mousedown: preventDefaultEvent,
click: this.onPlaceholderClick,
@ -540,37 +546,47 @@ export default {
},
inputClick (e) {
if (this._focused) {
e.stopPropagation()
if (this.openStatus) {
e.stopPropagation()
} else {
this._focused = false
}
}
},
inputBlur (e) {
// console.log(e.target)
this.clearBlurTime()
this.blurTimer = setTimeout(() => {
this.onOuterBlur()
if (!this.disabled) {
this.setOpenState(!this.openStatus, !this.openStatus)
this._focused = false
this.setOpenState(false, false)
}
}, 10)
},
inputFocus (e) {
this.clearBlurTime()
},
_getInputElement () {
const props = this.$props
const inputElement = props.getInputElement
? props.getInputElement()
: <input id={props.id} autoComplete='off' />
: <input id={props.id} autoComplete='off' value='1111'/>
const inputCls = classnames(getClass(inputElement), {
[`${props.prefixCls}-search__field`]: true,
})
const inputEvents = getEvents(inputElement)
// https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
// Add space to the end of the inputValue as the width measurement tolerance
inputElement.data = inputElement.data || {}
return (
<div class={`${props.prefixCls}-search__field__wrap`}>
{cloneElement(inputElement, {
attrs: {
value: this.inputValue,
...(inputElement.data.attrs || {}),
disabled: props.disabled,
},
domProps: {
value: this.inputValue,
},
class: inputCls,
ref: 'inputRef',
on: {
@ -580,10 +596,10 @@ export default {
inputEvents.keydown || noop,
this.$listeners.inputKeydown
),
// focus: chaining(
// this.onOuterFocus,
// inputEvents.focus || noop,
// ),
focus: chaining(
this.inputFocus,
inputEvents.focus || noop,
),
blur: chaining(
this.inputBlur,
inputEvents.blur || noop,
@ -622,9 +638,9 @@ export default {
return this.$refs.selectTriggerRef.getInnerMenu()
},
setOpenState (open, needFocus) {
setOpenState (open, needFocus, forceSet) {
const { $props: props, openStatus } = this
if (openStatus === open) {
if (!forceSet && openStatus === open) {
this.maybeFocus(open, needFocus)
return
}
@ -894,9 +910,7 @@ export default {
// If hidden menu due to no options, then it should be calculated again
if (sOpen || this.hiddenForNoOptions) {
options = this.renderFilterOptions()
console.log('options', options)
}
console.log('options1', options)
this._options = options
if (isMultipleOrTagsOrCombobox($props) || !showSearch) {
@ -915,15 +929,16 @@ export default {
getOptionsAndOpenStatus () {
let sOpen = this.sOpen
if (this.skipAdjustOpen) {
this.openStatus = sOpen
return {
option: this._options,
options: this._options,
open: sOpen,
}
}
const { $props, showSearch } = this
let options = []
// If hidden menu due to no options, then it should be calculated again
if (true || sOpen || this.hiddenForNoOptions) {
if (sOpen || this.hiddenForNoOptions) {
options = this.renderFilterOptions()
}
this._options = options
@ -1299,6 +1314,21 @@ export default {
// this.getInputDOMNode().focus()
}
},
selectionRefClick (e) {
e.stopPropagation()
this.clearBlurTime()
if (!this.disabled) {
if (this._focused && this.openStatus) {
this._focused = false
this.setOpenState(false, false, true)
this.getInputDOMNode().blur()
} else {
this._focused = true
this.setOpenState(true, true, true)
this.getInputDOMNode().focus()
}
}
},
},
render () {
@ -1324,7 +1354,6 @@ export default {
[`${prefixCls}-enabled`]: !disabled,
[`${prefixCls}-allow-clear`]: !!props.allowClear,
}
console.log(options)
return (
<SelectTrigger
dropdownAlign={props.dropdownAlign}
@ -1360,8 +1389,9 @@ export default {
ref='rootRef'
// onBlur={this.onOuterBlur}
// onFocus={this.onOuterFocus}
onClick={this.rootRefClick}
// onClick={this.rootRefClick}
class={classnames(rootCls)}
// tabindex='-1'
>
<div
ref='selectionRef'
@ -1373,7 +1403,7 @@ export default {
aria-haspopup='true'
aria-expanded={openStatus}
{...extraSelectionProps}
// onClick={this.stopPropagation}
onClick={this.selectionRefClick}
>
{ctrlNode}
{this.renderClear()}
@ -1383,7 +1413,7 @@ export default {
class={`${prefixCls}-arrow`}
style={UNSELECTABLE_STYLE}
unselectable='unselectable'
onClick={this.onArrowClick}
// onClick={this.onArrowClick}
>
<b />
</span>)}