ant-design-vue/components/tree-select/index.jsx

116 lines
3.3 KiB
React
Raw Normal View History

2018-07-11 17:51:20 +08:00
import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select'
import classNames from 'classnames'
import { TreeSelectProps } from './interface'
import LocaleReceiver from '../locale-provider/LocaleReceiver'
import warning from '../_util/warning'
import { initDefaultProps, getOptionProps, getComponentFromProp, filterEmpty } from '../_util/props-util'
export { TreeData, TreeSelectProps } from './interface'
export default {
TreeNode: { ...TreeNode, name: 'ATreeSelectNode' },
SHOW_ALL,
SHOW_PARENT,
SHOW_CHILD,
name: 'ATreeSelect',
props: initDefaultProps(TreeSelectProps(), {
prefixCls: 'ant-select',
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
showSearch: false,
}),
model: {
prop: 'value',
event: 'change',
},
created () {
warning(
this.multiple !== false || !this.treeCheckable,
'`multiple` will alway be `true` when `treeCheckable` is true',
)
},
methods: {
focus () {
this.$refs.vcTreeSelect.focus()
},
blur () {
this.$refs.vcTreeSelect.blur()
},
onChange () {
this.$emit('change', ...arguments)
},
updateTreeData (list = []) {
for (let i = 0, len = list.length; i < len; i++) {
const { label, title, scopedSlots = {}, children } = list[i]
const { $scopedSlots } = this
let newLabel = typeof label === 'function' ? label(this.$createElement) : label
let newTitle = typeof title === 'function' ? title(this.$createElement) : title
if (!newLabel && scopedSlots.label && $scopedSlots[scopedSlots.label]) {
newLabel = $scopedSlots.label(list[i])
}
if (!newTitle && scopedSlots.title && $scopedSlots[scopedSlots.title]) {
newTitle = $scopedSlots.title(list[i])
}
const item = {
// label: newLabel,
title: newTitle || newLabel,
}
this.updateTreeData(children)
Object.assign(list[i], item)
}
},
renderTreeSelect (locale) {
const props = getOptionProps(this)
const {
prefixCls,
size,
notFoundContent,
dropdownStyle,
dropdownClassName,
...restProps
} = props
this.updateTreeData(props.treeData)
const cls = {
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
}
let checkable = getComponentFromProp(this, 'treeCheckable')
if (checkable) {
checkable = <span class={`${prefixCls}-tree-checkbox-inner`} />
}
const VcTreeSelectProps = {
props: {
...restProps,
dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
prefixCls,
dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
treeCheckable: checkable,
notFoundContent: notFoundContent || locale.notFoundContent,
},
class: cls,
on: { ...this.$listeners, change: this.onChange },
ref: 'vcTreeSelect',
}
return (
<VcTreeSelect {...VcTreeSelectProps}>{filterEmpty(this.$slots.default)}</VcTreeSelect>
)
},
},
render () {
return (
<LocaleReceiver
componentName='Select'
defaultLocale={{}}
scopedSlots={
{ default: this.renderTreeSelect }
}
/>
)
},
}