307 lines
12 KiB
JavaScript
307 lines
12 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.SelectProps = exports.SelectValue = exports.AbstractSelectProps = undefined;
|
|
|
|
var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
|
|
|
|
var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _warning = require('../_util/warning');
|
|
|
|
var _warning2 = _interopRequireDefault(_warning);
|
|
|
|
var _omit = require('omit.js');
|
|
|
|
var _omit2 = _interopRequireDefault(_omit);
|
|
|
|
var _vueTypes = require('../_util/vue-types');
|
|
|
|
var _vueTypes2 = _interopRequireDefault(_vueTypes);
|
|
|
|
var _vcSelect = require('../vc-select');
|
|
|
|
var _configConsumerProps = require('../config-provider/configConsumerProps');
|
|
|
|
var _propsUtil = require('../_util/props-util');
|
|
|
|
var _icon = require('../icon');
|
|
|
|
var _icon2 = _interopRequireDefault(_icon);
|
|
|
|
var _vnode = require('../_util/vnode');
|
|
|
|
var _base = require('../base');
|
|
|
|
var _base2 = _interopRequireDefault(_base);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var AbstractSelectProps = function AbstractSelectProps() {
|
|
return {
|
|
prefixCls: _vueTypes2['default'].string,
|
|
size: _vueTypes2['default'].oneOf(['small', 'large', 'default']),
|
|
showAction: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].arrayOf(String)]),
|
|
notFoundContent: _vueTypes2['default'].any,
|
|
transitionName: _vueTypes2['default'].string,
|
|
choiceTransitionName: _vueTypes2['default'].string,
|
|
showSearch: _vueTypes2['default'].bool,
|
|
allowClear: _vueTypes2['default'].bool,
|
|
disabled: _vueTypes2['default'].bool,
|
|
tabIndex: _vueTypes2['default'].number,
|
|
placeholder: _vueTypes2['default'].any,
|
|
defaultActiveFirstOption: _vueTypes2['default'].bool,
|
|
dropdownClassName: _vueTypes2['default'].string,
|
|
dropdownStyle: _vueTypes2['default'].any,
|
|
dropdownMenuStyle: _vueTypes2['default'].any,
|
|
dropdownMatchSelectWidth: _vueTypes2['default'].bool,
|
|
// onSearch: (value: string) => any,
|
|
filterOption: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].func]),
|
|
autoFocus: _vueTypes2['default'].bool,
|
|
backfill: _vueTypes2['default'].bool,
|
|
showArrow: _vueTypes2['default'].bool,
|
|
getPopupContainer: _vueTypes2['default'].func,
|
|
open: _vueTypes2['default'].bool,
|
|
defaultOpen: _vueTypes2['default'].bool,
|
|
autoClearSearchValue: _vueTypes2['default'].bool,
|
|
dropdownRender: _vueTypes2['default'].func,
|
|
loading: _vueTypes2['default'].bool
|
|
};
|
|
};
|
|
var Value = _vueTypes2['default'].shape({
|
|
key: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number])
|
|
}).loose;
|
|
|
|
var SelectValue = _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].number, _vueTypes2['default'].arrayOf(_vueTypes2['default'].oneOfType([Value, _vueTypes2['default'].string, _vueTypes2['default'].number])), Value]);
|
|
|
|
var SelectProps = (0, _extends3['default'])({}, AbstractSelectProps(), {
|
|
value: SelectValue,
|
|
defaultValue: SelectValue,
|
|
// mode: PropTypes.oneOf(['default', 'multiple', 'tags', 'combobox']),
|
|
mode: _vueTypes2['default'].string,
|
|
optionLabelProp: _vueTypes2['default'].string,
|
|
firstActiveValue: _vueTypes2['default'].oneOfType([String, _vueTypes2['default'].arrayOf(String)]),
|
|
maxTagCount: _vueTypes2['default'].number,
|
|
maxTagPlaceholder: _vueTypes2['default'].any,
|
|
maxTagTextLength: _vueTypes2['default'].number,
|
|
dropdownMatchSelectWidth: _vueTypes2['default'].bool,
|
|
optionFilterProp: _vueTypes2['default'].string,
|
|
labelInValue: _vueTypes2['default'].boolean,
|
|
getPopupContainer: _vueTypes2['default'].func,
|
|
tokenSeparators: _vueTypes2['default'].arrayOf(_vueTypes2['default'].string),
|
|
getInputElement: _vueTypes2['default'].func,
|
|
options: _vueTypes2['default'].array,
|
|
suffixIcon: _vueTypes2['default'].any,
|
|
removeIcon: _vueTypes2['default'].any,
|
|
clearIcon: _vueTypes2['default'].any,
|
|
menuItemSelectedIcon: _vueTypes2['default'].any
|
|
});
|
|
|
|
var SelectPropTypes = {
|
|
prefixCls: _vueTypes2['default'].string,
|
|
size: _vueTypes2['default'].oneOf(['default', 'large', 'small']),
|
|
// combobox: PropTypes.bool,
|
|
notFoundContent: _vueTypes2['default'].any,
|
|
showSearch: _vueTypes2['default'].bool,
|
|
optionLabelProp: _vueTypes2['default'].string,
|
|
transitionName: _vueTypes2['default'].string,
|
|
choiceTransitionName: _vueTypes2['default'].string
|
|
};
|
|
|
|
exports.AbstractSelectProps = AbstractSelectProps;
|
|
exports.SelectValue = SelectValue;
|
|
exports.SelectProps = SelectProps;
|
|
|
|
var SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
|
|
var Select = {
|
|
SECRET_COMBOBOX_MODE_DO_NOT_USE: SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
|
Option: (0, _extends3['default'])({}, _vcSelect.Option, { name: 'ASelectOption' }),
|
|
OptGroup: (0, _extends3['default'])({}, _vcSelect.OptGroup, { name: 'ASelectOptGroup' }),
|
|
name: 'ASelect',
|
|
props: (0, _extends3['default'])({}, SelectProps, {
|
|
showSearch: _vueTypes2['default'].bool.def(false),
|
|
transitionName: _vueTypes2['default'].string.def('slide-up'),
|
|
choiceTransitionName: _vueTypes2['default'].string.def('zoom')
|
|
}),
|
|
propTypes: SelectPropTypes,
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
provide: function provide() {
|
|
return {
|
|
savePopupRef: this.savePopupRef
|
|
};
|
|
},
|
|
|
|
inject: {
|
|
configProvider: { 'default': function _default() {
|
|
return _configConsumerProps.ConfigConsumerProps;
|
|
} }
|
|
},
|
|
created: function created() {
|
|
(0, _warning2['default'])(this.$props.mode !== 'combobox', 'Select', 'The combobox mode of Select is deprecated,' + 'it will be removed in next major version,' + 'please use AutoComplete instead');
|
|
},
|
|
|
|
methods: {
|
|
getNotFoundContent: function getNotFoundContent(renderEmpty) {
|
|
var h = this.$createElement;
|
|
var notFoundContent = (0, _propsUtil.getComponentFromProp)(this, 'notFoundContent');
|
|
if (notFoundContent !== undefined) {
|
|
return notFoundContent;
|
|
}
|
|
if (this.isCombobox()) {
|
|
return null;
|
|
}
|
|
return renderEmpty(h, 'Select');
|
|
},
|
|
savePopupRef: function savePopupRef(ref) {
|
|
this.popupRef = ref;
|
|
},
|
|
focus: function focus() {
|
|
this.$refs.vcSelect.focus();
|
|
},
|
|
blur: function blur() {
|
|
this.$refs.vcSelect.blur();
|
|
},
|
|
isCombobox: function isCombobox() {
|
|
var mode = this.mode;
|
|
|
|
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
|
|
},
|
|
renderSuffixIcon: function renderSuffixIcon(prefixCls) {
|
|
var h = this.$createElement;
|
|
var loading = this.$props.loading;
|
|
|
|
var suffixIcon = (0, _propsUtil.getComponentFromProp)(this, 'suffixIcon');
|
|
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
|
|
if (suffixIcon) {
|
|
return (0, _propsUtil.isValidElement)(suffixIcon) ? (0, _vnode.cloneElement)(suffixIcon, { 'class': prefixCls + '-arrow-icon' }) : suffixIcon;
|
|
}
|
|
if (loading) {
|
|
return h(_icon2['default'], {
|
|
attrs: { type: 'loading' }
|
|
});
|
|
}
|
|
return h(_icon2['default'], {
|
|
attrs: { type: 'down' },
|
|
'class': prefixCls + '-arrow-icon' });
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _cls;
|
|
|
|
var h = arguments[0];
|
|
|
|
var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
|
|
customizePrefixCls = _getOptionProps.prefixCls,
|
|
size = _getOptionProps.size,
|
|
mode = _getOptionProps.mode,
|
|
options = _getOptionProps.options,
|
|
getPopupContainer = _getOptionProps.getPopupContainer,
|
|
showArrow = _getOptionProps.showArrow,
|
|
restProps = (0, _objectWithoutProperties3['default'])(_getOptionProps, ['prefixCls', 'size', 'mode', 'options', 'getPopupContainer', 'showArrow']);
|
|
|
|
var getPrefixCls = this.configProvider.getPrefixCls;
|
|
var renderEmpty = this.configProvider.renderEmpty;
|
|
var prefixCls = getPrefixCls('select', customizePrefixCls);
|
|
|
|
var getContextPopupContainer = this.configProvider.getPopupContainer;
|
|
|
|
var removeIcon = (0, _propsUtil.getComponentFromProp)(this, 'removeIcon');
|
|
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
|
|
var clearIcon = (0, _propsUtil.getComponentFromProp)(this, 'clearIcon');
|
|
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
|
|
var menuItemSelectedIcon = (0, _propsUtil.getComponentFromProp)(this, 'menuItemSelectedIcon');
|
|
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) ? menuItemSelectedIcon[0] : menuItemSelectedIcon;
|
|
var rest = (0, _omit2['default'])(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'suffixIcon', 'menuItemSelectedIcon']);
|
|
|
|
var cls = (_cls = {}, (0, _defineProperty3['default'])(_cls, prefixCls + '-lg', size === 'large'), (0, _defineProperty3['default'])(_cls, prefixCls + '-sm', size === 'small'), (0, _defineProperty3['default'])(_cls, prefixCls + '-show-arrow', showArrow), _cls);
|
|
|
|
var optionLabelProp = this.$props.optionLabelProp;
|
|
|
|
if (this.isCombobox()) {
|
|
// children 带 dom 结构时，无法填入输入框
|
|
optionLabelProp = optionLabelProp || 'value';
|
|
}
|
|
|
|
var modeConfig = {
|
|
multiple: mode === 'multiple',
|
|
tags: mode === 'tags',
|
|
combobox: this.isCombobox()
|
|
};
|
|
var finalRemoveIcon = removeIcon && ((0, _propsUtil.isValidElement)(removeIcon) ? (0, _vnode.cloneElement)(removeIcon, { 'class': prefixCls + '-remove-icon' }) : removeIcon) || h(_icon2['default'], {
|
|
attrs: { type: 'close' },
|
|
'class': prefixCls + '-remove-icon' });
|
|
|
|
var finalClearIcon = clearIcon && ((0, _propsUtil.isValidElement)(clearIcon) ? (0, _vnode.cloneElement)(clearIcon, { 'class': prefixCls + '-clear-icon' }) : clearIcon) || h(_icon2['default'], {
|
|
attrs: { type: 'close-circle', theme: 'filled' },
|
|
'class': prefixCls + '-clear-icon' });
|
|
|
|
var finalMenuItemSelectedIcon = menuItemSelectedIcon && ((0, _propsUtil.isValidElement)(menuItemSelectedIcon) ? (0, _vnode.cloneElement)(menuItemSelectedIcon, { 'class': prefixCls + '-selected-icon' }) : menuItemSelectedIcon) || h(_icon2['default'], {
|
|
attrs: { type: 'check' },
|
|
'class': prefixCls + '-selected-icon' });
|
|
|
|
var selectProps = {
|
|
props: (0, _extends3['default'])({
|
|
inputIcon: this.renderSuffixIcon(prefixCls),
|
|
removeIcon: finalRemoveIcon,
|
|
clearIcon: finalClearIcon,
|
|
menuItemSelectedIcon: finalMenuItemSelectedIcon,
|
|
showArrow: showArrow
|
|
}, rest, modeConfig, {
|
|
prefixCls: prefixCls,
|
|
optionLabelProp: optionLabelProp || 'children',
|
|
notFoundContent: this.getNotFoundContent(renderEmpty),
|
|
maxTagPlaceholder: (0, _propsUtil.getComponentFromProp)(this, 'maxTagPlaceholder'),
|
|
placeholder: (0, _propsUtil.getComponentFromProp)(this, 'placeholder'),
|
|
children: options ? options.map(function (option) {
|
|
var key = option.key,
|
|
_option$label = option.label,
|
|
label = _option$label === undefined ? option.title : _option$label,
|
|
on = option.on,
|
|
cls = option['class'],
|
|
style = option.style,
|
|
restOption = (0, _objectWithoutProperties3['default'])(option, ['key', 'label', 'on', 'class', 'style']);
|
|
|
|
return h(
|
|
_vcSelect.Option,
|
|
(0, _babelHelperVueJsxMergeProps2['default'])([{ key: key }, { props: restOption, on: on, 'class': cls, style: style }]),
|
|
[label]
|
|
);
|
|
}) : (0, _propsUtil.filterEmpty)(this.$slots['default']),
|
|
__propsSymbol__: Symbol(),
|
|
dropdownRender: (0, _propsUtil.getComponentFromProp)(this, 'dropdownRender', {}, false),
|
|
getPopupContainer: getPopupContainer || getContextPopupContainer
|
|
}),
|
|
on: (0, _propsUtil.getListeners)(this),
|
|
'class': cls,
|
|
ref: 'vcSelect'
|
|
};
|
|
return h(_vcSelect.Select, selectProps);
|
|
}
|
|
};
|
|
|
|
/* istanbul ignore next */
|
|
Select.install = function (Vue) {
|
|
Vue.use(_base2['default']);
|
|
Vue.component(Select.name, Select);
|
|
Vue.component(Select.Option.name, Select.Option);
|
|
Vue.component(Select.OptGroup.name, Select.OptGroup);
|
|
};
|
|
|
|
exports['default'] = Select; |