diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js index a4aa50c1f..e15f0c926 100644 --- a/components/select/__tests__/index.test.js +++ b/components/select/__tests__/index.test.js @@ -33,7 +33,7 @@ describe('Select', () => { .findAll({ name: 'MenuItem' }) .at(0) .text(), - ).toBe('Not Found'); + ).toBe('No Data'); }); }); diff --git a/components/select/index.jsx b/components/select/index.jsx index 4a29a3519..501bcd11f 100644 --- a/components/select/index.jsx +++ b/components/select/index.jsx @@ -2,8 +2,7 @@ import warning from 'warning'; import omit from 'omit.js'; import PropTypes from '../_util/vue-types'; import { Select as VcSelect, Option, OptGroup } from '../vc-select'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import defaultLocale from '../locale-provider/default'; +import { ConfigConsumerProps } from '../config-provider'; import { getComponentFromProp, getOptionProps, @@ -96,7 +95,7 @@ const Select = { name: 'ASelect', props: { ...SelectProps, - prefixCls: PropTypes.string.def('ant-select'), + prefixCls: PropTypes.string, showSearch: PropTypes.bool.def(false), transitionName: PropTypes.string.def('slide-up'), choiceTransitionName: PropTypes.string.def('zoom'), @@ -124,21 +123,24 @@ const Select = { blur() { this.$refs.vcSelect.blur(); }, - getNotFoundContent(locale) { + getNotFoundContent(renderEmpty) { + const h = this.$createElement; const notFoundContent = getComponentFromProp(this, 'notFoundContent'); - if (this.isCombobox()) { - // AutoComplete don't have notFoundContent defaultly - return notFoundContent === undefined ? null : notFoundContent; + if (notFoundContent !== undefined) { + return notFoundContent; } - return notFoundContent === undefined ? locale.notFoundContent : notFoundContent; + if (this.isCombobox()) { + return null; + } + return renderEmpty(h, 'Select'); }, isCombobox() { const { mode } = this; return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE; }, - renderSuffixIcon() { - const { prefixCls, loading } = this.$props; + renderSuffixIcon(prefixCls) { + const { loading } = this.$props; let suffixIcon = getComponentFromProp(this, 'suffixIcon'); suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon; if (suffixIcon) { @@ -151,103 +153,106 @@ const Select = { } return ; }, - - renderSelect(locale) { - const { prefixCls, size, mode, options, getPopupContainer, ...restProps } = getOptionProps( - this, - ); - const { getPopupContainer: getContextPopupContainer } = this.configProvider; - let removeIcon = getComponentFromProp(this, 'removeIcon'); - removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon; - let clearIcon = getComponentFromProp(this, 'clearIcon'); - clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon; - let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon'); - menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) - ? menuItemSelectedIcon[0] - : menuItemSelectedIcon; - const rest = omit(restProps, [ - 'inputIcon', - 'removeIcon', - 'clearIcon', - 'suffixIcon', - 'menuItemSelectedIcon', - ]); - - const cls = { - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-sm`]: size === 'small', - }; - - let { optionLabelProp } = this.$props; - if (this.isCombobox()) { - // children 带 dom 结构时,无法填入输入框 - optionLabelProp = optionLabelProp || 'value'; - } - - const modeConfig = { - multiple: mode === 'multiple', - tags: mode === 'tags', - combobox: this.isCombobox(), - }; - const finalRemoveIcon = (removeIcon && - (isValidElement(removeIcon) - ? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` }) - : removeIcon)) || ; - - const finalClearIcon = (clearIcon && - (isValidElement(clearIcon) - ? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` }) - : clearIcon)) || ( - - ); - - const finalMenuItemSelectedIcon = (menuItemSelectedIcon && - (isValidElement(menuItemSelectedIcon) - ? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` }) - : menuItemSelectedIcon)) || ; - - const selectProps = { - props: { - inputIcon: this.renderSuffixIcon(), - removeIcon: finalRemoveIcon, - clearIcon: finalClearIcon, - menuItemSelectedIcon: finalMenuItemSelectedIcon, - ...rest, - ...modeConfig, - prefixCls, - optionLabelProp: optionLabelProp || 'children', - notFoundContent: this.getNotFoundContent(locale), - maxTagPlaceholder: getComponentFromProp(this, 'maxTagPlaceholder'), - placeholder: getComponentFromProp(this, 'placeholder'), - children: options - ? options.map(option => { - const { key, label = option.title, on, class: cls, style, ...restOption } = option; - return ( - - ); - }) - : filterEmpty(this.$slots.default), - __propsSymbol__: Symbol(), - dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false), - getPopupContainer: getPopupContainer || getContextPopupContainer, - }, - on: this.$listeners, - class: cls, - ref: 'vcSelect', - }; - return ; - }, }, render() { - return ( - + const { + prefixCls: customizePrefixCls, + size, + mode, + options, + getPopupContainer, + ...restProps + } = getOptionProps(this); + + const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls; + const renderEmpty = ( + this.configProvider.renderEmpty && + this.configProvider.renderEmpty() + ) || ConfigConsumerProps.renderEmpty; + const prefixCls = getPrefixCls('select', customizePrefixCls); + + const { getPopupContainer: getContextPopupContainer } = this.configProvider; + let removeIcon = getComponentFromProp(this, 'removeIcon'); + removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon; + let clearIcon = getComponentFromProp(this, 'clearIcon'); + clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon; + let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon'); + menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon) + ? menuItemSelectedIcon[0] + : menuItemSelectedIcon; + const rest = omit(restProps, [ + 'inputIcon', + 'removeIcon', + 'clearIcon', + 'suffixIcon', + 'menuItemSelectedIcon', + ]); + + const cls = { + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + }; + + let { optionLabelProp } = this.$props; + if (this.isCombobox()) { + // children 带 dom 结构时,无法填入输入框 + optionLabelProp = optionLabelProp || 'value'; + } + + const modeConfig = { + multiple: mode === 'multiple', + tags: mode === 'tags', + combobox: this.isCombobox(), + }; + const finalRemoveIcon = (removeIcon && + (isValidElement(removeIcon) + ? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` }) + : removeIcon)) || ; + + const finalClearIcon = (clearIcon && + (isValidElement(clearIcon) + ? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` }) + : clearIcon)) || ( + ); + + const finalMenuItemSelectedIcon = (menuItemSelectedIcon && + (isValidElement(menuItemSelectedIcon) + ? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` }) + : menuItemSelectedIcon)) || ; + + const selectProps = { + props: { + inputIcon: this.renderSuffixIcon(prefixCls), + removeIcon: finalRemoveIcon, + clearIcon: finalClearIcon, + menuItemSelectedIcon: finalMenuItemSelectedIcon, + ...rest, + ...modeConfig, + prefixCls, + optionLabelProp: optionLabelProp || 'children', + notFoundContent: this.getNotFoundContent(renderEmpty), + maxTagPlaceholder: getComponentFromProp(this, 'maxTagPlaceholder'), + placeholder: getComponentFromProp(this, 'placeholder'), + children: options + ? options.map(option => { + const { key, label = option.title, on, class: cls, style, ...restOption } = option; + return ( + + ); + }) + : filterEmpty(this.$slots.default), + __propsSymbol__: Symbol(), + dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false), + getPopupContainer: getPopupContainer || getContextPopupContainer, + }, + on: this.$listeners, + class: cls, + ref: 'vcSelect', + }; + return ; }, };