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) { //