Merge branch 'master' of https://github.com/vueComponent/ant-design
wangxueliang
commit
31556d4cc4
|
|
@ -22,6 +22,7 @@ export default {
|
|||
mask: PropTypes.bool,
|
||||
zIndex: PropTypes.number,
|
||||
popupClassName: PropTypes.any,
|
||||
popupStyle: PropTypes.object.def({}),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -99,7 +100,7 @@ export default {
|
|||
},
|
||||
getPopupElement () {
|
||||
const { $props: props, $slots, $listeners, getTransitionName } = this
|
||||
const { align, visible, prefixCls, animation } = props
|
||||
const { align, visible, prefixCls, animation, popupStyle } = props
|
||||
const { mouseenter, mouseleave } = $listeners
|
||||
const className = this.getClassName(props.getClassNameFromAlign(align))
|
||||
// const hiddenClassName = `${prefixCls}-hidden`
|
||||
|
|
@ -115,7 +116,7 @@ export default {
|
|||
mouseleave: mouseleave || noop,
|
||||
},
|
||||
ref: 'popupInstance',
|
||||
style: { ...this.getZIndexStyle() },
|
||||
style: { ...this.getZIndexStyle(), ...popupStyle },
|
||||
}
|
||||
const transitionProps = {
|
||||
props: Object.assign({
|
||||
|
|
|
|||
|
|
@ -340,12 +340,12 @@ export default {
|
|||
},
|
||||
el: div,
|
||||
render () {
|
||||
const { popupStyle, popupEvents, ...otherProps } = this.popupProps
|
||||
const { popupEvents, ...otherProps } = this.popupProps
|
||||
const p = {
|
||||
props: otherProps,
|
||||
on: popupEvents,
|
||||
ref: 'popup',
|
||||
style: popupStyle,
|
||||
// style: popupStyle,
|
||||
}
|
||||
return (
|
||||
<Popup
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import {
|
|||
} from './util'
|
||||
import SelectTrigger from './SelectTrigger'
|
||||
import { SelectPropTypes } from './PropTypes'
|
||||
import { setTimeout } from 'timers'
|
||||
|
||||
function noop () {}
|
||||
|
||||
|
|
@ -94,13 +95,15 @@ export default {
|
|||
if (sOpen === undefined) {
|
||||
sOpen = defaultOpen
|
||||
}
|
||||
this.adjustOpenState()
|
||||
return {
|
||||
sValue,
|
||||
inputValue,
|
||||
sOpen,
|
||||
}
|
||||
},
|
||||
beforeMount () {
|
||||
// this.adjustOpenState()
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.autoFocus && this.focus()
|
||||
|
|
@ -144,7 +147,10 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
|
||||
beforeUpdate () {
|
||||
// console.log('beforeUpdate')
|
||||
// this.adjustOpenState()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearFocusTime()
|
||||
this.clearBlurTime()
|
||||
|
|
@ -195,12 +201,12 @@ export default {
|
|||
|
||||
// combobox ignore
|
||||
onKeyDown (event) {
|
||||
const { disabled, sOpen } = this
|
||||
const { disabled, openStatus } = this
|
||||
if (disabled) {
|
||||
return
|
||||
}
|
||||
const keyCode = event.keyCode
|
||||
if (sOpen && !this.getInputDOMNode()) {
|
||||
if (openStatus && !this.getInputDOMNode()) {
|
||||
this.onInputKeydown(event)
|
||||
} else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
|
||||
this.setOpenState(true)
|
||||
|
|
@ -209,7 +215,7 @@ export default {
|
|||
},
|
||||
|
||||
onInputKeydown (event) {
|
||||
const { disabled, sOpen, sValue, $props } = this
|
||||
const { disabled, openStatus, sValue, $props } = this
|
||||
if (disabled) {
|
||||
return
|
||||
}
|
||||
|
|
@ -226,14 +232,14 @@ export default {
|
|||
return
|
||||
}
|
||||
if (keyCode === KeyCode.DOWN) {
|
||||
if (!sOpen) {
|
||||
if (!openStatus) {
|
||||
this.openIfHasChildren()
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
return
|
||||
}
|
||||
} else if (keyCode === KeyCode.ESC) {
|
||||
if (sOpen) {
|
||||
if (openStatus) {
|
||||
this.setOpenState(false)
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
|
@ -241,7 +247,7 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
if (sOpen) {
|
||||
if (openStatus) {
|
||||
const menu = this.$refs.selectTriggerRef.getInnerMenu()
|
||||
if (menu && menu.onKeyDown(event, this.handleBackfill)) {
|
||||
event.preventDefault()
|
||||
|
|
@ -315,19 +321,23 @@ export default {
|
|||
},
|
||||
|
||||
onArrowClick (e) {
|
||||
e.stopPropagation()
|
||||
if (!this.disabled) {
|
||||
this.setOpenState(!this.sOpen, !this.sOpen)
|
||||
}
|
||||
// e.stopPropagation()
|
||||
// if (!this.disabled) {
|
||||
// this.setOpenState(!this.openStatus, !this.openStatus)
|
||||
// }
|
||||
},
|
||||
|
||||
onPlaceholderClick () {
|
||||
onPlaceholderClick (e) {
|
||||
if (this._focused) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
if (this.getInputDOMNode()) {
|
||||
this.getInputDOMNode().focus()
|
||||
}
|
||||
},
|
||||
|
||||
onOuterFocus (e) {
|
||||
console.log('onOuterFocus')
|
||||
if (this.disabled) {
|
||||
e.preventDefault()
|
||||
return
|
||||
|
|
@ -386,7 +396,7 @@ export default {
|
|||
// why not use setState?
|
||||
this.inputValue = this.getInputDOMNode().value = ''
|
||||
}
|
||||
this._emit('blur', this.getVLForOnChange(sValue))
|
||||
this.__emit('blur', this.getVLForOnChange(sValue))
|
||||
this.setOpenState(false)
|
||||
}, 10)
|
||||
},
|
||||
|
|
@ -528,7 +538,21 @@ export default {
|
|||
}
|
||||
return null
|
||||
},
|
||||
|
||||
inputClick (e) {
|
||||
if (this._focused) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
},
|
||||
inputBlur (e) {
|
||||
// console.log(e.target)
|
||||
this.clearBlurTime()
|
||||
this.blurTimer = setTimeout(() => {
|
||||
this.onOuterBlur()
|
||||
if (!this.disabled) {
|
||||
this.setOpenState(!this.openStatus, !this.openStatus)
|
||||
}
|
||||
}, 10)
|
||||
},
|
||||
_getInputElement () {
|
||||
const props = this.$props
|
||||
const inputElement = props.getInputElement
|
||||
|
|
@ -537,15 +561,15 @@ export default {
|
|||
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
|
||||
return (
|
||||
<div class={`${props.prefixCls}-search__field__wrap`}>
|
||||
{cloneElement(inputElement, {
|
||||
props: {
|
||||
attrs: {
|
||||
value: this.inputValue,
|
||||
disabled: props.disabled,
|
||||
|
||||
},
|
||||
class: inputCls,
|
||||
ref: 'inputRef',
|
||||
|
|
@ -553,9 +577,21 @@ export default {
|
|||
input: this.onInputChange,
|
||||
keydown: chaining(
|
||||
this.onInputKeydown,
|
||||
getEvents(inputElement).keydown || noop,
|
||||
inputEvents.keydown || noop,
|
||||
this.$listeners.inputKeydown
|
||||
),
|
||||
// focus: chaining(
|
||||
// this.onOuterFocus,
|
||||
// inputEvents.focus || noop,
|
||||
// ),
|
||||
blur: chaining(
|
||||
this.inputBlur,
|
||||
inputEvents.blur || noop,
|
||||
),
|
||||
click: chaining(
|
||||
this.inputClick,
|
||||
inputEvents.click || noop,
|
||||
),
|
||||
},
|
||||
})}
|
||||
<span
|
||||
|
|
@ -587,8 +623,8 @@ export default {
|
|||
},
|
||||
|
||||
setOpenState (open, needFocus) {
|
||||
const { $props: props, $data: state } = this
|
||||
if (state.sOpen === open) {
|
||||
const { $props: props, openStatus } = this
|
||||
if (openStatus === open) {
|
||||
this.maybeFocus(open, needFocus)
|
||||
return
|
||||
}
|
||||
|
|
@ -858,7 +894,9 @@ 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) {
|
||||
|
|
@ -874,7 +912,39 @@ export default {
|
|||
}
|
||||
this.sOpen = sOpen
|
||||
},
|
||||
getOptionsAndOpenStatus () {
|
||||
let sOpen = this.sOpen
|
||||
if (this.skipAdjustOpen) {
|
||||
return {
|
||||
option: 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) {
|
||||
options = this.renderFilterOptions()
|
||||
}
|
||||
this._options = options
|
||||
|
||||
if (isMultipleOrTagsOrCombobox($props) || !showSearch) {
|
||||
if (sOpen && !options.length) {
|
||||
sOpen = false
|
||||
this.hiddenForNoOptions = true
|
||||
}
|
||||
// Keep menu open if there are options and hidden for no options before
|
||||
if (this.hiddenForNoOptions && options.length) {
|
||||
sOpen = true
|
||||
this.hiddenForNoOptions = false
|
||||
}
|
||||
}
|
||||
this.openStatus = sOpen
|
||||
return {
|
||||
options,
|
||||
open: sOpen,
|
||||
}
|
||||
},
|
||||
renderFilterOptions () {
|
||||
const { inputValue } = this
|
||||
const { $slots, tags, filterOption, notFoundContent } = this
|
||||
|
|
@ -1030,8 +1100,8 @@ export default {
|
|||
return sel
|
||||
},
|
||||
|
||||
renderTopControlNode () {
|
||||
const { sValue, sOpen, inputValue, $props: props } = this
|
||||
renderTopControlNode (openStatus) {
|
||||
const { sValue, inputValue, $props: props } = this
|
||||
const {
|
||||
choiceTransitionName,
|
||||
prefixCls,
|
||||
|
|
@ -1051,7 +1121,7 @@ export default {
|
|||
if (!showSearch) {
|
||||
showSelectedValue = true
|
||||
} else {
|
||||
if (sOpen) {
|
||||
if (openStatus) {
|
||||
showSelectedValue = !inputValue
|
||||
if (showSelectedValue) {
|
||||
opacity = 0.4
|
||||
|
|
@ -1084,7 +1154,7 @@ export default {
|
|||
class={`${prefixCls}-search ${prefixCls}-search--inline`}
|
||||
key='input'
|
||||
style={{
|
||||
display: sOpen ? 'block' : 'none',
|
||||
display: openStatus ? 'block' : 'none',
|
||||
}}
|
||||
>
|
||||
{this._getInputElement()}
|
||||
|
|
@ -1165,7 +1235,7 @@ export default {
|
|||
if (isMultipleOrTags(props) && choiceTransitionName) {
|
||||
const transitionProps = getTransitionProps(choiceTransitionName, {
|
||||
tag: 'ul',
|
||||
afterLeave: this.onChoiceAnimationLeave,
|
||||
// beforeEnter: this.onChoiceAnimationLeave,
|
||||
})
|
||||
innerNode = (
|
||||
<transition-group
|
||||
|
|
@ -1219,16 +1289,26 @@ export default {
|
|||
}
|
||||
return null
|
||||
},
|
||||
rootRefClick (e) {
|
||||
// e.stopPropagation()
|
||||
if (this._focused) {
|
||||
// this.getInputDOMNode().blur()
|
||||
this.onOuterBlur()
|
||||
} else {
|
||||
this.onOuterFocus()
|
||||
// this.getInputDOMNode().focus()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const props = this.$props
|
||||
const multiple = isMultipleOrTags(props)
|
||||
const { disabled, prefixCls, sOpen, inputValue, sValue, $listeners } = this
|
||||
const { options, open: openStatus } = this.getOptionsAndOpenStatus()
|
||||
const { disabled, prefixCls, inputValue, sValue, $listeners } = this
|
||||
const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners
|
||||
const ctrlNode = this.renderTopControlNode()
|
||||
const ctrlNode = this.renderTopControlNode(openStatus)
|
||||
let extraSelectionProps = {}
|
||||
const options = this._options
|
||||
if (!isMultipleOrTagsOrCombobox(props)) {
|
||||
extraSelectionProps = {
|
||||
onKeyDown: this.onKeyDown,
|
||||
|
|
@ -1237,13 +1317,14 @@ export default {
|
|||
}
|
||||
const rootCls = {
|
||||
[prefixCls]: 1,
|
||||
[`${prefixCls}-open`]: sOpen,
|
||||
[`${prefixCls}-focused`]: sOpen || !!this._focused,
|
||||
[`${prefixCls}-open`]: openStatus,
|
||||
[`${prefixCls}-focused`]: openStatus || !!this._focused,
|
||||
[`${prefixCls}-combobox`]: isCombobox(props),
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-enabled`]: !disabled,
|
||||
[`${prefixCls}-allow-clear`]: !!props.allowClear,
|
||||
}
|
||||
console.log(options)
|
||||
return (
|
||||
<SelectTrigger
|
||||
dropdownAlign={props.dropdownAlign}
|
||||
|
|
@ -1260,7 +1341,7 @@ export default {
|
|||
options={options}
|
||||
multiple={multiple}
|
||||
disabled={disabled}
|
||||
visible={sOpen}
|
||||
visible={openStatus}
|
||||
inputValue={inputValue}
|
||||
value={sValue}
|
||||
firstActiveValue={props.firstActiveValue}
|
||||
|
|
@ -1277,8 +1358,9 @@ export default {
|
|||
>
|
||||
<div
|
||||
ref='rootRef'
|
||||
onBlur={this.onOuterBlur}
|
||||
onFocus={this.onOuterFocus}
|
||||
// onBlur={this.onOuterBlur}
|
||||
// onFocus={this.onOuterFocus}
|
||||
onClick={this.rootRefClick}
|
||||
class={classnames(rootCls)}
|
||||
>
|
||||
<div
|
||||
|
|
@ -1289,8 +1371,9 @@ export default {
|
|||
role='combobox'
|
||||
aria-autocomplete='list'
|
||||
aria-haspopup='true'
|
||||
aria-expanded={sOpen}
|
||||
aria-expanded={openStatus}
|
||||
{...extraSelectionProps}
|
||||
// onClick={this.stopPropagation}
|
||||
>
|
||||
{ctrlNode}
|
||||
{this.renderClear()}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ export default {
|
|||
value: PropTypes.array,
|
||||
// children: PropTypes.any,
|
||||
showAction: PropTypes.arrayOf(PropTypes.string),
|
||||
combobox: PropTypes.bool,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -176,7 +177,6 @@ export default {
|
|||
builtinPlacements: BUILT_IN_PLACEMENTS,
|
||||
prefixCls: dropdownPrefixCls,
|
||||
popupTransitionName: this.getDropdownTransitionName(),
|
||||
popup: popupElement,
|
||||
popupAlign: dropdownAlign,
|
||||
popupVisible: visible,
|
||||
getPopupContainer,
|
||||
|
|
@ -191,6 +191,9 @@ export default {
|
|||
return (
|
||||
<Trigger {...triggerProps}>
|
||||
{$slots.default}
|
||||
<template slot='popup'>
|
||||
{popupElement}
|
||||
</template>
|
||||
</Trigger>
|
||||
)
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue