ant-design-vue/components/cascader/index.vue

386 lines
12 KiB
Vue
Raw Normal View History

2018-03-03 11:14:03 +00:00
<script>
import PropTypes from '../_util/vue-types'
import VcCascader from '../vc-cascader'
import arrayTreeFilter from 'array-tree-filter'
import classNames from 'classnames'
import omit from 'omit.js'
import KeyCode from '../_util/KeyCode'
import Input from '../input'
import Icon from '../icon'
import { hasProp, filterEmpty, getOptionProps } from '../_util/props-util'
import BaseMixin from '../_util/BaseMixin'
const CascaderOptionType = PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.any.isRequired,
disabled: PropTypes.bool,
children: PropTypes.array,
__IS_FILTERED_OPTION: PropTypes.bool,
}).loose
const CascaderExpandTrigger = PropTypes.oneOf(['click', 'hover'])
const ShowSearchType = PropTypes.shape({
filter: PropTypes.func,
render: PropTypes.func,
sort: PropTypes.func,
matchInputWidth: PropTypes.bool,
}).loose
function noop () {}
const CascaderProps = {
/** 可选项数据源 */
options: PropTypes.arrayOf(CascaderOptionType).def([]),
/** 默认的选中项 */
defaultValue: PropTypes.arrayOf(PropTypes.string),
/** 指定选中项 */
value: PropTypes.arrayOf(PropTypes.string),
/** 选择完成后的回调 */
// onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
/** 选择后展示的渲染函数 */
displayRender: PropTypes.func,
transitionName: PropTypes.string.def('slide-up'),
popupStyle: PropTypes.object.def({}),
/** 自定义浮层类名 */
popupClassName: PropTypes.string,
/** 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` */
popupPlacement: PropTypes.oneOf(['bottomLeft', 'bottomRight', 'topLeft', 'topRight']).def('bottomLeft'),
/** 输入框占位文本*/
placeholder: PropTypes.string.def('Please select'),
/** 输入框大小,可选 `large` `default` `small` */
size: PropTypes.oneOf(['large', 'default', 'small']),
/** 禁用*/
disabled: PropTypes.bool.def(false),
/** 是否支持清除*/
allowClear: PropTypes.bool.def(true),
showSearch: PropTypes.oneOfType([PropTypes.bool, ShowSearchType]),
notFoundContent: PropTypes.any.def('Not Found'),
loadData: PropTypes.func,
/** 次级菜单的展开方式,可选 'click' 和 'hover' */
expandTrigger: CascaderExpandTrigger,
/** 当此项为 true 时,点选每级菜单选项值都会发生变化 */
changeOnSelect: PropTypes.bool,
/** 浮层可见变化时回调 */
// onPopupVisibleChange?: (popupVisible: boolean) => void;
prefixCls: PropTypes.string.def('ant-cascader'),
inputPrefixCls: PropTypes.string.def('ant-input'),
getPopupContainer: PropTypes.func,
popupVisible: PropTypes.bool,
}
function defaultFilterOption (inputValue, path) {
return path.some(option => option.label.indexOf(inputValue) > -1)
}
function defaultSortFilteredOption (a, b, inputValue) {
function callback (elem) {
return elem.label.indexOf(inputValue) > -1
}
return a.findIndex(callback) - b.findIndex(callback)
}
2018-03-04 08:02:46 +00:00
const defaultDisplayRender = ({ labels }) => labels.join(' / ')
2018-03-03 11:14:03 +00:00
export default {
mixins: [BaseMixin],
props: CascaderProps,
2018-03-04 08:02:46 +00:00
model: {
prop: 'value',
event: 'change',
},
2018-03-03 11:14:03 +00:00
data () {
this.cachedOptions = []
const { value, defaultValue, popupVisible, showSearch, options, changeOnSelect, flattenTree } = this
return {
sValue: value || defaultValue || [],
inputValue: '',
inputFocused: false,
sPopupVisible: popupVisible,
flattenOptions: showSearch && flattenTree(options, changeOnSelect),
}
},
watch: {
value (val) {
this.setState({ sValue: val || [] })
},
popupVisible (val) {
this.setState({ sPopupVisible: val })
},
options (val) {
if (this.showSearch) {
this.setState({ flattenOptions: this.flattenTree(this.options, this.changeOnSelect) })
}
},
},
methods: {
highlightKeyword (str, keyword, prefixCls) {
return str.split(keyword)
.map((node, index) => index === 0 ? node : [
<span class={`${prefixCls}-menu-item-keyword`} key='seperator'>{keyword}</span>,
node,
])
},
2018-03-04 09:11:32 +00:00
defaultRenderFilteredOption ({ inputValue, path, prefixCls }) {
2018-03-03 11:14:03 +00:00
return path.map(({ label }, index) => {
const node = label.indexOf(inputValue) > -1
? this.highlightKeyword(label, inputValue, prefixCls) : label
return index === 0 ? node : [' / ', node]
})
},
handleChange (value, selectedOptions) {
this.setState({ inputValue: '' })
if (selectedOptions[0].__IS_FILTERED_OPTION) {
const unwrappedValue = value[0]
const unwrappedSelectedOptions = selectedOptions[0].path
this.setValue(unwrappedValue, unwrappedSelectedOptions)
return
}
this.setValue(value, selectedOptions)
},
handlePopupVisibleChange (popupVisible) {
if (!hasProp(this, 'popupVisible')) {
this.setState({
sPopupVisible: popupVisible,
inputFocused: popupVisible,
inputValue: popupVisible ? this.inputValue : '',
})
}
this.$emit('popupVisibleChange', popupVisible)
},
handleInputBlur () {
this.setState({
inputFocused: false,
})
},
handleInputClick (e) {
const { inputFocused, sPopupVisible } = this
// Prevent `Trigger` behaviour.
if (inputFocused || sPopupVisible) {
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation()
}
},
handleKeyDown (e) {
if (e.keyCode === KeyCode.BACKSPACE) {
e.stopPropagation()
}
},
handleInputChange (e) {
const inputValue = e.target.value
this.setState({ inputValue })
},
setValue (value, selectedOptions) {
if (!hasProp(this, 'value')) {
this.setState({ sValue: value })
}
this.$emit('change', value, selectedOptions)
},
getLabel () {
2018-03-04 08:02:46 +00:00
const { options, $scopedSlots } = this
const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender
2018-03-03 11:14:03 +00:00
const value = this.sValue
const unwrappedValue = Array.isArray(value[0]) ? value[0] : value
const selectedOptions = arrayTreeFilter(options,
(o, level) => o.value === unwrappedValue[level],
)
2018-03-04 08:02:46 +00:00
const labels = selectedOptions.map(o => o.label)
return displayRender({ labels, selectedOptions })
2018-03-03 11:14:03 +00:00
},
clearSelection (e) {
e.preventDefault()
e.stopPropagation()
if (!this.inputValue) {
this.setValue([])
this.handlePopupVisibleChange(false)
} else {
this.setState({ inputValue: '' })
}
},
flattenTree (options, changeOnSelect, ancestor = []) {
let flattenOptions = []
options.forEach((option) => {
const path = ancestor.concat(option)
if (changeOnSelect || !option.children || !option.children.length) {
flattenOptions.push(path)
}
if (option.children) {
flattenOptions = flattenOptions.concat(this.flattenTree(option.children, changeOnSelect, path))
}
})
return flattenOptions
},
generateFilteredOptions (prefixCls) {
2018-03-04 09:11:32 +00:00
const { showSearch, notFoundContent, flattenOptions, inputValue, $scopedSlots } = this
2018-03-03 11:14:03 +00:00
const {
filter = defaultFilterOption,
2018-03-04 09:11:32 +00:00
// render = this.defaultRenderFilteredOption,
2018-03-03 11:14:03 +00:00
sort = defaultSortFilteredOption,
} = showSearch
2018-03-04 09:11:32 +00:00
const render = showSearch.render || $scopedSlots.showSearchRender || this.defaultRenderFilteredOption
2018-03-03 11:14:03 +00:00
const filtered = flattenOptions.filter((path) => filter(inputValue, path))
.sort((a, b) => sort(a, b, inputValue))
if (filtered.length > 0) {
return filtered.map((path) => {
return {
__IS_FILTERED_OPTION: true,
path,
2018-03-04 09:11:32 +00:00
label: render({ inputValue, path, prefixCls }),
2018-03-03 11:14:03 +00:00
value: path.map((o) => o.value),
disabled: path.some((o) => o.disabled),
}
})
}
return [{ label: notFoundContent, value: 'ANT_CASCADER_NOT_FOUND', disabled: true }]
},
focus () {
this.$refs.input.focus()
},
blur () {
this.$refs.input.blur()
},
},
render () {
const { $slots, sValue: value, sPopupVisible, inputValue } = this
const props = getOptionProps(this)
const {
prefixCls, inputPrefixCls, placeholder, size, disabled,
allowClear, showSearch = false, ...otherProps } = props
const sizeCls = classNames({
[`${inputPrefixCls}-lg`]: size === 'large',
[`${inputPrefixCls}-sm`]: size === 'small',
})
const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? (
<Icon
type='cross-circle'
class={`${prefixCls}-picker-clear`}
onClick={this.clearSelection}
2018-03-05 11:05:23 +00:00
key='clear-icon'
2018-03-03 11:14:03 +00:00
/>
) : null
const arrowCls = classNames({
[`${prefixCls}-picker-arrow`]: true,
[`${prefixCls}-picker-arrow-expand`]: sPopupVisible,
})
const pickerCls = classNames(
`${prefixCls}-picker`, {
[`${prefixCls}-picker-with-value`]: inputValue,
[`${prefixCls}-picker-disabled`]: disabled,
[`${prefixCls}-picker-${size}`]: !!size,
})
// Fix bug of https://github.com/facebook/react/pull/5004
// and https://fb.me/react-unknown-prop
const tempInputProps = omit(otherProps, [
'options',
'popupPlacement',
'transitionName',
'displayRender',
'changeOnSelect',
'expandTrigger',
'popupVisible',
'getPopupContainer',
'loadData',
'popupClassName',
'filterOption',
'renderFilteredOption',
'sortFilteredOption',
'notFoundContent',
2018-03-04 08:02:46 +00:00
'defaultValue',
2018-03-03 11:14:03 +00:00
])
let options = this.options
if (inputValue) {
options = this.generateFilteredOptions(prefixCls)
}
// Dropdown menu should keep previous status until it is fully closed.
if (!sPopupVisible) {
options = this.cachedOptions
} else {
this.cachedOptions = options
}
const dropdownMenuColumnStyle = {}
const isNotFound = (options || []).length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND'
if (isNotFound) {
dropdownMenuColumnStyle.height = 'auto' // Height of one row.
}
// The default value of `matchInputWidth` is `true`
const resultListMatchInputWidth = showSearch.matchInputWidth !== false
if (resultListMatchInputWidth && inputValue && this.input) {
dropdownMenuColumnStyle.width = this.input.input.offsetWidth
}
const inputProps = {
props: {
...tempInputProps,
prefixCls: inputPrefixCls,
placeholder: value && value.length > 0 ? undefined : placeholder,
value: inputValue,
disabled: disabled,
readOnly: !showSearch,
autoComplete: 'off',
},
class: `${prefixCls}-input ${sizeCls}`,
ref: 'input',
on: {
click: showSearch ? this.handleInputClick : noop,
blur: showSearch ? this.handleInputBlur : noop,
keydown: this.handleKeyDown,
change: showSearch ? this.handleInputChange : noop,
},
}
const children = filterEmpty($slots.default)
const input = children.length ? children : (
<span
class={pickerCls}
>
2018-03-04 08:02:46 +00:00
{ showSearch ? <span class={`${prefixCls}-picker-label`}>
2018-03-03 11:14:03 +00:00
{this.getLabel()}
2018-03-04 08:02:46 +00:00
</span> : null}
2018-03-03 11:14:03 +00:00
<Input {...inputProps}/>
2018-03-04 08:02:46 +00:00
{ !showSearch ? <span class={`${prefixCls}-picker-label`}>
{this.getLabel()}
</span> : null}
2018-03-03 11:14:03 +00:00
{clearIcon}
2018-03-05 11:05:23 +00:00
<Icon type='down' key='down-icon' class={arrowCls} />
2018-03-03 11:14:03 +00:00
</span>
)
const cascaderProps = {
props: {
...props,
options: options,
value: value,
popupVisible: sPopupVisible,
dropdownMenuColumnStyle: dropdownMenuColumnStyle,
},
on: {
popupVisibleChange: this.handlePopupVisibleChange,
change: this.handleChange,
},
}
return (
<VcCascader {...cascaderProps}>
{input}
</VcCascader>
)
},
}
2018-03-05 11:05:23 +00:00
</script>