123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- 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;
|