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

173 lines
5.4 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
import classNames from 'classnames';
import { TreeSelectProps } from './interface';
import warning from '../_util/warning';
import {
initDefaultProps,
getOptionProps,
getComponentFromProp,
filterEmpty,
isValidElement,
} from '../_util/props-util';
2019-04-10 03:54:42 +00:00
import { ConfigConsumerProps } from '../config-provider';
import Base from '../base';
2018-07-11 09:51:20 +00:00
2019-01-12 03:33:27 +00:00
export { TreeData, TreeSelectProps } from './interface';
import Icon from '../icon';
import omit from 'omit.js';
import { cloneElement } from '../_util/vnode';
2018-12-12 13:24:12 +00:00
const TreeSelect = {
2018-07-11 09:51:20 +00:00
TreeNode: { ...TreeNode, name: 'ATreeSelectNode' },
SHOW_ALL,
SHOW_PARENT,
SHOW_CHILD,
name: 'ATreeSelect',
props: initDefaultProps(TreeSelectProps(), {
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
showSearch: false,
}),
model: {
prop: 'value',
event: 'change',
},
2019-01-07 12:59:02 +00:00
inject: {
2019-01-28 13:09:13 +00:00
configProvider: { default: () => ({}) },
2019-01-07 12:59:02 +00:00
},
2019-01-12 03:33:27 +00:00
created() {
2018-07-11 09:51:20 +00:00
warning(
this.multiple !== false || !this.treeCheckable,
'`multiple` will alway be `true` when `treeCheckable` is true',
2019-01-12 03:33:27 +00:00
);
2018-07-11 09:51:20 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
focus() {
this.$refs.vcTreeSelect.focus();
2018-07-11 09:51:20 +00:00
},
2019-01-12 03:33:27 +00:00
blur() {
this.$refs.vcTreeSelect.blur();
2018-07-11 09:51:20 +00:00
},
2019-04-10 03:54:42 +00:00
renderSwitcherIcon(prefixCls, { isLeaf, loading }) {
2018-12-12 13:24:12 +00:00
if (loading) {
2019-01-12 03:33:27 +00:00
return <Icon type="loading" class={`${prefixCls}-switcher-loading-icon`} />;
2018-12-12 13:24:12 +00:00
}
if (isLeaf) {
2019-01-12 03:33:27 +00:00
return null;
2018-12-12 13:24:12 +00:00
}
2019-01-12 03:33:27 +00:00
return <Icon type="caret-down" class={`${prefixCls}-switcher-icon`} />;
2018-12-12 13:24:12 +00:00
},
2019-01-12 03:33:27 +00:00
onChange() {
this.$emit('change', ...arguments);
2018-07-11 09:51:20 +00:00
},
updateTreeData(treeData) {
const { $scopedSlots } = this;
return treeData.map(item => {
const { label, title, scopedSlots = {}, children } = item;
2019-01-12 03:33:27 +00:00
let newLabel = typeof label === 'function' ? label(this.$createElement) : label;
let newTitle = typeof title === 'function' ? title(this.$createElement) : title;
2018-07-11 09:51:20 +00:00
if (!newLabel && scopedSlots.label && $scopedSlots[scopedSlots.label]) {
newLabel = $scopedSlots.label(item);
2018-07-11 09:51:20 +00:00
}
if (!newTitle && scopedSlots.title && $scopedSlots[scopedSlots.title]) {
newTitle = $scopedSlots.title(item);
2018-07-11 09:51:20 +00:00
}
const treeNodeProps = {
...item,
2018-07-11 09:51:20 +00:00
title: newTitle || newLabel,
dataRef: item,
2019-01-12 03:33:27 +00:00
};
if (children) {
return { ...treeNodeProps, children: this.updateTreeData(children) };
}
return treeNodeProps;
});
2018-07-11 09:51:20 +00:00
},
2019-04-10 03:54:42 +00:00
},
2018-12-12 13:24:12 +00:00
2019-04-10 03:54:42 +00:00
render(h) {
const props = getOptionProps(this);
2019-05-28 03:37:38 +00:00
const {
prefixCls: customizePrefixCls,
size,
dropdownStyle,
dropdownClassName,
getPopupContainer,
...restProps
} = props;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('select', customizePrefixCls);
2019-04-10 03:54:42 +00:00
2019-05-28 03:37:38 +00:00
const renderEmpty =
(this.configProvider.renderEmpty && this.configProvider.renderEmpty()) ||
ConfigConsumerProps.renderEmpty;
const notFoundContent = getComponentFromProp(this, 'notFoundContent');
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
const rest = omit(restProps, [
'inputIcon',
'removeIcon',
'clearIcon',
'switcherIcon',
'suffixIcon',
]);
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
let treeData = props.treeData;
if (treeData) {
treeData = this.updateTreeData(treeData);
}
const cls = {
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
};
2018-07-11 09:51:20 +00:00
2019-05-28 03:37:38 +00:00
let checkable = getComponentFromProp(this, 'treeCheckable');
if (checkable) {
checkable = <span class={`${prefixCls}-tree-checkbox-inner`} />;
}
2018-12-12 13:24:12 +00:00
2019-05-28 03:37:38 +00:00
const inputIcon = (suffixIcon &&
(isValidElement(suffixIcon) ? cloneElement(suffixIcon) : suffixIcon)) || (
<Icon type="down" class={`${prefixCls}-arrow-icon`} />
);
2018-12-12 13:24:12 +00:00
2019-05-28 03:37:38 +00:00
const removeIcon = <Icon type="close" class={`${prefixCls}-remove-icon`} />;
2018-12-12 13:24:12 +00:00
2019-05-28 03:37:38 +00:00
const clearIcon = <Icon type="close-circle" class={`${prefixCls}-clear-icon`} theme="filled" />;
const VcTreeSelectProps = {
2019-08-21 07:17:21 +00:00
props: Object.assign(
{
switcherIcon: nodeProps => this.renderSwitcherIcon(prefixCls, nodeProps),
inputIcon,
removeIcon,
clearIcon,
...rest,
getPopupContainer: getPopupContainer || getContextPopupContainer,
dropdownClassName: classNames(dropdownClassName, `${prefixCls}-tree-dropdown`),
prefixCls,
dropdownStyle: { maxHeight: '100vh', overflow: 'auto', ...dropdownStyle },
treeCheckable: checkable,
notFoundContent: notFoundContent || renderEmpty(h, 'Select'),
__propsSymbol__: Symbol(),
},
treeData ? { treeData } : {},
),
2019-05-28 03:37:38 +00:00
class: cls,
on: { ...this.$listeners, change: this.onChange },
ref: 'vcTreeSelect',
scopedSlots: this.$scopedSlots,
};
return <VcTreeSelect {...VcTreeSelectProps}>{filterEmpty(this.$slots.default)}</VcTreeSelect>;
2018-07-11 09:51:20 +00:00
},
2019-01-12 03:33:27 +00:00
};
/* istanbul ignore next */
2019-01-12 03:33:27 +00:00
TreeSelect.install = function(Vue) {
Vue.use(Base);
2019-01-12 03:33:27 +00:00
Vue.component(TreeSelect.name, TreeSelect);
Vue.component(TreeSelect.TreeNode.name, TreeSelect.TreeNode);
};
2019-01-12 03:33:27 +00:00
export default TreeSelect;