Skip to content

Commit

Permalink
docs: AutoComplete document and demo improvement (ant-design#4840)
Browse files Browse the repository at this point in the history
*  AutoComplete document and demo improvement

 + add a non-case-sensitive demo, close ant-design#4834.
 + remove confusing descriptions from document, close ant-design#4805.

* add snapshot
  • Loading branch information
RaoHai authored and benjycui committed Feb 13, 2017
1 parent e5ccc1d commit 135fd52
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 4 deletions.
44 changes: 44 additions & 0 deletions components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,50 @@ exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
</div>
`;

exports[`test renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
style="width:200px;">
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="ant-select-selection
ant-select-selection--single"
role="combobox">
<div
class="ant-select-selection__rendered">
<div
class="ant-select-selection__placeholder"
style="display:block;user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
try to type \`b\`
</div>
<ul>
<li
class="ant-select-search ant-select-search--inline">
<div
class="ant-select-search__field__wrap">
<input
class="ant-input ant-input ant-select-search__field"
type="text"
value="" />
<span
class="ant-select-search__field__mirror" />
</div>
</li>
</ul>
</div>
<span
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
<b />
</span>
</div>
</div>
`;

exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] = `
<div
class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
Expand Down
31 changes: 31 additions & 0 deletions components/auto-complete/demo/non-case-sensitive.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
order: 3
title:
zh-CN: 不区分大小写
en-US: Non-case-sensitive AutoComplete
---

## zh-CN

不区分大小写的 AutoComplete

## en-US

A non-case-sensitive AutoComplete

````jsx
import { AutoComplete } from 'antd';

const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];

function Complete() {
return (<AutoComplete
style={{ width: 200 }}
dataSource={dataSource}
placeholder="try to type `b`"
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
/>);
}

ReactDOM.render(<Complete />, mountNode);
````
2 changes: 1 addition & 1 deletion components/auto-complete/demo/uncertain-category.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
order: 3
order: 4
title:
zh-CN: 查询模式 - 不确定类目
en-US: Lookup-Patterns - Uncertain Category
Expand Down
2 changes: 1 addition & 1 deletion components/auto-complete/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ When there is a need for autocomplete functionality.
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.

| Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------|
Expand All @@ -31,3 +30,4 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
| placeholder | placeholder of input | string | - |
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| 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 |
4 changes: 2 additions & 2 deletions components/auto-complete/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
category: Components
subtitle: 自动完成
type: Data Entry
cols: 1
cols: 2
title: AutoComplete
---

Expand All @@ -18,7 +18,6 @@ title: AutoComplete
const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
因为 `AutoComplete` 是基于 `Select` 封装的,所以除了以下 API 外,`AutoComplete``Select` 拥有一样的 API。

| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
Expand All @@ -33,3 +32,4 @@ const dataSource = ['12345', '23456', '34567'];
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`| string | `children` |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`| boolean or function(inputValue, option) | true |

0 comments on commit 135fd52

Please sign in to comment.