mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 04:13:13 +08:00
feat: support Transfer[filterOption], close: #2324
This commit is contained in:
parent
f869943c5c
commit
6687c12b82
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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} />;
|
||||
```
|
||||
```
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user