Skip to content

Commit

Permalink
feat(Transfer): transfer support different search config between panels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinchanz
jinchanz committed Feb 9, 2022
1 parent fcc451d commit b33bb7c
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 11 deletions.
2 changes: 1 addition & 1 deletion docs/transfer/demo/search.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ class Demo extends React.Component {
}

render() {
return (<Transfer showSearch searchProps={{
return (<Transfer showSearch={[true, false]} searchProps={{
hasClear: true
}} defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Searchable', 'Searchable']} />);
}
Expand Down
4 changes: 2 additions & 2 deletions docs/transfer/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ Move the items in two panels in an intuitive way to select.
| onChange | callback function triggered when value change<br><br>**signatures**:<br>Function(value: Array, data: Array, extra: Object) => void<br>**params**:<br>_value_: {Array} value of right panel<br>_data_: {Array} data of right panel<br>_extra_: {Object} extra parmas<br>_extra.leftValue_: {Array} value of left panel<br>_extra.leftData_: {Array} data of left panel<br>_extra.movedValue_: {Array} moved value<br>_extra.movedData_: {Object} moved data<br>_extra.direction_: {String} move direction, 'left' or 'right' | Function | - |
| onSelect | callback function triggered when item checked<br><br>**signatures**:<br>Function(sourceSelectedValue: Array, targetSelectedValue: Array, trigger: String) => void<br>**params**:<br>_sourceSelectedValue_: {Array} value of checked items in source panel<br>_targetSelectedValue_: {Array} value of checked items in target panel<br>_trigger_: {String} trigger panel `source|target`<br> | Function | - |
| itemRender | item render function<br><br>**signatures**:<br>Function(data: Object) => ReactNode<br>**params**:<br>_data_: {Object} data<br>**returns**:<br>{ReactNode} content of item<br> | Function | data => data.label |
| showSearch | whether to show the search box | Boolean | false |
| searchProps | props passed to Search when showSearch is true | Object | - |
| showSearch | whether to show the search box | Boolean/Array&lt;Boolean> | false |
| searchProps | props passed to Search when showSearch is true | Object/Array&lt;Object> | - |
| filter | custom search function<br><br>**signatures**:<br>Function(searchedValue: String, data: Object) => Boolean<br>**params**:<br>_searchedValue_: {String} search keyword<br>_data_: {Object} data<br>**returns**:<br>{Boolean} whether is matched<br> | Function | filter by label |
| onSearch | callback function triggered when search<br><br>**signatures**:<br>Function(searchedValue: String, position: String) => void<br>**params**:<br>_searchedValue_: {String} search keyword<br>_position_: {String} position of the search box | Function | () => {} |
| searchPlaceholder | placeholder of the search box | String | - |
Expand Down
4 changes: 2 additions & 2 deletions docs/transfer/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@
| leftDisabled | 是否禁用左侧面板 | Boolean | false |
| rightDisabled | 是否禁用右侧面板 | Boolean | false |
| itemRender | 列表项渲染函数<br/><br/>**签名**:<br/>Function(data: Object) => ReactNode<br/>**参数**:<br/>_data_: {Object} 数据<br/>**返回值**:<br/>{ReactNode} 列表项内容<br/> | Function | data => data.label |
| showSearch | 是否显示搜索框 | Boolean | false |
| searchProps | 搜索框配置项，同 Search 组件 props | Object | - |
| showSearch | 是否显示搜索框 | Boolean/Array&lt;Boolean> | false |
| searchProps | 搜索框配置项，同 Search 组件 props | Object/Array&lt;Object> | - |
| filter | 自定义搜索函数<br/><br/>**签名**:<br/>Function(searchedValue: String, data: Object) => Boolean<br/>**参数**:<br/>_searchedValue_: {String} 搜索的内容<br/>_data_: {Object} 数据<br/>**返回值**:<br/>{Boolean} 是否匹配到<br/> | Function | 根据 label 属性匹配 |
| onSearch | 搜索框输入时触发的回调函数<br/><br/>**签名**:<br/>Function(searchedValue: String, position: String) => void<br/>**参数**:<br/>_searchedValue_: {String} 搜索的内容<br/>_position_: {String} 搜索面板的位置 | Function | () => {} |
| searchPlaceholder | 搜索框占位符 | String | - |
Expand Down
16 changes: 10 additions & 6 deletions src/transfer/view/transfer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,11 +112,11 @@ class Transfer extends Component {
/**
* 是否显示搜索框
*/
showSearch: PropTypes.bool,
showSearch: PropTypes.bool | PropTypes.arrayOf(PropTypes.bool),
/**
* 搜索框配置项，同 Search 组件 props
*/
searchProps: PropTypes.object,
searchProps: PropTypes.object | PropTypes.arrayOf(PropTypes.object),
/**
* 自定义搜索函数
* @param {String} searchedValue 搜索的内容
Expand Down Expand Up @@ -506,8 +506,8 @@ class Transfer extends Component {
className,
dataSource,
locale,
showSearch,
searchProps,
showSearch = false,
searchProps = {},
filter,
onSearch,
leftDisabled,
Expand All @@ -533,8 +533,6 @@ class Transfer extends Component {
prefix,
mode,
locale,
showSearch,
searchProps,
filter,
onSearch,
searchPlaceholder,
Expand All @@ -557,6 +555,8 @@ class Transfer extends Component {
if (rtl) {
others.dir = 'rtl';
}
const _showSearch = Array.isArray(showSearch) ? showSearch : [showSearch, showSearch];
const _searchProps = Array.isArray(searchProps) ? searchProps : [searchProps, searchProps];
return (
<div className={cx(`${prefix}transfer`, className)} id={id} {...others}>
<TransferPanel
Expand All @@ -565,6 +565,8 @@ class Transfer extends Component {
dataSource={leftDatasource}
disabled={leftDisabled || disabled}
value={leftCheckedValue}
showSearch={_showSearch[0]}
searchProps={_searchProps[0]}
title={titles[0]}
/>
{this.renderCenter()}
Expand All @@ -574,6 +576,8 @@ class Transfer extends Component {
dataSource={rightDatasource}
disabled={rightDisabled || disabled}
value={rightCheckedValue}
showSearch={_showSearch[1]}
searchProps={_searchProps[1]}
title={titles[1]}
/>
</div>
Expand Down

0 comments on commit b33bb7c

Please sign in to comment.