ant-design-vue/components/vc-cascader/Cascader.jsx

324 lines
10 KiB
JavaScript

import PropTypes from '../_util/vue-types'
import Trigger from '../trigger'
import Menus from './Menus'
import KeyCode from '../_util/KeyCode'
import arrayTreeFilter from 'array-tree-filter'
import shallowEqualArrays from 'shallow-equal/arrays'
import { hasProp, getEvents } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin'
import { cloneElement } from '../_util/vnode'
const BUILT_IN_PLACEMENTS = {
bottomLeft: {
points: ['tl', 'bl'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
topLeft: {
points: ['bl', 'tl'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
bottomRight: {
points: ['tr', 'br'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
topRight: {
points: ['br', 'tr'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1,
},
},
}
export default {
props: {
value: PropTypes.array,
defaultValue: PropTypes.array,
options: PropTypes.array.def([]).isRequired,
// onChange: PropTypes.func,
// onPopupVisibleChange: PropTypes.func,
popupVisible: PropTypes.bool,
disabled: PropTypes.bool.def(false),
transitionName: PropTypes.string.def(''),
popupClassName: PropTypes.string.def(''),
popupStyle: PropTypes.object.def({}),
popupPlacement: PropTypes.string.def('bottomLeft'),
prefixCls: PropTypes.string.def('rc-cascader'),
dropdownMenuColumnStyle: PropTypes.object,
builtinPlacements: PropTypes.object.def(BUILT_IN_PLACEMENTS),
loadData: PropTypes.func,
changeOnSelect: PropTypes.bool,
// onKeyDown: PropTypes.func,
expandTrigger: PropTypes.string.def('click'),
},
mixins: [BaseMixin],
model: {
prop: 'value',
event: 'change',
},
data () {
let initialValue = []
const { value, defaultValue, popupVisible } = this
if (hasProp(this, 'value')) {
initialValue = value || []
} else if (hasProp(this, 'defaultValue')) {
initialValue = defaultValue || []
}
return {
sPopupVisible: popupVisible,
sActiveValue: initialValue,
sValue: initialValue,
}
},
watch: {
value (val, oldValue) {
if (!shallowEqualArrays(val, oldValue)) {
const newValues = {
value: oldValue || [],
activeValue: oldValue || [],
}
// allow activeValue diff from value
// https://github.com/ant-design/ant-design/issues/2767
if (hasProp(this, 'loadData')) {
delete newValues.activeValue
}
this.setState(newValues)
}
},
popupVisible (val) {
this.setState({
sPopupVisible: val,
})
},
},
methods: {
getPopupDOMNode () {
return this.$refs.trigger.getPopupDomNode()
},
getCurrentLevelOptions () {
const { options, sActiveValue = [] } = this
const result = arrayTreeFilter(options, (o, level) => o.value === sActiveValue[level])
if (result[result.length - 2]) {
return result[result.length - 2].children
}
return [...options].filter(o => !o.disabled)
},
getActiveOptions (activeValue) {
return arrayTreeFilter(this.options, (o, level) => o.value === activeValue[level])
},
setPopupVisible (popupVisible) {
if (!hasProp(this, 'popupVisible')) {
this.setState({ sPopupVisible: popupVisible })
}
// sync activeValue with value when panel open
if (popupVisible && !this.sVisible) {
this.setState({
sActiveValue: this.sValue,
})
}
this.__emit('popupVisibleChange', popupVisible)
},
handleChange (options, setProps, e) {
if (e.type !== 'keydown' || e.keyCode === KeyCode.ENTER) {
this.__emit('change', options.map(o => o.value), options)
this.setPopupVisible(setProps.visible)
}
},
handlePopupVisibleChange (popupVisible) {
this.setPopupVisible(popupVisible)
},
handleMenuSelect (targetOption, menuIndex, e) {
// Keep focused state for keyboard support
const triggerNode = this.$refs.trigger.getRootDomNode()
if (triggerNode && triggerNode.focus) {
triggerNode.focus()
}
const { changeOnSelect, loadData, expandTrigger } = this
if (!targetOption || targetOption.disabled) {
return
}
let { sActiveValue } = this
sActiveValue = sActiveValue.slice(0, menuIndex + 1)
sActiveValue[menuIndex] = targetOption.value
const activeOptions = this.getActiveOptions(sActiveValue)
if (targetOption.isLeaf === false && !targetOption.children && loadData) {
if (changeOnSelect) {
this.handleChange(activeOptions, { visible: true }, e)
}
this.setState({ sActiveValue })
loadData(activeOptions)
return
}
const newState = {}
if (!targetOption.children || !targetOption.children.length) {
this.handleChange(activeOptions, { visible: false }, e)
// set value to activeValue when select leaf option
newState.sValue = sActiveValue
// add e.type judgement to prevent `onChange` being triggered by mouseEnter
} else if (changeOnSelect && (e.type === 'click' || e.type === 'keydown')) {
if (expandTrigger === 'hover') {
this.handleChange(activeOptions, { visible: false }, e)
} else {
this.handleChange(activeOptions, { visible: true }, e)
}
// set value to activeValue on every select
newState.sValue = sActiveValue
}
newState.sActiveValue = sActiveValue
// not change the value by keyboard
if (hasProp(this, 'value') ||
(e.type === 'keydown' && e.keyCode !== KeyCode.ENTER)) {
delete newState.sValue
}
this.setState(newState)
},
handleKeyDown (e) {
const { $slots } = this
const children = $slots.default && $slots.default[0]
// https://github.com/ant-design/ant-design/issues/6717
// Don't bind keyboard support when children specify the onKeyDown
if (children) {
const keydown = getEvents(children).keydown
if (keydown) {
keydown(e)
return
}
}
const activeValue = [...this.sActiveValue]
const currentLevel = activeValue.length - 1 < 0 ? 0 : activeValue.length - 1
const currentOptions = this.getCurrentLevelOptions()
const currentIndex = currentOptions.map(o => o.value).indexOf(activeValue[currentLevel])
if (e.keyCode !== KeyCode.DOWN &&
e.keyCode !== KeyCode.UP &&
e.keyCode !== KeyCode.LEFT &&
e.keyCode !== KeyCode.RIGHT &&
e.keyCode !== KeyCode.ENTER &&
e.keyCode !== KeyCode.BACKSPACE &&
e.keyCode !== KeyCode.ESC) {
return
}
// Press any keys above to reopen menu
if (!this.sPopupVisible &&
e.keyCode !== KeyCode.BACKSPACE &&
e.keyCode !== KeyCode.LEFT &&
e.keyCode !== KeyCode.RIGHT &&
e.keyCode !== KeyCode.ESC) {
this.setPopupVisible(true)
return
}
if (e.keyCode === KeyCode.DOWN || e.keyCode === KeyCode.UP) {
let nextIndex = currentIndex
if (nextIndex !== -1) {
if (e.keyCode === KeyCode.DOWN) {
nextIndex += 1
nextIndex = nextIndex >= currentOptions.length ? 0 : nextIndex
} else {
nextIndex -= 1
nextIndex = nextIndex < 0 ? currentOptions.length - 1 : nextIndex
}
} else {
nextIndex = 0
}
activeValue[currentLevel] = currentOptions[nextIndex].value
} else if (e.keyCode === KeyCode.LEFT || e.keyCode === KeyCode.BACKSPACE) {
activeValue.splice(activeValue.length - 1, 1)
} else if (e.keyCode === KeyCode.RIGHT) {
if (currentOptions[currentIndex] && currentOptions[currentIndex].children) {
activeValue.push(currentOptions[currentIndex].children[0].value)
}
} else if (e.keyCode === KeyCode.ESC) {
this.setPopupVisible(false)
return
}
if (!activeValue || activeValue.length === 0) {
this.setPopupVisible(false)
}
const activeOptions = this.getActiveOptions(activeValue)
const targetOption = activeOptions[activeOptions.length - 1]
this.handleMenuSelect(targetOption, activeOptions.length - 1, e)
this.__emit('keydown', e)
},
},
render () {
const {
$props, $slots, sValue, sActiveValue, handleMenuSelect,
sPopupVisible, handlePopupVisibleChange, handleKeyDown,
} = this
const {
prefixCls, transitionName, popupClassName, options, disabled,
builtinPlacements, popupPlacement, ...restProps } = $props
// Did not show popup when there is no options
let menus = <div />
let emptyMenuClassName = ''
if (options && options.length > 0) {
const menusProps = {
props: {
...$props,
value: sValue,
activeValue: sActiveValue,
visible: sPopupVisible,
},
on: {
select: handleMenuSelect,
},
}
menus = (
<Menus
{...menusProps}
/>
)
} else {
emptyMenuClassName = ` ${prefixCls}-menus-empty`
}
const triggerProps = {
props: {
...restProps,
disabled: disabled,
popupPlacement: popupPlacement,
builtinPlacements: builtinPlacements,
popupTransitionName: transitionName,
action: disabled ? [] : ['click'],
popupVisible: disabled ? false : sPopupVisible,
prefixCls: `${prefixCls}-menus`,
popupClassName: popupClassName + emptyMenuClassName,
},
on: {
popupVisibleChange: handlePopupVisibleChange,
},
ref: 'trigger',
}
return (
<Trigger {...triggerProps}>
{$slots.default && cloneElement($slots.default[0], {
on: {
keydown: handleKeyDown,
},
attrs: {
tabIndex: disabled ? undefined : 0,
},
})}
<template slot='popup'>
{menus}
</template>
</Trigger>
)
},
}