feat: support Transfer[filterOption], close: #2324

This commit is contained in:
Benjy Cui 2016-08-05 10:49:54 +08:00
parent f869943c5c
commit 6687c12b82
4 changed files with 18 additions and 5 deletions

View File

@ -3,7 +3,7 @@ order: 1
title: 带搜索框
---
带搜索框的穿梭框。
带搜索框的穿梭框,可以自定义搜索函数
````jsx
import { Transfer } from 'antd';
@ -35,6 +35,9 @@ const App = React.createClass({
}
this.setState({ mockData, targetKeys });
},
filterOption(inputValue, option) {
return option.description.indexOf(inputValue) > -1;
},
handleChange(targetKeys) {
this.setState({ targetKeys });
},
@ -43,6 +46,7 @@ const App = React.createClass({
<Transfer
dataSource={this.state.mockData}
showSearch
filterOption={this.filterOption}
targetKeys={this.state.targetKeys}
onChange={this.handleChange}
render={item => item.title}

View File

@ -37,6 +37,7 @@ export default class Transfer extends React.Component {
titles: PropTypes.array,
operations: PropTypes.array,
showSearch: PropTypes.bool,
filterOption: PropTypes.func,
searchPlaceholder: PropTypes.string,
notFoundContent: PropTypes.node,
body: PropTypes.func,
@ -187,7 +188,7 @@ export default class Transfer extends React.Component {
const {
prefixCls, titles, operations, showSearch, notFoundContent,
searchPlaceholder, body, footer, listStyle, className,
render,
filterOption, render,
} = this.props;
const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state;
@ -205,6 +206,7 @@ export default class Transfer extends React.Component {
<List titleText={titles[0]}
dataSource={leftDataSource}
filter={leftFilter}
filterOption={filterOption}
style={listStyle}
checkedKeys={leftCheckedKeys}
handleFilter={this.handleLeftFilter}
@ -230,6 +232,7 @@ export default class Transfer extends React.Component {
<List titleText={titles[1]}
dataSource={rightDataSource}
filter={rightFilter}
filterOption={filterOption}
style={listStyle}
checkedKeys={rightCheckedKeys}
handleFilter={this.handleRightFilter}

View File

@ -26,6 +26,7 @@ english: Transfer
| titles | 标题集合,顺序从左至右 | Array | ['源列表', '目的列表'] |
| operations | 操作文案集合,顺序从上至下 | Array | [] |
| showSearch | 是否显示搜索框 | Boolean | false |
| filterOption | 接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。| Function(inputValue, option) | |
| searchPlaceholder | 搜索框的默认值 | String | '请输入搜索内容' |
| notFoundContent | 当列表为空时显示的内容 | React.node | '列表为空' |
| footer | 底部渲染函数 | Function(props) | |
@ -39,4 +40,4 @@ english: Transfer
```jsx
// 比如你的数据主键是 uid
return <Transfer rowKey={record => record.uid} />;
```
```

View File

@ -32,6 +32,7 @@ export default class TransferList extends React.Component {
prefixCls: PropTypes.string,
dataSource: PropTypes.array,
showSearch: PropTypes.bool,
filterOption: PropTypes.func,
searchPlaceholder: PropTypes.string,
titleText: PropTypes.string,
style: PropTypes.object,
@ -116,7 +117,11 @@ export default class TransferList extends React.Component {
);
}
matchFilter(text, filterText) {
matchFilter(filterText, item, text) {
const filterOption = this.props.filterOption;
if (filterOption) {
return filterOption(filterText, item);
}
return text.indexOf(filterText) >= 0;
}
@ -150,7 +155,7 @@ export default class TransferList extends React.Component {
renderedEl = renderResult;
}
if (filter && filter.trim() && !this.matchFilter(renderedText, filter)) {
if (filter && filter.trim() && !this.matchFilter(filter, item, renderedText)) {
return null;
}