diff --git a/demo/SelectFormFieldDemo.jsx b/demo/SelectFormFieldDemo.jsx
index 20cebad..2432482 100644
--- a/demo/SelectFormFieldDemo.jsx
+++ b/demo/SelectFormFieldDemo.jsx
@@ -107,10 +107,12 @@ class Demo extends React.Component {
jsxlabel="长选项截断"
jsxname="select1"
allowClear
- dropdownClassName="select-dropdown-max-width"
+ multiple
+ dropdownStyle={{ maxWidth: 500 }}
dropdownMatchSelectWidth={false}
jsxrules={{ validator: Validators.isNotEmpty, errMsg: '不能为空' }}
disabled={false}
+ showSearch={false}
jsxdata={me.state.jsxdata2}
optionTextRender={(text) => {
let shortText = text;
@@ -207,6 +209,7 @@ class Demo extends React.Component {
closeOnSelect
onSelect={(...args) => { console.log(...args); }}
jsxname="select5"
+ jsxtips="使用 renderView 渲染 VIEW 模式"
multiple
jsxfetchUrl="http://suggest.taobao.com/sug"
dataType="jsonp"
@@ -224,16 +227,20 @@ class Demo extends React.Component {
});
return data;
}}
+ renderView={(values) => {
+ return values.map(v => (
+ {v.text}
+ ));
+ }}
/>
-
-
);
diff --git a/src/SelectFormField.jsx b/src/SelectFormField.jsx
index 55f49e7..466a873 100644
--- a/src/SelectFormField.jsx
+++ b/src/SelectFormField.jsx
@@ -17,11 +17,48 @@ import util from './util';
const { processData, transferDataToObj, getValuePropValue } = util;
const { Option } = Select;
-const selectOptions = ['onDeselect', 'getPopupContainer',
- 'multiple', 'filterOption', 'allowClear', 'combobox', 'searchPlaceholder',
- 'tags', 'disabled', 'showSearch', 'placeholder', 'optionLabelProp', 'optionFilterProp',
- 'maxTagTextLength', 'dropdownMatchSelectWidth', 'dropdownClassName', 'dropdownAlign',
- 'notFoundContent', 'labelInValue', 'defaultActiveFirstOption', 'onFocus', 'onBlur'];
+const selectOptions = [
+ 'allowClear',
+ 'autoClearSearchValue',
+ 'autoFocus',
+ 'backfill',
+ 'combobox',
+ 'defaultActiveFirstOption',
+ 'defaultOpen',
+ 'disabled',
+ 'dropdownAlign',
+ 'dropdownClassName',
+ 'dropdownMatchSelectWidth',
+ 'dropdownMenuStyle',
+ 'dropdownRender',
+ 'dropdownStyle',
+ 'filterOption',
+ 'firstActiveValue',
+ 'getInputElement',
+ 'getPopupContainer',
+ 'labelInValue',
+ 'loading',
+ 'maxTagCount',
+ 'maxTagPlaceholder',
+ 'maxTagTextLength',
+ 'menuItemSelectedIcon',
+ 'multiple',
+ 'notFoundContent',
+ 'onBlur',
+ 'onDeselect',
+ 'onFocus',
+ 'onInputKeyDown',
+ 'onPopupScroll',
+ 'open',
+ 'optionFilterProp',
+ 'optionLabelProp',
+ 'placeholder',
+ 'searchPlaceholder',
+ 'showAction',
+ 'showArrow',
+ 'showSearch',
+ 'tags',
+];
class SelectFormField extends FormField {
static getDerivedStateFromProps = (props, state) => {
@@ -64,6 +101,8 @@ class SelectFormField extends FormField {
/**
* select inner method is used, not very reliable
+ *
+ * @deprecated
*/
resetSelect() {
const me = this;
@@ -71,13 +110,9 @@ class SelectFormField extends FormField {
if (multiple && closeOnSelect) {
if (typeof me.select.setInputValue === 'function') {
me.select.setInputValue('');
- } else {
- console.warn('select.setInputValue is invalid');
}
if (typeof me.select.setOpenState === 'function') {
me.select.setOpenState(false, false);
- } else {
- console.warn('select.setOpenState is invalid');
}
}
}
@@ -290,34 +325,60 @@ class SelectFormField extends FormField {
/* eslint-enable no-underscore-dangle */
} else if (mode === Constants.MODE.VIEW) {
let str = '';
+ const renderValues = [];
const splitter = ', \u00a0';
if (me.state.value) {
const value = me.processValue();
const values = !Array.isArray(value) ? [value] : value;
- // labelInValue mode
if (me.props.jsxfetchUrl || me.props.onSearch || me.props.labelInValue) {
- str = values.map(item => (item.label || item.key)).join(splitter);
+ // labelInValue mode
+ str = values.map((item) => {
+ const label = item.label || item.key;
+
+ renderValues.push({
+ value: item.key,
+ text: label,
+ });
+
+ return label;
+ }).join(splitter);
} else if (me.props.children) {
//