ant-design-vue/components/vc-select/Select.jsx

1579 lines
45 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-02-07 10:56:58 +00:00
import KeyCode from '../_util/KeyCode'
import PropTypes from '../_util/vue-types'
import classnames from 'classnames'
import classes from 'component-classes'
import { Item as MenuItem, ItemGroup as MenuItemGroup } from '../vc-menu'
import warning from 'warning'
2018-02-12 03:47:57 +00:00
import Option from './Option'
2018-05-06 12:37:39 +00:00
import { hasProp, getSlotOptions, getPropsData, getValueByProp as getValue, getComponentFromProp, getEvents, getClass, getStyle, getAttrs } from '../_util/props-util'
2018-02-07 10:56:58 +00:00
import getTransitionProps from '../_util/getTransitionProps'
2018-02-28 15:30:40 +00:00
import { cloneElement } from '../_util/vnode'
2018-02-07 10:56:58 +00:00
import BaseMixin from '../_util/BaseMixin'
import {
getPropValue,
getValuePropValue,
isCombobox,
isMultipleOrTags,
isMultipleOrTagsOrCombobox,
isSingleMode,
toArray,
findIndexInValueByKey,
UNSELECTABLE_ATTRIBUTE,
UNSELECTABLE_STYLE,
preventDefaultEvent,
findFirstMenuItem,
includesSeparators,
splitBySeparators,
findIndexInValueByLabel,
defaultFilterFn,
validateOptionValue,
} from './util'
import SelectTrigger from './SelectTrigger'
import { SelectPropTypes } from './PropTypes'
function noop () {}
function chaining (...fns) {
return function (...args) { // eslint-disable-line
// eslint-disable-line
for (let i = 0; i < fns.length; i++) {
if (fns[i] && typeof fns[i] === 'function') {
fns[i].apply(this, args)
}
}
}
}
export default {
2018-05-06 12:37:39 +00:00
inheritAttrs: false,
2018-02-07 10:56:58 +00:00
name: 'Select',
mixins: [BaseMixin],
props: {
...SelectPropTypes,
prefixCls: SelectPropTypes.prefixCls.def('rc-select'),
defaultOpen: PropTypes.bool.def(false),
labelInValue: SelectPropTypes.labelInValue.def(false),
defaultActiveFirstOption: SelectPropTypes.defaultActiveFirstOption.def(true),
showSearch: SelectPropTypes.showSearch.def(true),
allowClear: SelectPropTypes.allowClear.def(false),
placeholder: SelectPropTypes.placeholder.def(''),
showArrow: SelectPropTypes.showArrow.def(true),
dropdownMatchSelectWidth: PropTypes.bool.def(true),
dropdownStyle: SelectPropTypes.dropdownStyle.def({}),
dropdownMenuStyle: PropTypes.object.def({}),
optionFilterProp: SelectPropTypes.optionFilterProp.def('value'),
optionLabelProp: SelectPropTypes.optionLabelProp.def('value'),
2018-02-11 10:04:31 +00:00
notFoundContent: PropTypes.any.def('Not Found'),
2018-02-07 10:56:58 +00:00
backfill: PropTypes.bool.def(false),
showAction: SelectPropTypes.showAction.def(['click']),
2018-02-07 15:03:47 +00:00
combobox: PropTypes.bool.def(false),
2018-03-14 02:36:52 +00:00
tokenSeparators: PropTypes.arrayOf(PropTypes.string).def([]),
2018-02-07 10:56:58 +00:00
// onChange: noop,
// onFocus: noop,
// onBlur: noop,
// onSelect: noop,
// onSearch: noop,
// onDeselect: noop,
// onInputKeydown: noop,
},
2018-02-25 08:48:19 +00:00
model: {
prop: 'value',
event: 'change',
},
2018-02-07 10:56:58 +00:00
data () {
2018-02-23 03:28:43 +00:00
this.labelMap = new Map()
this.titleMap = new Map()
2018-02-07 10:56:58 +00:00
let sValue = []
2018-02-23 03:28:43 +00:00
const { value, defaultValue, combobox, open, defaultOpen } = this
2018-02-07 10:56:58 +00:00
if (hasProp(this, 'value')) {
sValue = toArray(value)
} else {
sValue = toArray(defaultValue)
}
2018-02-22 10:36:35 +00:00
if (this.labelInValue) {
sValue.forEach(v => {
v.key = v.key !== undefined ? v.key : v.value
})
} else {
sValue = sValue.map(v => {
return {
key: v,
}
})
}
2018-02-23 03:28:43 +00:00
this.initLabelAndTitleMap(sValue)
2018-02-07 10:56:58 +00:00
let inputValue = ''
if (combobox) {
inputValue = sValue.length
2018-02-22 14:09:03 +00:00
? this.labelMap.get((sValue[0].key))
2018-02-07 10:56:58 +00:00
: ''
}
let sOpen = open
if (sOpen === undefined) {
sOpen = defaultOpen
}
2018-02-12 03:47:57 +00:00
this._valueOptions = []
if (sValue.length > 0) {
this._valueOptions = this.getOptionsByValue(sValue)
}
2018-02-07 10:56:58 +00:00
return {
sValue,
inputValue,
sOpen,
}
},
2018-02-22 14:09:03 +00:00
2018-02-07 10:56:58 +00:00
mounted () {
this.$nextTick(() => {
this.autoFocus && this.focus()
})
},
2018-02-07 15:03:47 +00:00
watch: {
2018-02-12 10:10:51 +00:00
value (val) {
2018-02-22 10:36:35 +00:00
let sValue = toArray(val)
if (this.labelInValue) {
sValue.forEach(v => {
v.key = v.key !== undefined ? v.key : v.value
})
} else {
sValue = sValue.map(v => {
return {
key: v,
}
})
}
this.sValue = sValue
2018-02-26 10:44:06 +00:00
sValue.forEach((val) => {
const key = val.key
let { label, title } = val
label = label === undefined ? this.labelMap.get(key) : label
title = title === undefined ? this.titleMap.get(key) : title
this.labelMap.set(key, label === undefined ? key : label)
this.titleMap.set(key, title)
})
2018-02-22 10:36:35 +00:00
if (this.combobox) {
this.setState({
2018-02-22 14:09:03 +00:00
inputValue: sValue.length ? this.labelMap.get((sValue[0].key)) : '',
2018-02-22 10:36:35 +00:00
})
}
2018-02-12 10:10:51 +00:00
},
2018-02-22 14:09:03 +00:00
combobox (val) {
if (val) {
this.setState({
inputValue: this.sValue.length ? this.labelMap.get((this.sValue[0].key)) : '',
})
}
2018-02-07 15:03:47 +00:00
},
2018-02-07 10:56:58 +00:00
},
updated () {
this.$nextTick(() => {
if (isMultipleOrTags(this.$props)) {
const inputNode = this.getInputDOMNode()
const mirrorNode = this.getInputMirrorDOMNode()
if (inputNode.value) {
inputNode.style.width = ''
2018-02-26 14:19:48 +00:00
inputNode.style.width = `${mirrorNode.clientWidth + 10}px`
2018-02-07 10:56:58 +00:00
} else {
inputNode.style.width = ''
}
}
})
},
beforeDestroy () {
this.clearFocusTime()
this.clearBlurTime()
this.clearAdjustTimer()
if (this.dropdownContainer) {
document.body.removeChild(this.dropdownContainer)
this.dropdownContainer = null
}
},
methods: {
2018-02-23 03:28:43 +00:00
initLabelAndTitleMap (sValue) {
// 保留已选中的label and title
const labelArr = []
const titleArr = []
const values = sValue || this.sValue
values.forEach((val) => {
const key = val.key
let { label, title } = val
label = label === undefined ? this.labelMap.get(key) : label
title = title === undefined ? this.titleMap.get(key) : title
2018-05-19 06:07:35 +00:00
title = typeof title === 'string' ? title.trim() : title
2018-02-23 03:28:43 +00:00
labelArr.push([key, label === undefined ? key : label])
titleArr.push([key, title])
})
this.labelMap = new Map(labelArr)
this.titleMap = new Map(titleArr)
this.updateLabelAndTitleMap(this.$slots.default)
},
2018-02-22 09:19:47 +00:00
updateLabelAndTitleMap (children = []) {
children.forEach(child => {
2018-02-24 11:53:21 +00:00
if (!child.data || child.data.slot !== undefined) {
2018-02-22 09:19:47 +00:00
return
}
if (getSlotOptions(child).isSelectOptGroup) {
2018-02-22 10:36:35 +00:00
this.updateLabelAndTitleMap(child.componentOptions.children)
2018-02-22 09:19:47 +00:00
} else {
const key = getValuePropValue(child)
2018-02-22 10:36:35 +00:00
this.titleMap.set(key, getValue(child, 'title'))
this.labelMap.set(key, this.getLabelFromOption(child))
2018-02-22 09:19:47 +00:00
}
})
2018-02-22 07:09:03 +00:00
},
2018-02-07 10:56:58 +00:00
onInputChange (event) {
const { tokenSeparators } = this
const val = event.target.value
if (
isMultipleOrTags(this.$props) &&
2018-03-14 02:36:52 +00:00
tokenSeparators.length &&
2018-02-07 10:56:58 +00:00
includesSeparators(val, tokenSeparators)
) {
2018-03-14 02:36:52 +00:00
const nextValue = this.getValueByInput(val)
2018-02-07 10:56:58 +00:00
this.fireChange(nextValue)
this.setOpenState(false, true)
this.setInputValue('', false)
return
}
this.setInputValue(val)
this.setState({
sOpen: true,
})
if (isCombobox(this.$props)) {
this.fireChange([
{
key: val,
},
])
}
},
onDropdownVisibleChange (open) {
if (open && !this._focused) {
this.clearBlurTime()
this.timeoutFocus()
this._focused = true
this.updateFocusClassName()
}
this.setOpenState(open)
},
// combobox ignore
onKeyDown (event) {
2018-02-08 13:58:43 +00:00
const { disabled, openStatus } = this
2018-02-07 10:56:58 +00:00
if (disabled) {
return
}
const keyCode = event.keyCode
2018-02-08 13:58:43 +00:00
if (openStatus && !this.getInputDOMNode()) {
2018-02-07 10:56:58 +00:00
this.onInputKeydown(event)
} else if (keyCode === KeyCode.ENTER || keyCode === KeyCode.DOWN) {
this.setOpenState(true)
event.preventDefault()
}
},
onInputKeydown (event) {
2018-02-08 13:58:43 +00:00
const { disabled, openStatus, sValue, $props } = this
2018-02-07 10:56:58 +00:00
if (disabled) {
return
}
const keyCode = event.keyCode
if (
isMultipleOrTags($props) &&
!event.target.value &&
keyCode === KeyCode.BACKSPACE
) {
event.preventDefault()
if (sValue.length) {
this.removeSelected(sValue[sValue.length - 1].key)
}
return
}
if (keyCode === KeyCode.DOWN) {
2018-02-08 13:58:43 +00:00
if (!openStatus) {
2018-02-07 10:56:58 +00:00
this.openIfHasChildren()
event.preventDefault()
event.stopPropagation()
return
}
} else if (keyCode === KeyCode.ESC) {
2018-02-08 13:58:43 +00:00
if (openStatus) {
2018-02-07 10:56:58 +00:00
this.setOpenState(false)
event.preventDefault()
event.stopPropagation()
}
return
}
2018-02-08 13:58:43 +00:00
if (openStatus) {
2018-02-07 10:56:58 +00:00
const menu = this.$refs.selectTriggerRef.getInnerMenu()
if (menu && menu.onKeyDown(event, this.handleBackfill)) {
event.preventDefault()
event.stopPropagation()
}
}
},
onMenuSelect ({ item }) {
let sValue = this.sValue
const props = this.$props
const selectedValue = getValuePropValue(item)
2018-02-22 10:36:35 +00:00
const selectedLabel = this.labelMap.get(selectedValue)
2018-02-07 10:56:58 +00:00
const lastValue = sValue[sValue.length - 1]
2018-02-12 03:47:57 +00:00
this.fireSelect({
key: selectedValue,
label: selectedLabel,
})
2018-02-22 10:36:35 +00:00
const selectedTitle = this.titleMap.get(selectedValue)
2018-02-07 10:56:58 +00:00
if (isMultipleOrTags(props)) {
if (findIndexInValueByKey(sValue, selectedValue) !== -1) {
return
}
sValue = sValue.concat([
{
key: selectedValue,
label: selectedLabel,
title: selectedTitle,
},
])
} else {
if (isCombobox(props)) {
this.skipAdjustOpen = true
this.clearAdjustTimer()
this.skipAdjustOpenTimer = setTimeout(() => {
this.skipAdjustOpen = false
}, 0)
}
if (lastValue && lastValue.key === selectedValue && !lastValue.backfill) {
this.setOpenState(false, true)
return
}
sValue = [
{
key: selectedValue,
label: selectedLabel,
title: selectedTitle,
},
]
this.setOpenState(false, true)
}
this.fireChange(sValue)
let inputValue
if (isCombobox(props)) {
2018-02-28 11:07:04 +00:00
inputValue = selectedValue
2018-02-07 10:56:58 +00:00
} else {
inputValue = ''
}
this.setInputValue(inputValue, false)
},
onMenuDeselect ({ item, domEvent }) {
if (domEvent.type === 'click') {
this.removeSelected(getValuePropValue(item))
}
this.setInputValue('', false)
},
onArrowClick (e) {
2018-02-09 10:42:19 +00:00
e.stopPropagation()
2018-03-09 04:20:21 +00:00
e.preventDefault()
2018-02-09 10:42:19 +00:00
if (!this.disabled) {
this.setOpenState(!this.openStatus, !this.openStatus)
}
2018-02-07 10:56:58 +00:00
},
2018-02-08 10:56:58 +00:00
onPlaceholderClick (e) {
2018-02-26 14:19:48 +00:00
if (this.openStatus) {
2018-02-08 10:56:58 +00:00
e.stopPropagation()
}
2018-02-07 10:56:58 +00:00
if (this.getInputDOMNode()) {
this.getInputDOMNode().focus()
}
},
2018-02-26 10:44:06 +00:00
// onOuterFocus (e) {
// if (this.disabled) {
// e.preventDefault()
// return
// }
// this.clearBlurTime()
// if (
// !isMultipleOrTagsOrCombobox(this.$props) &&
// e.target === this.getInputDOMNode()
// ) {
// return
// }
// if (this._focused) {
// return
// }
// this._focused = true
// this.updateFocusClassName()
// this.timeoutFocus()
// },
2018-02-07 10:56:58 +00:00
onPopupFocus () {
// fix ie scrollbar, focus element again
this.maybeFocus(true, true)
},
2018-02-26 10:44:06 +00:00
// onOuterBlur (e) {
// if (this.disabled) {
// e.preventDefault()
// return
// }
// this.blurTimer = setTimeout(() => {
// this._focused = false
// this.updateFocusClassName()
// const props = this.$props
// let { sValue } = this
// const { inputValue } = this
// if (
// isSingleMode(props) &&
// props.showSearch &&
// inputValue &&
// props.defaultActiveFirstOption
// ) {
// const options = this._options || []
// if (options.length) {
// const firstOption = findFirstMenuItem(options)
// if (firstOption) {
// sValue = [
// {
// key: firstOption.key,
// label: this.getLabelFromOption(firstOption),
// },
// ]
// this.fireChange(sValue)
// }
// }
// } else if (isMultipleOrTags(props) && inputValue) {
// this.inputValue = this.getInputDOMNode().value = ''
// }
// this.$emit('blur', this.getVLForOnChange(sValue))
// this.setOpenState(false)
// }, 10)
// },
2018-02-07 10:56:58 +00:00
onClearSelection (event) {
const { inputValue, sValue, disabled } = this
if (disabled) {
return
}
if (inputValue || sValue.length) {
if (sValue.length) {
this.fireChange([])
}
2018-02-11 10:04:31 +00:00
this.setOpenState(false, true)
2018-02-07 10:56:58 +00:00
if (inputValue) {
this.setInputValue('')
}
2018-02-09 10:42:19 +00:00
if (this._focused) {
this._focused = false
} else {
event.stopPropagation()
}
} else {
event.stopPropagation()
2018-02-07 10:56:58 +00:00
}
},
onChoiceAnimationLeave () {
2018-02-12 10:10:51 +00:00
this.$refs.selectTriggerRef.$refs.triggerRef.forcePopupAlign()
2018-02-07 10:56:58 +00:00
},
2018-02-12 03:47:57 +00:00
getOptionsFromChildren (value, children = [], options = []) {
let values = value
if (!Array.isArray(value)) {
values = [value]
}
children.forEach(child => {
2018-02-24 11:53:21 +00:00
if (!child.data || child.data.slot !== undefined) {
2018-02-12 03:47:57 +00:00
return
}
if (getSlotOptions(child).isSelectOptGroup) {
this.getOptionsFromChildren(child.componentOptions.children, options)
} else {
const index = findIndexInValueByKey(values, getValuePropValue(child))
if (index !== -1) {
options[index] = child
}
}
})
values.forEach((v, i) => {
if (!options[i]) {
for (let j = 0; j < this._valueOptions.length; j++) {
const item = this._valueOptions[j]
if (getValuePropValue(item) === v.key) {
options[i] = item
break
}
}
if (!options[i]) {
2018-02-22 14:10:55 +00:00
options[i] = <Option value={v.key} key={v.key}>{this.labelMap.get(v.key)}</Option>
2018-02-12 03:47:57 +00:00
}
}
})
if (!Array.isArray(value)) {
return options[0]
}
return options
},
getSingleOptionByValueKey (key) {
return this.getOptionsFromChildren({
key,
label: key,
}, this.$slots.default)
},
2018-02-07 10:56:58 +00:00
2018-02-12 03:47:57 +00:00
getOptionsByValue (value) {
if (value === undefined) {
return undefined
}
if (value.length === 0) {
return []
}
return this.getOptionsFromChildren(value, this.$slots.default)
},
2018-02-26 10:44:06 +00:00
getLabelBySingleValue (children = [], value) {
2018-02-07 10:56:58 +00:00
if (value === undefined) {
return null
}
let label = null
children.forEach(child => {
2018-02-24 11:53:21 +00:00
if (!child.data || child.data.slot !== undefined) {
2018-02-07 10:56:58 +00:00
return
}
if (getSlotOptions(child).isSelectOptGroup) {
const maybe = this.getLabelBySingleValue(child.componentOptions.children, value)
if (maybe !== null) {
label = maybe
}
} else if (getValuePropValue(child) === value) {
label = this.getLabelFromOption(child)
}
})
return label
},
2018-02-26 10:44:06 +00:00
getValueByLabel (children = [], label) {
2018-02-07 10:56:58 +00:00
if (label === undefined) {
return null
}
let value = null
children.forEach(child => {
2018-02-24 11:53:21 +00:00
if (!child.data || child.data.slot !== undefined) {
2018-02-07 10:56:58 +00:00
return
}
if (getSlotOptions(child).isSelectOptGroup) {
const maybe = this.getValueByLabel(child.componentOptions.children, label)
if (maybe !== null) {
value = maybe
}
} else if (toArray(this.getLabelFromOption(child)).join('') === label) {
value = getValuePropValue(child)
}
})
return value
},
getLabelFromOption (child) {
2018-02-24 12:54:55 +00:00
let label = getPropValue(child, this.optionLabelProp)
if (Array.isArray(label) && label.length === 1 && !label[0].tag) {
label = label[0].text
}
return label
2018-02-07 10:56:58 +00:00
},
getLabelFromProps (value) {
2018-02-22 04:07:37 +00:00
return this.getLabelByValue(this.$slots.default || [], value)
2018-02-07 10:56:58 +00:00
},
getVLForOnChange (vls_) {
let vls = vls_
if (vls !== undefined) {
if (!this.labelInValue) {
vls = vls.map(v => v.key)
} else {
2018-02-22 14:09:03 +00:00
vls = vls.map(vl => ({ key: vl.key, label: this.labelMap.get(vl.key) }))
2018-02-07 10:56:58 +00:00
}
return isMultipleOrTags(this.$props) ? vls : vls[0]
}
return vls
},
getLabelByValue (children, value) {
const label = this.getLabelBySingleValue(children, value)
if (label === null) {
return value
}
return label
},
getDropdownContainer () {
if (!this.dropdownContainer) {
this.dropdownContainer = document.createElement('div')
document.body.appendChild(this.dropdownContainer)
}
return this.dropdownContainer
},
getPlaceholderElement () {
// const { props, state } = this
const { inputValue, sValue, placeholder, prefixCls, $props } = this
let hidden = false
if (inputValue) {
hidden = true
}
if (sValue.length) {
hidden = true
}
if (isCombobox($props) && sValue.length === 1 && !sValue[0].key) {
hidden = false
}
if (placeholder) {
2018-02-07 15:03:47 +00:00
const p = {
on: {
mousedown: preventDefaultEvent,
click: this.onPlaceholderClick,
},
attrs: UNSELECTABLE_ATTRIBUTE,
style: {
display: hidden ? 'none' : 'block',
...UNSELECTABLE_STYLE,
},
class: `${prefixCls}-selection__placeholder`,
}
2018-02-07 10:56:58 +00:00
return (
2018-02-07 15:03:47 +00:00
<div {...p}>
2018-02-07 10:56:58 +00:00
{placeholder}
</div>
)
}
return null
},
2018-02-08 10:56:58 +00:00
inputClick (e) {
2018-02-26 14:19:48 +00:00
if (this.openStatus) {
2018-03-01 04:34:31 +00:00
this.clearBlurTime()
2018-02-26 14:19:48 +00:00
e.stopPropagation()
} else {
this._focused = false
2018-02-08 10:56:58 +00:00
}
},
inputBlur (e) {
2018-02-08 13:58:43 +00:00
this.clearBlurTime()
2018-02-11 10:04:31 +00:00
if (this.disabled) {
return
}
2018-02-08 13:58:43 +00:00
this.blurTimer = setTimeout(() => {
2018-02-11 10:04:31 +00:00
this._focused = false
this.updateFocusClassName()
const props = this.$props
let { sValue } = this
const { inputValue } = this
if (
isSingleMode(props) &&
props.showSearch &&
inputValue &&
props.defaultActiveFirstOption
) {
const options = this._options || []
if (options.length) {
const firstOption = findFirstMenuItem(options)
if (firstOption) {
sValue = [
{
key: firstOption.key,
2018-02-22 10:36:35 +00:00
label: this.labelMap.get(firstOption.key),
2018-02-11 10:04:31 +00:00
},
]
this.fireChange(sValue)
}
}
} else if (isMultipleOrTags(props) && inputValue) {
this.inputValue = this.getInputDOMNode().value = ''
2018-03-14 02:36:52 +00:00
sValue = this.getValueByInput(inputValue)
this.fireChange(sValue)
2018-02-08 13:58:43 +00:00
}
2018-02-24 10:12:24 +00:00
this.$emit('blur', this.getVLForOnChange(sValue))
2018-02-11 10:04:31 +00:00
this.setOpenState(false)
2018-02-08 13:58:43 +00:00
}, 10)
2018-02-08 10:56:58 +00:00
},
2018-02-09 10:42:19 +00:00
inputFocus (e) {
this.clearBlurTime()
2018-02-11 10:04:31 +00:00
this.clearFocusTime()
this.timeoutFocus()
2018-02-09 10:42:19 +00:00
},
2018-02-07 10:56:58 +00:00
_getInputElement () {
const props = this.$props
2018-05-06 12:37:39 +00:00
const attrs = getAttrs(this)
2018-02-07 10:56:58 +00:00
const inputElement = props.getInputElement
? props.getInputElement()
2018-05-06 12:37:39 +00:00
: <input id={attrs.id} autoComplete='off'/>
2018-02-07 10:56:58 +00:00
const inputCls = classnames(getClass(inputElement), {
[`${props.prefixCls}-search__field`]: true,
})
2018-02-08 10:56:58 +00:00
const inputEvents = getEvents(inputElement)
2018-02-07 10:56:58 +00:00
// https://github.com/ant-design/ant-design/issues/4992#issuecomment-281542159
// Add space to the end of the inputValue as the width measurement tolerance
2018-02-09 10:42:19 +00:00
inputElement.data = inputElement.data || {}
2018-02-07 10:56:58 +00:00
return (
2018-03-01 04:34:31 +00:00
<div class={`${props.prefixCls}-search__field__wrap`} onClick={this.inputClick}>
2018-02-07 10:56:58 +00:00
{cloneElement(inputElement, {
2018-02-28 11:07:04 +00:00
props: {
disabled: props.disabled,
value: this.inputValue,
},
2018-02-08 10:56:58 +00:00
attrs: {
2018-02-09 10:42:19 +00:00
...(inputElement.data.attrs || {}),
2018-02-07 10:56:58 +00:00
disabled: props.disabled,
2018-02-26 14:19:48 +00:00
value: this.inputValue,
2018-02-07 10:56:58 +00:00
},
2018-02-09 10:42:19 +00:00
domProps: {
value: this.inputValue,
},
2018-02-07 10:56:58 +00:00
class: inputCls,
ref: 'inputRef',
on: {
2018-02-07 15:03:47 +00:00
input: this.onInputChange,
keydown: chaining(
2018-02-07 10:56:58 +00:00
this.onInputKeydown,
2018-02-28 15:30:40 +00:00
inputEvents.keydown,
2018-02-07 10:56:58 +00:00
this.$listeners.inputKeydown
),
2018-02-09 10:42:19 +00:00
focus: chaining(
this.inputFocus,
2018-02-28 15:30:40 +00:00
inputEvents.focus,
2018-02-09 10:42:19 +00:00
),
2018-02-08 10:56:58 +00:00
blur: chaining(
this.inputBlur,
2018-02-28 15:30:40 +00:00
inputEvents.blur,
2018-02-08 10:56:58 +00:00
),
2018-02-07 10:56:58 +00:00
},
})}
<span
ref='inputMirrorRef'
class={`${props.prefixCls}-search__field__mirror`}
>
{this.inputValue}&nbsp;
</span>
</div>
)
},
getInputDOMNode () {
return this.$refs.topCtrlRef
? this.$refs.topCtrlRef.querySelector('input,textarea,div[contentEditable]')
: this.$refs.inputRef
},
getInputMirrorDOMNode () {
return this.$refs.inputMirrorRef
},
getPopupDOMNode () {
return this.$refs.selectTriggerRef.getPopupDOMNode()
},
getPopupMenuComponent () {
return this.$refs.selectTriggerRef.getInnerMenu()
},
2018-02-11 10:04:31 +00:00
setOpenState (open, needFocus) {
2018-02-08 13:58:43 +00:00
const { $props: props, openStatus } = this
2018-02-11 10:04:31 +00:00
if (openStatus === open) {
2018-02-07 10:56:58 +00:00
this.maybeFocus(open, needFocus)
return
}
const nextState = {
sOpen: open,
}
// clear search input value when open is false in singleMode.
if (!open && isSingleMode(props) && props.showSearch) {
this.setInputValue('')
}
if (!open) {
this.maybeFocus(open, needFocus)
}
this.setState(nextState, () => {
if (open) {
this.maybeFocus(open, needFocus)
}
})
},
setInputValue (inputValue, fireSearch = true) {
if (inputValue !== this.inputValue) {
this.setState({
inputValue,
})
if (fireSearch) {
2018-02-24 10:12:24 +00:00
this.$emit('search', inputValue)
2018-02-07 10:56:58 +00:00
}
}
},
2018-03-14 02:36:52 +00:00
getValueByInput (string) {
const { multiple, tokenSeparators, $slots } = this
let nextValue = this.sValue
splitBySeparators(string, tokenSeparators).forEach(label => {
const selectedValue = { key: label, label }
if (findIndexInValueByLabel(nextValue, label) === -1) {
if (multiple) {
const value = this.getValueByLabel($slots.default, label)
if (value) {
selectedValue.key = value
nextValue = nextValue.concat(selectedValue)
}
} else {
nextValue = nextValue.concat(selectedValue)
}
}
this.fireSelect({
key: label,
label,
})
})
return nextValue
},
2018-02-07 10:56:58 +00:00
focus () {
2018-02-07 15:03:47 +00:00
if (isSingleMode(this.$props)) {
2018-02-07 10:56:58 +00:00
this.$refs.selectionRef.focus()
} else {
this.getInputDOMNode().focus()
}
},
blur () {
2018-02-07 15:03:47 +00:00
if (isSingleMode(this.$props)) {
2018-02-07 10:56:58 +00:00
this.$refs.selectionRef.blur()
} else {
this.getInputDOMNode().blur()
}
},
handleBackfill (item) {
if (!this.backfill || !(isSingleMode(this.$props) || isCombobox(this.$props))) {
return
}
const key = getValuePropValue(item)
2018-02-22 10:36:35 +00:00
const label = this.labelMap.get(key)
2018-02-07 10:56:58 +00:00
const backfillValue = {
key,
label,
backfill: true,
}
if (isCombobox(this.$props)) {
this.setInputValue(key, false)
}
this.setState({
sValue: [backfillValue],
})
},
_filterOption (input, child, defaultFilter = defaultFilterFn) {
const { sValue } = this
const lastValue = sValue[sValue.length - 1]
if (!input || (lastValue && lastValue.backfill)) {
return true
}
let filterFn = this.filterOption
if (hasProp(this, 'filterOption')) {
if (this.filterOption === true) {
filterFn = defaultFilter
}
} else {
filterFn = defaultFilter
}
if (!filterFn) {
return true
} else if (typeof filterFn === 'function') {
return filterFn.call(this, input, child)
} else if (getValue(child, 'disabled')) {
return false
}
return true
},
timeoutFocus () {
if (this.focusTimer) {
this.clearFocusTime()
}
this.focusTimer = setTimeout(() => {
2018-02-12 10:10:51 +00:00
this._focused = true
this.updateFocusClassName()
2018-02-24 10:12:24 +00:00
this.$emit('focus')
2018-02-07 10:56:58 +00:00
}, 10)
},
clearFocusTime () {
if (this.focusTimer) {
clearTimeout(this.focusTimer)
this.focusTimer = null
}
},
clearBlurTime () {
if (this.blurTimer) {
clearTimeout(this.blurTimer)
this.blurTimer = null
}
},
clearAdjustTimer () {
if (this.skipAdjustOpenTimer) {
clearTimeout(this.skipAdjustOpenTimer)
this.skipAdjustOpenTimer = null
}
},
updateFocusClassName () {
const { $refs: { rootRef }, prefixCls } = this
// avoid setState and its side effect
if (this._focused) {
classes(rootRef).add(`${prefixCls}-focused`)
} else {
classes(rootRef).remove(`${prefixCls}-focused`)
}
},
maybeFocus (open, needFocus) {
if (needFocus || open) {
const input = this.getInputDOMNode()
const { activeElement } = document
2018-02-07 15:03:47 +00:00
if (input && (open || isMultipleOrTagsOrCombobox(this.$props))) {
2018-02-07 10:56:58 +00:00
if (activeElement !== input) {
input.focus()
this._focused = true
}
} else {
if (activeElement !== this.$refs.selectionRef) {
this.$refs.selectionRef.focus()
this._focused = true
}
}
}
},
2018-02-22 14:09:03 +00:00
// addLabelToValue (value_) {
// let value = value_
// if (this.labelInValue) {
// value.forEach(v => {
// v.label = v.label || this.getLabelFromProps(v.key)
// })
// } else {
// value = value.map(v => {
// return {
// key: v,
// label: this.getLabelFromProps(v),
// }
// })
// }
// return value
// },
2018-02-07 10:56:58 +00:00
2018-02-22 14:09:03 +00:00
// addTitleToValue (children = [], values) {
// let nextValues = values
// const keys = values.map(v => v.key)
// children.forEach(child => {
// if (!child) {
// return
// }
// if (getSlotOptions(child).isSelectOptGroup) {
// nextValues = this.addTitleToValue(child.componentOptions.children, nextValues)
// } else {
// const value = getValuePropValue(child)
// const valueIndex = keys.indexOf(value)
// if (valueIndex > -1) {
// nextValues[valueIndex].title = getValue(child, 'title')
// }
// }
// })
// return nextValues
// },
2018-02-07 10:56:58 +00:00
removeSelected (selectedKey) {
const props = this.$props
if (props.disabled || this.isChildDisabled(selectedKey)) {
return
}
let label
const value = this.sValue.filter(singleValue => {
if (singleValue.key === selectedKey) {
2018-02-22 10:36:35 +00:00
label = this.labelMap.get(selectedKey)
2018-02-07 10:56:58 +00:00
}
return singleValue.key !== selectedKey
})
const canMultiple = isMultipleOrTags(props)
if (canMultiple) {
let event = selectedKey
if (props.labelInValue) {
event = {
key: selectedKey,
label,
}
}
2018-02-24 10:12:24 +00:00
this.$emit('deselect', event, this.getSingleOptionByValueKey(selectedKey))
2018-02-07 10:56:58 +00:00
}
this.fireChange(value)
},
openIfHasChildren () {
const { $props, $slots } = this
if (($slots.default && $slots.default.length) || isSingleMode($props)) {
this.setOpenState(true)
}
},
2018-02-12 03:47:57 +00:00
fireSelect (value) {
const { labelInValue } = this
2018-02-24 10:12:24 +00:00
this.$emit('select', labelInValue ? value : value.key, this.getSingleOptionByValueKey(value.key))
2018-02-12 03:47:57 +00:00
},
2018-02-07 10:56:58 +00:00
fireChange (value) {
2018-02-12 10:10:51 +00:00
if (!hasProp(this, 'value')) {
2018-02-07 10:56:58 +00:00
this.setState({
sValue: value,
})
}
2018-02-12 03:47:57 +00:00
const vls = this.getVLForOnChange(value)
const options = this.getOptionsByValue(value)
this._valueOptions = options
2018-02-24 10:12:24 +00:00
this.$emit('change', vls, isMultipleOrTags(this.$props) ? options : options[0])
2018-02-07 10:56:58 +00:00
},
isChildDisabled (key) {
2018-02-26 10:44:06 +00:00
return (this.$slots.default || []).some(child => {
2018-02-07 10:56:58 +00:00
const childValue = getValuePropValue(child)
2018-02-12 10:10:51 +00:00
return childValue === key && getValue(child, 'disabled')
2018-02-07 10:56:58 +00:00
})
},
2018-02-08 10:56:58 +00:00
getOptionsAndOpenStatus () {
let sOpen = this.sOpen
if (this.skipAdjustOpen) {
2018-02-09 10:42:19 +00:00
this.openStatus = sOpen
2018-02-08 10:56:58 +00:00
return {
2018-02-09 10:42:19 +00:00
options: this._options,
2018-02-08 10:56:58 +00:00
open: sOpen,
}
}
const { $props, showSearch } = this
let options = []
// If hidden menu due to no options, then it should be calculated again
2018-02-09 10:42:19 +00:00
if (sOpen || this.hiddenForNoOptions) {
2018-02-08 10:56:58 +00:00
options = this.renderFilterOptions()
}
this._options = options
2018-02-07 10:56:58 +00:00
2018-02-08 10:56:58 +00:00
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
}
}
2018-02-08 13:58:43 +00:00
this.openStatus = sOpen
2018-02-08 10:56:58 +00:00
return {
2018-02-08 13:58:43 +00:00
options,
2018-02-08 10:56:58 +00:00
open: sOpen,
}
},
2018-02-07 10:56:58 +00:00
renderFilterOptions () {
const { inputValue } = this
const { $slots, tags, filterOption, notFoundContent } = this
const menuItems = []
const childrenKeys = []
let options = this.renderFilterOptionsFromChildren(
$slots.default,
childrenKeys,
menuItems,
)
if (tags) {
// tags value must be string
let value = this.sValue || []
value = value.filter(singleValue => {
return (
childrenKeys.indexOf(singleValue.key) === -1 &&
(!inputValue ||
String(singleValue.key).indexOf(String(inputValue)) > -1)
)
})
value.forEach(singleValue => {
const key = singleValue.key
const menuItem = (
<MenuItem
style={UNSELECTABLE_STYLE}
2018-02-07 15:03:47 +00:00
{...{ attrs: UNSELECTABLE_ATTRIBUTE }}
2018-02-07 10:56:58 +00:00
value={key}
key={key}
>
{key}
</MenuItem>
)
options.push(menuItem)
menuItems.push(menuItem)
})
if (inputValue) {
const notFindInputItem = menuItems.every(option => {
// this.filterOption return true has two meaning,
// 1, some one exists after filtering
// 2, filterOption is set to false
// condition 2 does not mean the option has same value with inputValue
const filterFn = () => getValuePropValue(option) === inputValue
if (filterOption !== false) {
return !this._filterOption(
inputValue,
option,
filterFn
)
}
return !filterFn()
})
if (notFindInputItem) {
2018-02-07 15:03:47 +00:00
const p = {
attrs: UNSELECTABLE_ATTRIBUTE,
key: inputValue,
props: {
value: inputValue,
},
style: UNSELECTABLE_STYLE,
}
2018-02-07 10:56:58 +00:00
options.unshift(
2018-02-07 15:03:47 +00:00
<MenuItem {...p}>
2018-02-07 10:56:58 +00:00
{inputValue}
</MenuItem>
)
}
}
}
if (!options.length && notFoundContent) {
2018-02-07 15:03:47 +00:00
const p = {
attrs: UNSELECTABLE_ATTRIBUTE,
key: 'NOT_FOUND',
props: {
value: 'NOT_FOUND',
disabled: true,
},
style: UNSELECTABLE_STYLE,
}
2018-02-07 10:56:58 +00:00
options = [
2018-02-07 15:03:47 +00:00
<MenuItem {...p}>
2018-02-07 10:56:58 +00:00
{notFoundContent}
</MenuItem>,
]
}
return options
},
2018-02-11 10:04:31 +00:00
renderFilterOptionsFromChildren (children = [], childrenKeys, menuItems) {
2018-02-07 10:56:58 +00:00
const sel = []
const props = this.$props
const { inputValue } = this
const tags = props.tags
children.forEach(child => {
2018-02-24 11:53:21 +00:00
if (!child.data || child.data.slot !== undefined) {
2018-02-07 10:56:58 +00:00
return
}
if (getSlotOptions(child).isSelectOptGroup) {
const innerItems = this.renderFilterOptionsFromChildren(
child.componentOptions.children,
childrenKeys,
menuItems,
)
if (innerItems.length) {
2018-02-24 10:12:24 +00:00
let label = getComponentFromProp(child, 'label')
2018-02-07 10:56:58 +00:00
let key = child.key
if (!key && typeof label === 'string') {
key = label
} else if (!label && key) {
label = key
}
sel.push(
2018-02-28 11:07:04 +00:00
<MenuItemGroup key={key} title={label} class ={getClass(child)}>
2018-02-07 10:56:58 +00:00
{innerItems}
</MenuItemGroup>
)
}
return
}
warning(
2018-02-07 15:03:47 +00:00
getSlotOptions(child).isSelectOption,
2018-02-07 10:56:58 +00:00
'the children of `Select` should be `Select.Option` or `Select.OptGroup`, ' +
2018-02-07 15:03:47 +00:00
`instead of \`${getSlotOptions(child).name ||
2018-02-07 10:56:58 +00:00
getSlotOptions(child)}\`.`
)
const childValue = getValuePropValue(child)
validateOptionValue(childValue, this.$props)
if (this._filterOption(inputValue, child)) {
2018-02-07 15:03:47 +00:00
const p = {
attrs: UNSELECTABLE_ATTRIBUTE,
key: childValue,
props: {
value: childValue,
...getPropsData(child),
},
style: UNSELECTABLE_STYLE,
on: getEvents(child),
2018-02-28 11:07:04 +00:00
class: getClass(child),
2018-02-07 15:03:47 +00:00
}
2018-02-07 10:56:58 +00:00
const menuItem = (
2018-02-07 15:03:47 +00:00
<MenuItem {...p}>{child.componentOptions.children}</MenuItem>
2018-02-07 10:56:58 +00:00
)
sel.push(menuItem)
menuItems.push(menuItem)
}
if (tags && !getValue(child, 'disabled')) {
childrenKeys.push(childValue)
}
})
return sel
},
2018-02-08 13:58:43 +00:00
renderTopControlNode (openStatus) {
const { sValue, inputValue, $props: props } = this
2018-02-07 10:56:58 +00:00
const {
choiceTransitionName,
prefixCls,
maxTagTextLength,
maxTagCount,
maxTagPlaceholder,
showSearch,
} = props
const className = `${prefixCls}-selection__rendered`
// search input is inside topControlNode in single, multiple & combobox. 2016/04/13
let innerNode = null
if (isSingleMode(props)) {
let selectedValue = null
if (sValue.length) {
let showSelectedValue = false
let opacity = 1
if (!showSearch) {
showSelectedValue = true
} else {
2018-02-08 13:58:43 +00:00
if (openStatus) {
2018-02-07 10:56:58 +00:00
showSelectedValue = !inputValue
if (showSelectedValue) {
opacity = 0.4
}
} else {
showSelectedValue = true
}
}
const singleValue = sValue[0]
2018-02-24 12:54:55 +00:00
const key = singleValue.key
2018-05-19 06:07:35 +00:00
let title = this.titleMap.get(key) || this.labelMap.get(key)
if (Array.isArray(title)) {
title = ''
}
2018-02-07 10:56:58 +00:00
selectedValue = (
<div
key='value'
class={`${prefixCls}-selection-selected-value`}
2018-05-19 06:07:35 +00:00
title={title}
2018-02-07 10:56:58 +00:00
style={{
display: showSelectedValue ? 'block' : 'none',
opacity,
}}
>
2018-05-19 06:07:35 +00:00
{this.labelMap.get(key)}
2018-02-07 10:56:58 +00:00
</div>
)
}
if (!showSearch) {
innerNode = [selectedValue]
} else {
innerNode = [
selectedValue,
<div
class={`${prefixCls}-search ${prefixCls}-search--inline`}
key='input'
style={{
2018-02-08 13:58:43 +00:00
display: openStatus ? 'block' : 'none',
2018-02-07 10:56:58 +00:00
}}
>
{this._getInputElement()}
</div>,
]
}
} else {
let selectedValueNodes = []
let limitedCountValue = sValue
let maxTagPlaceholderEl
if (maxTagCount !== undefined && sValue.length > maxTagCount) {
limitedCountValue = limitedCountValue.slice(0, maxTagCount)
const omittedValues = this.getVLForOnChange(sValue.slice(maxTagCount, sValue.length))
let content = `+ ${sValue.length - maxTagCount} ...`
if (maxTagPlaceholder) {
content = typeof maxTagPlaceholder === 'function'
? maxTagPlaceholder(omittedValues) : maxTagPlaceholder
}
maxTagPlaceholderEl = (<li
style={UNSELECTABLE_STYLE}
2018-02-07 15:03:47 +00:00
unselectable='unselectable'
onMousedown={preventDefaultEvent}
2018-02-07 10:56:58 +00:00
class={`${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`}
key={'maxTagPlaceholder'}
title={content}
>
<div class={`${prefixCls}-selection__choice__content`}>{content}</div>
</li>)
}
if (isMultipleOrTags(props)) {
selectedValueNodes = limitedCountValue.map(singleValue => {
2018-02-22 10:36:35 +00:00
let content = this.labelMap.get(singleValue.key)
2018-02-22 14:09:03 +00:00
const title = this.titleMap.get(singleValue.key) || content
2018-02-07 10:56:58 +00:00
if (
maxTagTextLength &&
typeof content === 'string' &&
content.length > maxTagTextLength
) {
content = `${content.slice(0, maxTagTextLength)}...`
}
const disabled = this.isChildDisabled(singleValue.key)
const choiceClassName = disabled
? `${prefixCls}-selection__choice ${prefixCls}-selection__choice__disabled`
: `${prefixCls}-selection__choice`
return (
<li
style={UNSELECTABLE_STYLE}
2018-02-07 15:03:47 +00:00
unselectable='unselectable'
2018-02-07 10:56:58 +00:00
onMousedown={preventDefaultEvent}
class={choiceClassName}
key={singleValue.key}
title={title}
>
<div class={`${prefixCls}-selection__choice__content`}>
{content}
</div>
{disabled ? null : (
<span
class={`${prefixCls}-selection__choice__remove`}
onClick={this.removeSelected.bind(this, singleValue.key)}
/>)}
</li>
)
})
}
if (maxTagPlaceholderEl) {
selectedValueNodes.push(maxTagPlaceholderEl)
}
selectedValueNodes.push(
<li
class={`${prefixCls}-search ${prefixCls}-search--inline`}
key='__input'
>
{this._getInputElement()}
</li>
)
if (isMultipleOrTags(props) && choiceTransitionName) {
const transitionProps = getTransitionProps(choiceTransitionName, {
tag: 'ul',
2018-02-12 10:10:51 +00:00
afterLeave: this.onChoiceAnimationLeave,
2018-02-07 10:56:58 +00:00
})
innerNode = (
<transition-group
{...transitionProps}
>
{selectedValueNodes}
</transition-group>
)
} else {
innerNode = (
2018-02-12 10:10:51 +00:00
<ul>
2018-02-07 10:56:58 +00:00
{selectedValueNodes}
</ul>
)
}
}
return (
2018-02-24 12:54:55 +00:00
<div class={className} ref='topCtrlRef' onClick={this.topCtrlContainerClick}>
2018-02-07 10:56:58 +00:00
{this.getPlaceholderElement()}
{innerNode}
</div>
)
},
2018-02-24 12:54:55 +00:00
topCtrlContainerClick (e) {
if (this.openStatus && !isSingleMode(this.$props)) {
2018-02-12 06:45:26 +00:00
e.stopPropagation()
}
},
2018-02-07 10:56:58 +00:00
renderClear () {
const { prefixCls, allowClear, sValue, inputValue } = this
const clear = (
<span
key='clear'
onMousedown={preventDefaultEvent}
style={UNSELECTABLE_STYLE}
2018-02-07 15:03:47 +00:00
unselectable='unselectable'
2018-02-07 10:56:58 +00:00
class={`${prefixCls}-selection__clear`}
onClick={this.onClearSelection}
/>
)
if (!allowClear) {
return null
}
if (isCombobox(this.$props)) {
if (inputValue) {
return clear
}
return null
}
if (inputValue || sValue.length) {
return clear
}
return null
},
2018-02-26 10:44:06 +00:00
// rootRefClick (e) {
// // e.stopPropagation()
// if (this._focused) {
// // this.getInputDOMNode().blur()
// this.onOuterBlur()
// } else {
// this.onOuterFocus()
// // this.getInputDOMNode().focus()
// }
// },
2018-02-09 10:42:19 +00:00
selectionRefClick (e) {
e.stopPropagation()
if (!this.disabled) {
2018-02-12 10:10:51 +00:00
const input = this.getInputDOMNode()
2018-02-09 10:42:19 +00:00
if (this._focused && this.openStatus) {
this._focused = false
2018-02-11 10:04:31 +00:00
this.setOpenState(false, false)
2018-02-12 10:10:51 +00:00
input && input.blur()
2018-02-09 10:42:19 +00:00
} else {
2018-02-26 10:44:06 +00:00
this.clearBlurTime()
2018-02-09 10:42:19 +00:00
this._focused = true
2018-02-11 10:04:31 +00:00
this.setOpenState(true, true)
2018-02-12 10:10:51 +00:00
input && input.focus()
2018-02-09 10:42:19 +00:00
}
}
},
2018-02-11 10:50:23 +00:00
selectionRefFocus (e) {
2018-02-26 10:44:06 +00:00
if (this._focused || this.disabled) {
2018-02-11 10:50:23 +00:00
return
}
this._focused = true
this.updateFocusClassName()
},
2018-02-26 10:44:06 +00:00
selectionRefBlur (e) {
this._focused = false
this.updateFocusClassName()
},
2018-02-07 10:56:58 +00:00
},
render () {
2018-02-23 03:28:43 +00:00
this.initLabelAndTitleMap()
2018-02-07 10:56:58 +00:00
const props = this.$props
const multiple = isMultipleOrTags(props)
2018-02-12 06:45:26 +00:00
const preOptions = this._options || []
2018-02-08 13:58:43 +00:00
const { options, open: openStatus } = this.getOptionsAndOpenStatus()
const { disabled, prefixCls, inputValue, sValue, $listeners } = this
2018-02-07 10:56:58 +00:00
const { mouseenter = noop, mouseleave = noop, popupScroll = noop } = $listeners
2018-02-08 13:58:43 +00:00
const ctrlNode = this.renderTopControlNode(openStatus)
2018-02-11 10:04:31 +00:00
const selectionProps = {
props: {},
attrs: {
role: 'combobox',
'aria-autocomplete': 'list',
'aria-haspopup': 'true',
'aria-expanded': openStatus.toString(),
},
on: {
click: this.selectionRefClick,
},
class: `${prefixCls}-selection ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`,
ref: 'selectionRef',
key: 'selection',
}
2018-02-07 10:56:58 +00:00
if (!isMultipleOrTagsOrCombobox(props)) {
2018-02-11 10:04:31 +00:00
selectionProps.on.keydown = this.onKeyDown
2018-02-11 10:50:23 +00:00
selectionProps.on.focus = this.selectionRefFocus
2018-02-26 10:44:06 +00:00
selectionProps.on.blur = this.selectionRefBlur
2018-02-11 10:04:31 +00:00
selectionProps.attrs.tabIndex = props.disabled ? -1 : 0
2018-02-07 10:56:58 +00:00
}
const rootCls = {
2018-05-06 12:37:39 +00:00
...getClass(this),
2018-02-26 10:44:06 +00:00
[prefixCls]: true,
2018-02-08 13:58:43 +00:00
[`${prefixCls}-open`]: openStatus,
[`${prefixCls}-focused`]: openStatus || !!this._focused,
2018-02-07 10:56:58 +00:00
[`${prefixCls}-combobox`]: isCombobox(props),
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-enabled`]: !disabled,
[`${prefixCls}-allow-clear`]: !!props.allowClear,
}
return (
<SelectTrigger
dropdownAlign={props.dropdownAlign}
2018-02-28 11:07:04 +00:00
dropdownClassName={props.dropdownClassName}
2018-02-07 10:56:58 +00:00
dropdownMatchSelectWidth={props.dropdownMatchSelectWidth}
defaultActiveFirstOption={props.defaultActiveFirstOption}
dropdownMenuStyle={props.dropdownMenuStyle}
transitionName={props.transitionName}
animation={props.animation}
prefixCls={props.prefixCls}
dropdownStyle={props.dropdownStyle}
combobox={props.combobox}
showSearch={props.showSearch}
2018-02-12 06:45:26 +00:00
options={options.length || openStatus ? options : preOptions}
2018-02-07 10:56:58 +00:00
multiple={multiple}
disabled={disabled}
2018-02-08 13:58:43 +00:00
visible={openStatus}
2018-02-07 10:56:58 +00:00
inputValue={inputValue}
value={sValue}
firstActiveValue={props.firstActiveValue}
onDropdownVisibleChange={this.onDropdownVisibleChange}
getPopupContainer={props.getPopupContainer}
onMenuSelect={this.onMenuSelect}
onMenuDeselect={this.onMenuDeselect}
onPopupScroll={popupScroll}
onPopupFocus={this.onPopupFocus}
onMouseenter={mouseenter}
onMouseleave={mouseleave}
showAction={props.showAction}
ref='selectTriggerRef'
>
<div
ref='rootRef'
2018-05-06 12:37:39 +00:00
style={getStyle(this)}
2018-02-12 03:47:57 +00:00
class={classnames(rootCls)}
// tabindex='-1'
2018-02-08 10:56:58 +00:00
// onBlur={this.onOuterBlur}
// onFocus={this.onOuterFocus}
2018-02-07 10:56:58 +00:00
>
2018-02-11 10:04:31 +00:00
<div {...selectionProps}>
2018-02-07 10:56:58 +00:00
{ctrlNode}
{this.renderClear()}
{multiple || !props.showArrow ? null : (
<span
key='arrow'
class={`${prefixCls}-arrow`}
style={UNSELECTABLE_STYLE}
2018-02-07 15:03:47 +00:00
unselectable='unselectable'
2018-02-09 10:42:19 +00:00
// onClick={this.onArrowClick}
2018-02-07 10:56:58 +00:00
>
<b />
</span>)}
</div>
</div>
</SelectTrigger>
)
},
}