203 lines
7.2 KiB
Java
203 lines
7.2 KiB
Java
import _defineProperty from 'babel-runtime/helpers/defineProperty';
|
|
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
|
import _extends from 'babel-runtime/helpers/extends';
|
|
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, getListeners } from '../_util/props-util';
|
|
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
|
|
import Base from '../base';
|
|
|
|
export { TreeData, TreeSelectProps } from './interface';
|
|
import Icon from '../icon';
|
|
import omit from 'omit.js';
|
|
|
|
var TreeSelect = {
|
|
TreeNode: _extends({}, TreeNode, { name: 'ATreeSelectNode' }),
|
|
SHOW_ALL: SHOW_ALL,
|
|
SHOW_PARENT: SHOW_PARENT,
|
|
SHOW_CHILD: SHOW_CHILD,
|
|
name: 'ATreeSelect',
|
|
props: initDefaultProps(TreeSelectProps(), {
|
|
transitionName: 'slide-up',
|
|
choiceTransitionName: 'zoom',
|
|
showSearch: false
|
|
}),
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
inject: {
|
|
configProvider: { 'default': function _default() {
|
|
return ConfigConsumerProps;
|
|
} }
|
|
},
|
|
created: function created() {
|
|
warning(this.multiple !== false || !this.treeCheckable, 'TreeSelect', '`multiple` will alway be `true` when `treeCheckable` is true');
|
|
},
|
|
|
|
methods: {
|
|
focus: function focus() {
|
|
this.$refs.vcTreeSelect.focus();
|
|
},
|
|
blur: function blur() {
|
|
this.$refs.vcTreeSelect.blur();
|
|
},
|
|
renderSwitcherIcon: function renderSwitcherIcon(prefixCls, _ref) {
|
|
var isLeaf = _ref.isLeaf,
|
|
loading = _ref.loading;
|
|
var h = this.$createElement;
|
|
|
|
if (loading) {
|
|
return h(Icon, {
|
|
attrs: { type: 'loading' },
|
|
'class': prefixCls + '-switcher-loading-icon' });
|
|
}
|
|
if (isLeaf) {
|
|
return null;
|
|
}
|
|
return h(Icon, {
|
|
attrs: { type: 'caret-down' },
|
|
'class': prefixCls + '-switcher-icon' });
|
|
},
|
|
onChange: function onChange() {
|
|
this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
|
|
},
|
|
updateTreeData: function updateTreeData(treeData) {
|
|
var _this = this;
|
|
|
|
var $scopedSlots = this.$scopedSlots;
|
|
|
|
var defaultFields = {
|
|
children: 'children',
|
|
title: 'title',
|
|
key: 'key',
|
|
label: 'label',
|
|
value: 'value'
|
|
};
|
|
var replaceFields = _extends({}, defaultFields, this.$props.replaceFields);
|
|
return treeData.map(function (item) {
|
|
var _item$scopedSlots = item.scopedSlots,
|
|
scopedSlots = _item$scopedSlots === undefined ? {} : _item$scopedSlots;
|
|
|
|
var label = item[replaceFields.label];
|
|
var title = item[replaceFields.title];
|
|
var value = item[replaceFields.value];
|
|
var key = item[replaceFields.key];
|
|
var children = item[replaceFields.children];
|
|
var newLabel = typeof label === 'function' ? label(_this.$createElement) : label;
|
|
var newTitle = typeof title === 'function' ? title(_this.$createElement) : title;
|
|
if (!newLabel && scopedSlots.label && $scopedSlots[scopedSlots.label]) {
|
|
newLabel = $scopedSlots[scopedSlots.label](item);
|
|
}
|
|
if (!newTitle && scopedSlots.title && $scopedSlots[scopedSlots.title]) {
|
|
newTitle = $scopedSlots[scopedSlots.title](item);
|
|
}
|
|
var treeNodeProps = _extends({}, item, {
|
|
title: newTitle || newLabel,
|
|
value: value,
|
|
dataRef: item,
|
|
key: key
|
|
});
|
|
if (children) {
|
|
return _extends({}, treeNodeProps, { children: _this.updateTreeData(children) });
|
|
}
|
|
return treeNodeProps;
|
|
});
|
|
}
|
|
},
|
|
|
|
render: function render(h) {
|
|
var _cls,
|
|
_this2 = this;
|
|
|
|
var props = getOptionProps(this);
|
|
|
|
var customizePrefixCls = props.prefixCls,
|
|
size = props.size,
|
|
dropdownStyle = props.dropdownStyle,
|
|
dropdownClassName = props.dropdownClassName,
|
|
getPopupContainer = props.getPopupContainer,
|
|
restProps = _objectWithoutProperties(props, ['prefixCls', 'size', 'dropdownStyle', 'dropdownClassName', 'getPopupContainer']);
|
|
|
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
|
var prefixCls = getPrefixCls('select', customizePrefixCls);
|
|
|
|
var renderEmpty = this.configProvider.renderEmpty;
|
|
var notFoundContent = getComponentFromProp(this, 'notFoundContent');
|
|
var removeIcon = getComponentFromProp(this, 'removeIcon');
|
|
var clearIcon = getComponentFromProp(this, 'clearIcon');
|
|
var getContextPopupContainer = this.configProvider.getPopupContainer;
|
|
|
|
var rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'suffixIcon']);
|
|
var suffixIcon = getComponentFromProp(this, 'suffixIcon');
|
|
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
|
var treeData = props.treeData;
|
|
if (treeData) {
|
|
treeData = this.updateTreeData(treeData);
|
|
}
|
|
var cls = (_cls = {}, _defineProperty(_cls, prefixCls + '-lg', size === 'large'), _defineProperty(_cls, prefixCls + '-sm', size === 'small'), _cls);
|
|
|
|
// showSearch: single - false, multiple - true
|
|
var showSearch = restProps.showSearch;
|
|
|
|
if (!('showSearch' in restProps)) {
|
|
showSearch = !!(restProps.multiple || restProps.treeCheckable);
|
|
}
|
|
|
|
var checkable = getComponentFromProp(this, 'treeCheckable');
|
|
if (checkable) {
|
|
checkable = h('span', { 'class': prefixCls + '-tree-checkbox-inner' });
|
|
}
|
|
|
|
var inputIcon = suffixIcon || h(Icon, {
|
|
attrs: { type: 'down' },
|
|
'class': prefixCls + '-arrow-icon' });
|
|
|
|
var finalRemoveIcon = removeIcon || h(Icon, {
|
|
attrs: { type: 'close' },
|
|
'class': prefixCls + '-remove-icon' });
|
|
|
|
var finalClearIcon = clearIcon || h(Icon, {
|
|
attrs: { type: 'close-circle', theme: 'filled' },
|
|
'class': prefixCls + '-clear-icon' });
|
|
var VcTreeSelectProps = {
|
|
props: _extends(_extends({
|
|
switcherIcon: function switcherIcon(nodeProps) {
|
|
return _this2.renderSwitcherIcon(prefixCls, nodeProps);
|
|
},
|
|
inputIcon: inputIcon,
|
|
removeIcon: finalRemoveIcon,
|
|
clearIcon: finalClearIcon
|
|
}, rest, {
|
|
showSearch: showSearch,
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer,
|
|
dropdownClassName: classNames(dropdownClassName, prefixCls + '-tree-dropdown'),
|
|
prefixCls: prefixCls,
|
|
dropdownStyle: _extends({ maxHeight: '100vh', overflow: 'auto' }, dropdownStyle),
|
|
treeCheckable: checkable,
|
|
notFoundContent: notFoundContent || renderEmpty(h, 'Select'),
|
|
__propsSymbol__: Symbol()
|
|
}), treeData ? { treeData: treeData } : {}),
|
|
'class': cls,
|
|
on: _extends({}, getListeners(this), { change: this.onChange }),
|
|
ref: 'vcTreeSelect',
|
|
scopedSlots: this.$scopedSlots
|
|
};
|
|
return h(
|
|
VcTreeSelect,
|
|
VcTreeSelectProps,
|
|
[filterEmpty(this.$slots['default'])]
|
|
);
|
|
}
|
|
};
|
|
|
|
/* istanbul ignore next */
|
|
TreeSelect.install = function (Vue) {
|
|
Vue.use(Base);
|
|
Vue.component(TreeSelect.name, TreeSelect);
|
|
Vue.component(TreeSelect.TreeNode.name, TreeSelect.TreeNode);
|
|
};
|
|
|
|
export default TreeSelect; |