feat: update select

components/select/__tests__/index.test.js

@@ -33,7 +33,7 @@ describe('Select', () => {
           .findAll({ name: 'MenuItem' })
           .at(0)
           .text(),
-      ).toBe('Not Found');
+      ).toBe('No Data');
     });
   });
 

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 { ConfigConsumerProps } from '../config-provider';
-import defaultLocale from '../locale-provider/default';
 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()) {
+      if (notFoundContent !== undefined) {
-        // AutoComplete don't have notFoundContent defaultly
+        return notFoundContent;
-        return notFoundContent === undefined ? null : 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() {
+    renderSuffixIcon(prefixCls) {
-      const { prefixCls, loading } = this.$props;
+      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 <Icon type="down" class={`${prefixCls}-arrow-icon`} />;
     },
-
-    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)) || <Icon type="close" class={`${prefixCls}-remove-icon`} />;
-
-      const finalClearIcon = (clearIcon &&
-        (isValidElement(clearIcon)
-          ? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
-          : clearIcon)) || (
-        <Icon type="close-circle" theme="filled" class={`${prefixCls}-clear-icon`} />
-      );
-
-      const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
-        (isValidElement(menuItemSelectedIcon)
-          ? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
-          : menuItemSelectedIcon)) || <Icon type="check" class={`${prefixCls}-selected-icon`} />;
-
-      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 (
-                  <Option key={key} {...{ props: restOption, on, class: cls, style }}>
-                    {label}
-                  </Option>
-                );
-              })
-            : filterEmpty(this.$slots.default),
-          __propsSymbol__: Symbol(),
-          dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
-          getPopupContainer: getPopupContainer || getContextPopupContainer,
-        },
-        on: this.$listeners,
-        class: cls,
-        ref: 'vcSelect',
-      };
-      return <VcSelect {...selectProps} />;
-    },
   },
   render() {
-    return (
+    const {
-      <LocaleReceiver
+      prefixCls: customizePrefixCls,
-        componentName="Select"
+      size,
-        defaultLocale={defaultLocale.Select}
+      mode,
-        scopedSlots={{ default: this.renderSelect }}
+      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)) || <Icon type="close" class={`${prefixCls}-remove-icon`} />;
+
+    const finalClearIcon = (clearIcon &&
+      (isValidElement(clearIcon)
+        ? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
+        : clearIcon)) || (
+      <Icon type="close-circle" theme="filled" class={`${prefixCls}-clear-icon`} />
     );
+
+    const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
+      (isValidElement(menuItemSelectedIcon)
+        ? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
+        : menuItemSelectedIcon)) || <Icon type="check" class={`${prefixCls}-selected-icon`} />;
+
+    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 (
+                <Option key={key} {...{ props: restOption, on, class: cls, style }}>
+                  {label}
+                </Option>
+              );
+            })
+          : filterEmpty(this.$slots.default),
+        __propsSymbol__: Symbol(),
+        dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
+        getPopupContainer: getPopupContainer || getContextPopupContainer,
+      },
+      on: this.$listeners,
+      class: cls,
+      ref: 'vcSelect',
+    };
+    return <VcSelect {...selectProps} />;
   },
 };