Skip to content

Commit 4193d24

Browse files
wangxueliangwangxueliang
committed
feat: update select
1 parent 3c4cc8e commit 4193d24

File tree

2 files changed

+105
-100
lines changed

2 files changed

+105
-100
lines changed

‎components/select/__tests__/index.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('Select', () => {
3333
.findAll({ name: 'MenuItem' })
3434
.at(0)
3535
.text(),
36-
).toBe('Not Found');
36+
).toBe('No Data');
3737
});
3838
});
3939

‎components/select/index.jsx

Lines changed: 104 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import warning from 'warning';
22
import omit from 'omit.js';
33
import PropTypes from '../_util/vue-types';
44
import { Select as VcSelect, Option, OptGroup } from '../vc-select';
5-
import LocaleReceiver from '../locale-provider/LocaleReceiver';
6-
import defaultLocale from '../locale-provider/default';
5+
import { ConfigConsumerProps } from '../config-provider';
76
import {
87
getComponentFromProp,
98
getOptionProps,
@@ -96,7 +95,7 @@ const Select = {
9695
name: 'ASelect',
9796
props: {
9897
...SelectProps,
99-
prefixCls: PropTypes.string.def('ant-select'),
98+
prefixCls: PropTypes.string,
10099
showSearch: PropTypes.bool.def(false),
101100
transitionName: PropTypes.string.def('slide-up'),
102101
choiceTransitionName: PropTypes.string.def('zoom'),
@@ -124,21 +123,24 @@ const Select = {
124123
blur() {
125124
this.$refs.vcSelect.blur();
126125
},
127-
getNotFoundContent(locale) {
126+
getNotFoundContent(renderEmpty) {
127+
const h = this.$createElement;
128128
const notFoundContent = getComponentFromProp(this, 'notFoundContent');
129+
if (notFoundContent !== undefined) {
130+
return notFoundContent;
131+
}
129132
if (this.isCombobox()) {
130-
// AutoComplete don't have notFoundContent defaultly
131-
return notFoundContent === undefined ? null : notFoundContent;
133+
return null;
132134
}
133-
return notFoundContent === undefined ? locale.notFoundContent : notFoundContent;
135+
return renderEmpty(h, 'Select');
134136
},
135137
isCombobox() {
136138
const { mode } = this;
137139
return mode === 'combobox' || mode === SECRET_COMBOBOX_MODE_DO_NOT_USE;
138140
},
139141

140-
renderSuffixIcon() {
141-
const { prefixCls, loading } = this.$props;
142+
renderSuffixIcon(prefixCls) {
143+
const { loading } = this.$props;
142144
let suffixIcon = getComponentFromProp(this, 'suffixIcon');
143145
suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
144146
if (suffixIcon) {
@@ -151,103 +153,106 @@ const Select = {
151153
}
152154
return <Icon type="down" class={`${prefixCls}-arrow-icon`} />;
153155
},
156+
},
157+
render() {
158+
const {
159+
prefixCls: customizePrefixCls,
160+
size,
161+
mode,
162+
options,
163+
getPopupContainer,
164+
...restProps
165+
} = getOptionProps(this);
154166

155-
renderSelect(locale) {
156-
const { prefixCls, size, mode, options, getPopupContainer, ...restProps } = getOptionProps(
157-
this,
158-
);
159-
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
160-
let removeIcon = getComponentFromProp(this, 'removeIcon');
161-
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
162-
let clearIcon = getComponentFromProp(this, 'clearIcon');
163-
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
164-
let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon');
165-
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon)
166-
? menuItemSelectedIcon[0]
167-
: menuItemSelectedIcon;
168-
const rest = omit(restProps, [
169-
'inputIcon',
170-
'removeIcon',
171-
'clearIcon',
172-
'suffixIcon',
173-
'menuItemSelectedIcon',
174-
]);
175-
176-
const cls = {
177-
[`${prefixCls}-lg`]: size === 'large',
178-
[`${prefixCls}-sm`]: size === 'small',
179-
};
167+
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
168+
const renderEmpty = (
169+
this.configProvider.renderEmpty &&
170+
this.configProvider.renderEmpty()
171+
) || ConfigConsumerProps.renderEmpty;
172+
const prefixCls = getPrefixCls('select', customizePrefixCls);
180173

181-
let { optionLabelProp } = this.$props;
182-
if (this.isCombobox()) {
183-
// children 带 dom 结构时，无法填入输入框
184-
optionLabelProp = optionLabelProp || 'value';
185-
}
174+
const { getPopupContainer: getContextPopupContainer } = this.configProvider;
175+
let removeIcon = getComponentFromProp(this, 'removeIcon');
176+
removeIcon = Array.isArray(removeIcon) ? removeIcon[0] : removeIcon;
177+
let clearIcon = getComponentFromProp(this, 'clearIcon');
178+
clearIcon = Array.isArray(clearIcon) ? clearIcon[0] : clearIcon;
179+
let menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon');
180+
menuItemSelectedIcon = Array.isArray(menuItemSelectedIcon)
181+
? menuItemSelectedIcon[0]
182+
: menuItemSelectedIcon;
183+
const rest = omit(restProps, [
184+
'inputIcon',
185+
'removeIcon',
186+
'clearIcon',
187+
'suffixIcon',
188+
'menuItemSelectedIcon',
189+
]);
186190

187-
const modeConfig = {
188-
multiple: mode === 'multiple',
189-
tags: mode === 'tags',
190-
combobox: this.isCombobox(),
191-
};
192-
const finalRemoveIcon = (removeIcon &&
193-
(isValidElement(removeIcon)
194-
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
195-
: removeIcon)) || <Icon type="close" class={`${prefixCls}-remove-icon`} />;
191+
const cls = {
192+
[`${prefixCls}-lg`]: size === 'large',
193+
[`${prefixCls}-sm`]: size === 'small',
194+
};
196195

197-
const finalClearIcon = (clearIcon &&
198-
(isValidElement(clearIcon)
199-
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
200-
: clearIcon)) || (
201-
<Icon type="close-circle" theme="filled" class={`${prefixCls}-clear-icon`} />
202-
);
196+
let { optionLabelProp } = this.$props;
197+
if (this.isCombobox()) {
198+
// children 带 dom 结构时，无法填入输入框
199+
optionLabelProp = optionLabelProp || 'value';
200+
}
203201

204-
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
205-
(isValidElement(menuItemSelectedIcon)
206-
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
207-
: menuItemSelectedIcon)) || <Icon type="check" class={`${prefixCls}-selected-icon`} />;
202+
const modeConfig = {
203+
multiple: mode === 'multiple',
204+
tags: mode === 'tags',
205+
combobox: this.isCombobox(),
206+
};
207+
const finalRemoveIcon = (removeIcon &&
208+
(isValidElement(removeIcon)
209+
? cloneElement(removeIcon, { class: `${prefixCls}-remove-icon` })
210+
: removeIcon)) || <Icon type="close" class={`${prefixCls}-remove-icon`} />;
208211

209-
const selectProps = {
210-
props: {
211-
inputIcon: this.renderSuffixIcon(),
212-
removeIcon: finalRemoveIcon,
213-
clearIcon: finalClearIcon,
214-
menuItemSelectedIcon: finalMenuItemSelectedIcon,
215-
...rest,
216-
...modeConfig,
217-
prefixCls,
218-
optionLabelProp: optionLabelProp || 'children',
219-
notFoundContent: this.getNotFoundContent(locale),
220-
maxTagPlaceholder: getComponentFromProp(this, 'maxTagPlaceholder'),
221-
placeholder: getComponentFromProp(this, 'placeholder'),
222-
children: options
223-
? options.map(option => {
224-
const { key, label = option.title, on, class: cls, style, ...restOption } = option;
225-
return (
226-
<Option key={key} {...{ props: restOption, on, class: cls, style }}>
227-
{label}
228-
</Option>
229-
);
230-
})
231-
: filterEmpty(this.$slots.default),
232-
__propsSymbol__: Symbol(),
233-
dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
234-
getPopupContainer: getPopupContainer || getContextPopupContainer,
235-
},
236-
on: this.$listeners,
237-
class: cls,
238-
ref: 'vcSelect',
239-
};
240-
return <VcSelect {...selectProps} />;
241-
},
242-
},
243-
render() {
244-
return (
245-
<LocaleReceiver
246-
componentName="Select"
247-
defaultLocale={defaultLocale.Select}
248-
scopedSlots={{ default: this.renderSelect }}
249-
/>
212+
const finalClearIcon = (clearIcon &&
213+
(isValidElement(clearIcon)
214+
? cloneElement(clearIcon, { class: `${prefixCls}-clear-icon` })
215+
: clearIcon)) || (
216+
<Icon type="close-circle" theme="filled" class={`${prefixCls}-clear-icon`} />
250217
);
218+
219+
const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
220+
(isValidElement(menuItemSelectedIcon)
221+
? cloneElement(menuItemSelectedIcon, { class: `${prefixCls}-selected-icon` })
222+
: menuItemSelectedIcon)) || <Icon type="check" class={`${prefixCls}-selected-icon`} />;
223+
224+
const selectProps = {
225+
props: {
226+
inputIcon: this.renderSuffixIcon(prefixCls),
227+
removeIcon: finalRemoveIcon,
228+
clearIcon: finalClearIcon,
229+
menuItemSelectedIcon: finalMenuItemSelectedIcon,
230+
...rest,
231+
...modeConfig,
232+
prefixCls,
233+
optionLabelProp: optionLabelProp || 'children',
234+
notFoundContent: this.getNotFoundContent(renderEmpty),
235+
maxTagPlaceholder: getComponentFromProp(this, 'maxTagPlaceholder'),
236+
placeholder: getComponentFromProp(this, 'placeholder'),
237+
children: options
238+
? options.map(option => {
239+
const { key, label = option.title, on, class: cls, style, ...restOption } = option;
240+
return (
241+
<Option key={key} {...{ props: restOption, on, class: cls, style }}>
242+
{label}
243+
</Option>
244+
);
245+
})
246+
: filterEmpty(this.$slots.default),
247+
__propsSymbol__: Symbol(),
248+
dropdownRender: getComponentFromProp(this, 'dropdownRender', {}, false),
249+
getPopupContainer: getPopupContainer || getContextPopupContainer,
250+
},
251+
on: this.$listeners,
252+
class: cls,
253+
ref: 'vcSelect',
254+
};
255+
return <VcSelect {...selectProps} />;
251256
},
252257
};
253258

0 commit comments

Comments
 (0)