feat: merge Select[multiple|tags|combobox] to Select[mode], close: #5471 (#5534)

components/auto-complete/index.tsx

@@ -98,8 +98,8 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
       <Select
         {...this.props}
         className={cls}
+        mode="combobox"
         optionLabelProp={optionLabelProp}
-        combobox
         getInputElement={this.getInputElement}
         notFoundContent={notFoundContent}
       >

components/select/demo/automatic-tokenization.md

@@ -28,7 +28,7 @@ function handleChange(value) {
 
 ReactDOM.render(
   <Select
-    tags
+    mode="tags"
     style={{ width: '100%' }}
     onChange={handleChange}
     tokenSeparators={[',']}

components/select/demo/combobox.md

@@ -41,7 +41,8 @@ class App extends React.Component {
   render() {
     // filterOption needs to be false，as the value is dynamically generated
     return (
-      <Select combobox
+      <Select
+        mode="combobox"
         style={{ width: 200 }}
         onChange={this.handleChange}
         filterOption={false}

components/select/demo/multiple.md

@@ -28,7 +28,7 @@ function handleChange(value) {
 
 ReactDOM.render(
   <Select
-    multiple
+    mode="multiple"
     style={{ width: '100%' }}
     placeholder="Please select"
     defaultValue={['a10', 'c12']}

components/select/demo/search-box.md

@@ -67,7 +67,7 @@ class SearchInput extends React.Component {
     const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
     return (
       <Select
-        combobox
+        mode="combobox"
         value={this.state.value}
         placeholder={this.props.placeholder}
         notFoundContent=""

components/select/demo/select-users.md

@@ -59,7 +59,7 @@ class UserRemoteSelect extends React.Component {
     const { fetching, data, value } = this.state;
     return (
       <Select
-        multiple
+        mode="multiple"
         labelInValue
         value={value}
         placeholder="Select users"

components/select/demo/size.md

@@ -55,7 +55,7 @@ class SelectSizesDemo extends React.Component {
         </Select>
         <br />
         <Select
-          combobox
+          mode="combobox"
           size={size}
           defaultValue="a1"
           onChange={handleChange}
@@ -65,7 +65,7 @@ class SelectSizesDemo extends React.Component {
         </Select>
         <br />
         <Select
-          multiple
+          mode="multiple"
           size={size}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
@@ -76,7 +76,7 @@ class SelectSizesDemo extends React.Component {
         </Select>
         <br />
         <Select
-          tags
+          mode="tags"
           size={size}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}

components/select/demo/tags.md

@@ -27,7 +27,8 @@ function handleChange(value) {
 }
 
 ReactDOM.render(
-  <Select tags
+  <Select
+    mode="tags"
     style={{ width: '100%' }}
     searchPlaceholder="标签模式"
     onChange={handleChange}

components/select/index.en-US.md

@@ -25,10 +25,12 @@ A Selector similar to Select2.
 |----------|----------------|----------|--------------|
 | value    | Current selected option. | string\|string[]   |  -  |
 | defaultValue | Initial selected option. | string\|string[]   |  -  |
-| multiple   | Allow multiple select. | boolean | false |
+| mode | Set mode of Select(Support after 2.9) | 'multiple' \| 'tags' \| 'combobox' | - |
+| multiple   | Allow multiple select(Deprecated after 2.9) | boolean | false |
+| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.(Deprecated after 2.9) | boolean |false |
+| combobox | Enable combobox mode(can not set multiple at the same time).(Deprecated after 2.9) | boolean | false |
 | allowClear   | Show clear button. | boolean | false |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true     |
-| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. | boolean |false |
 | onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option) | -   |
 | onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. |  function(value) | -   |
 | onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
@@ -40,7 +42,6 @@ A Selector similar to Select2.
 | dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
-| combobox | Enable combobox mode(can not set multiple at the same time). | boolean | false |
 | size    | Size of Select input. `large` `small`  | string      |      default      |
 | showSearch | Whether show search input in single mode.| boolean | false |
 | disabled | Whether disabled select | boolean | false |

components/select/index.tsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import RcSelect, { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';
+import warning from '../_util/warning';
 
 export interface AbstractSelectProps {
   prefixCls?: string;
@@ -26,9 +27,10 @@ export type SelectValue = string | any[] | LabeledValue | LabeledValue[];
 export interface SelectProps extends AbstractSelectProps {
   value?: SelectValue;
   defaultValue?: SelectValue;
-  combobox?: boolean;
+  mode?: 'default' | 'multiple' | 'tags' | 'combobox';
   multiple?: boolean;
   tags?: boolean;
+  combobox?: boolean;
   optionLabelProp?: string;
   filterOption?: boolean | ((inputValue: string, option: Object) => any);
   onChange?: (value: SelectValue) => void;
@@ -89,36 +91,58 @@ export default class Select extends React.Component<SelectProps, any> {
 
   context: SelectContext;
 
+  getLocale() {
+    const { antLocale } = this.context;
+    if (antLocale && antLocale.Select) {
+      return antLocale.Select;
+    }
+    return {
+      notFoundContent: 'Not Found',
+    };
+  }
+
   render() {
     const {
       prefixCls,
       className = '',
       size,
+      mode,
+      // @deprecated
+      multiple,
+      tags,
       combobox,
+      ...restProps,
     } = this.props;
-
-    let { notFoundContent = 'Not Found', optionLabelProp } = this.props;
+    warning(
+      !multiple && !tags && !combobox,
+      '`Select[multiple|tags|combobox]` is deprecated, please use `Select[mode]` instead.',
+    );
 
     const cls = classNames({
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-sm`]: size === 'small',
     }, className);
 
-    const { antLocale } = this.context;
-    if (antLocale && antLocale.Select) {
-      notFoundContent = ('notFoundContent' in this.props)
-        ? notFoundContent : antLocale.Select.notFoundContent;
-    }
-
-    if (combobox) {
+    const locale = this.getLocale();
+    let { notFoundContent = locale.notFoundContent, optionLabelProp } = this.props;
+    const isCombobox = mode === 'combobox' || combobox;
+    if (isCombobox) {
       notFoundContent = null;
       // children 带 dom 结构时，无法填入输入框
       optionLabelProp = optionLabelProp || 'value';
     }
 
+    const modeConfig = {
+      multiple: mode === 'multiple' || multiple,
+      tags: mode === 'tags' || tags,
+      combobox: isCombobox,
+    };
+
     return (
       <RcSelect
-        {...this.props}
+        {...restProps}
+        {...modeConfig}
+        prefixCls={prefixCls}
         className={cls}
         optionLabelProp={optionLabelProp || 'children'}
         notFoundContent={notFoundContent}

components/select/index.zh-CN.md

@@ -26,10 +26,12 @@ title: Select
 |----------|----------------|----------|--------------|
 | value    | 指定当前选中的条目 | string\|string[] |  -  |
 | defaultValue | 指定默认选中的条目 | string\|string[] |  -  |
-| multiple   | 支持多选 | boolean | false |
+| mode | 设置 Select 的模式(2.9 之后支持) | 'multiple' \| 'tags' \| 'combobox' | - |
+| multiple   | 支持多选(2.9 之后废弃) | boolean | false |
+| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配(2.9 之后废弃) | boolean |false |
+| combobox | 输入框自动提示模式(2.9 之后废弃) | boolean | false |
 | allowClear   | 支持清除 | boolean | false |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true     |
-| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配 | boolean |false |
 | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option) | -   |
 | onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 |  function(value) | -   |
 | onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | - |
@@ -41,7 +43,6 @@ title: Select
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
 | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
-| combobox | 输入框自动提示模式 | boolean | false |
 | size    | 选择框大小，可选 `large` `small`  | string      |      default      |
 | showSearch | 在选择框中显示搜索框 | boolean | false |
 | disabled | 是否禁用 | boolean | false |

site/theme/template/Layout/Header.jsx

@@ -211,7 +211,7 @@ export default class Header extends React.Component {
           <Col lg={20} md={19} sm={0} xs={0}>
             <div id="search-box">
               <Select
-                combobox
+                mode="combobox"
                 value={inputValue}
                 dropdownClassName="component-select"
                 placeholder={searchPlaceholder}