ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
256 lines (212 loc) • 8.02 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _vueTypes = require('../../../../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _util = require('../../util');
var _BaseSelector = require('../../Base/BaseSelector');
var _BaseSelector2 = _interopRequireDefault(_BaseSelector);
var _SearchInput = require('../../SearchInput');
var _SearchInput2 = _interopRequireDefault(_SearchInput);
var _Selection = require('./Selection');
var _Selection2 = _interopRequireDefault(_Selection);
var _propsUtil = require('../../../../_util/props-util');
var _getTransitionProps = require('../../../../_util/getTransitionProps');
var _getTransitionProps2 = _interopRequireDefault(_getTransitionProps);
var _BaseMixin = require('../../../../_util/BaseMixin');
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var TREE_SELECT_EMPTY_VALUE_KEY = 'RC_TREE_SELECT_EMPTY_VALUE_KEY';
var Selector = (0, _BaseSelector2['default'])('multiple');
// export const multipleSelectorContextTypes = {
// onMultipleSelectorRemove: PropTypes.func.isRequired,
// }
var MultipleSelector = {
mixins: [_BaseMixin2['default']],
props: (0, _extends3['default'])({}, (0, _BaseSelector.selectorPropTypes)(), _SearchInput2['default'].props, {
selectorValueList: _vueTypes2['default'].array,
disabled: _vueTypes2['default'].bool,
searchValue: _vueTypes2['default'].string,
labelInValue: _vueTypes2['default'].bool,
maxTagCount: _vueTypes2['default'].number,
maxTagPlaceholder: _vueTypes2['default'].any
// onChoiceAnimationLeave: PropTypes.func,
}),
inject: {
vcTreeSelect: { 'default': function _default() {
return {};
} }
},
created: function created() {
this.inputRef = (0, _util.createRef)();
},
methods: {
onPlaceholderClick: function onPlaceholderClick() {
this.inputRef.current.focus();
},
focus: function focus() {
this.inputRef.current.focus();
},
blur: function blur() {
this.inputRef.current.blur();
},
_renderPlaceholder: function _renderPlaceholder() {
var h = this.$createElement;
var _$props = this.$props,
prefixCls = _$props.prefixCls,
placeholder = _$props.placeholder,
searchPlaceholder = _$props.searchPlaceholder,
searchValue = _$props.searchValue,
selectorValueList = _$props.selectorValueList;
var currentPlaceholder = placeholder || searchPlaceholder;
if (!currentPlaceholder) return null;
var hidden = searchValue || selectorValueList.length;
// [Legacy] Not remove the placeholder
return h(
'span',
{
style: {
display: hidden ? 'none' : 'block'
},
on: {
'click': this.onPlaceholderClick
},
'class': prefixCls + '-search__field__placeholder'
},
[currentPlaceholder]
);
},
onChoiceAnimationLeave: function onChoiceAnimationLeave() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
this.__emit.apply(this, ['choiceAnimationLeave'].concat((0, _toConsumableArray3['default'])(args)));
},
renderSelection: function renderSelection() {
var _this = this;
var h = this.$createElement;
var _$props2 = this.$props,
selectorValueList = _$props2.selectorValueList,
choiceTransitionName = _$props2.choiceTransitionName,
prefixCls = _$props2.prefixCls,
labelInValue = _$props2.labelInValue,
maxTagCount = _$props2.maxTagCount;
var onMultipleSelectorRemove = this.vcTreeSelect.onMultipleSelectorRemove,
$slots = this.$slots;
var listeners = (0, _propsUtil.getListeners)(this);
// Check if `maxTagCount` is set
var myValueList = selectorValueList;
if (maxTagCount >= 0) {
myValueList = selectorValueList.slice(0, maxTagCount);
}
// Selector node list
var selectedValueNodes = myValueList.map(function (_ref) {
var label = _ref.label,
value = _ref.value;
return h(
_Selection2['default'],
(0, _babelHelperVueJsxMergeProps2['default'])([{
props: (0, _extends3['default'])({}, _this.$props, {
label: label,
value: value
}),
on: (0, _extends3['default'])({}, listeners, { remove: onMultipleSelectorRemove })
}, {
key: value || TREE_SELECT_EMPTY_VALUE_KEY
}]),
[$slots['default']]
);
});
// Rest node count
if (maxTagCount >= 0 && maxTagCount < selectorValueList.length) {
var content = '+ ' + (selectorValueList.length - maxTagCount) + ' ...';
var maxTagPlaceholder = (0, _propsUtil.getComponentFromProp)(this, 'maxTagPlaceholder', {}, false);
if (typeof maxTagPlaceholder === 'string') {
content = maxTagPlaceholder;
} else if (typeof maxTagPlaceholder === 'function') {
var restValueList = selectorValueList.slice(maxTagCount);
content = maxTagPlaceholder(labelInValue ? restValueList : restValueList.map(function (_ref2) {
var value = _ref2.value;
return value;
}));
}
var restNodeSelect = h(
_Selection2['default'],
(0, _babelHelperVueJsxMergeProps2['default'])([{
props: (0, _extends3['default'])({}, this.$props, {
label: content,
value: null
}),
on: listeners
}, {
key: 'rc-tree-select-internal-max-tag-counter'
}]),
[$slots['default']]
);
selectedValueNodes.push(restNodeSelect);
}
selectedValueNodes.push(h(
'li',
{ 'class': prefixCls + '-search ' + prefixCls + '-search--inline', key: '__input' },
[h(
_SearchInput2['default'],
{
props: (0, _extends3['default'])({}, this.$props, {
needAlign: true
}),
on: listeners,
directives: [{
name: 'ant-ref',
value: this.inputRef
}]
},
[$slots['default']]
)]
));
var className = prefixCls + '-selection__rendered';
if (choiceTransitionName) {
var transitionProps = (0, _getTransitionProps2['default'])(choiceTransitionName, {
tag: 'ul',
afterLeave: this.onChoiceAnimationLeave
});
return h(
'transition-group',
(0, _babelHelperVueJsxMergeProps2['default'])([{ 'class': className }, transitionProps]),
[selectedValueNodes]
);
}
return h(
'ul',
{ 'class': className, attrs: { role: 'menubar' }
},
[selectedValueNodes]
);
}
},
render: function render() {
var h = arguments[0];
var $slots = this.$slots;
var listeners = (0, _propsUtil.getListeners)(this);
return h(
Selector,
{
props: (0, _extends3['default'])({}, this.$props, {
tabIndex: -1,
showArrow: false,
renderSelection: this.renderSelection,
renderPlaceholder: this._renderPlaceholder
}),
on: listeners
},
[$slots['default']]
);
}
};
exports['default'] = MultipleSelector;