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

Merge branch 'master' of https://github.com/vueComponent/ant-design

Browse Source
pull/165/head
wangxueliang 7 years ago
parent dc9c052bbd 75bf88dbe4
commit 31556d4cc4
4 changed files with 126 additions and 39 deletions
Show Stats Download Patch File Download Diff File

5
components/trigger/Popup.vue
Unescape View File

@ -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({

4
components/trigger/index.vue
Unescape View File

@ -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

151
components/vc-select/Select.vue
Unescape View File

@ -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()}

5
components/vc-select/SelectTrigger.vue
Unescape View File

@ -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>
)
},

Write Preview
Loading…
Cancel
Save