test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Benjy Cui 2017-03-28 21:27:58 +08:00 committed by 偏右
parent 675e037e7a
commit 50f46d0919
12 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/auto-complete/index.tsx
View File

@ -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}
>

2
components/select/demo/automatic-tokenization.md
View File

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

3
components/select/demo/combobox.md
View File

@ -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}

2
components/select/demo/multiple.md
View File

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

2
components/select/demo/search-box.md
View File

@ -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=""

2
components/select/demo/select-users.md
View File

@ -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"

6
components/select/demo/size.md
View File

@ -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']}

3
components/select/demo/tags.md
View File

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

7
components/select/index.en-US.md
View File

@ -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 |

46
components/select/index.tsx
View File

@ -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}

7
components/select/index.zh-CN.md
View File

@ -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 |

2
site/theme/template/Layout/Header.jsx
View File

@ -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}