Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Transfer): transfer support different search config between panels #3724

Merged
merged 1 commit into from
Feb 10, 2022
Merged

feat(Transfer): transfer support different search config between panels #3724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/transfer/demo/search.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ 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']} />);
}} defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Searchable', 'Searchable']} notFoundContent={['left not found', 'right not found']} />);
}
}

Expand Down
6 changes: 3 additions & 3 deletions docs/transfer/index.en-us.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ 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 | - |
| notFoundContent | content when list is empty | ReactNode | 'Not Found' |
| notFoundContent | content when list is empty | ReactNode/Array&lt;ReactNode> | 'Not Found' |
| titles | titles of left and right panel | Array&lt;ReactNode> | \[] |
| operations | text of move buttons | Array&lt;ReactNode> | [&lt;Icon type="arrow-right" /&gt;, &lt;Icon type="arrow-left" /&gt;] |
| defaultLeftChecked | default checked value of left panel | Array&lt;String> | \[] |
Expand Down
6 changes: 3 additions & 3 deletions docs/transfer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,12 @@
| 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 | - |
| notFoundContent | 列表为空显示内容 | ReactNode | 'Not Found' |
| notFoundContent | 列表为空显示内容 | ReactNode/Array&lt;ReactNode> | 'Not Found' |
| titles | 左右面板标题 | Array&lt;ReactNode> | \[] |
| operations | 向右向左移动按钮显示内容 | Array&lt;ReactNode> | [&lt;Icon type="arrow-right" /&gt;, &lt;Icon type="arrow-left" /&gt;] |
| defaultLeftChecked | 左面板默认选中值 | Array&lt;String> | \[] |
Expand Down
26 changes: 16 additions & 10 deletions src/transfer/view/transfer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@ class Transfer extends Component {
*/
itemRender: PropTypes.func,
/**
* 是否显示搜索框
* 左右面板是否显示搜索框
*/
showSearch: PropTypes.bool,
showSearch: PropTypes.bool | PropTypes.arrayOf(PropTypes.bool),
/**
* 搜索框配置项，同 Search 组件 props
* 左右面板搜索框配置项，同 Search 组件 props
*/
searchProps: PropTypes.object,
searchProps: PropTypes.object | PropTypes.arrayOf(PropTypes.object),
/**
* 自定义搜索函数
* @param {String} searchedValue 搜索的内容
Expand All @@ -138,7 +138,7 @@ class Transfer extends Component {
/**
* 列表为空显示内容
*/
notFoundContent: PropTypes.node,
notFoundContent: PropTypes.node | PropTypes.arrayOf(PropTypes.node),
/**
* 左右面板标题
*/
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,12 +533,9 @@ class Transfer extends Component {
prefix,
mode,
locale,
showSearch,
searchProps,
filter,
onSearch,
searchPlaceholder,
notFoundContent,
listClassName,
listStyle,
itemRender,
Expand All @@ -557,6 +554,9 @@ 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];
const _notFoundContent = Array.isArray(notFoundContent) ? notFoundContent : [notFoundContent, notFoundContent];
return (
<div className={cx(`${prefix}transfer`, className)} id={id} {...others}>
<TransferPanel
Expand All @@ -565,6 +565,9 @@ class Transfer extends Component {
dataSource={leftDatasource}
disabled={leftDisabled || disabled}
value={leftCheckedValue}
showSearch={_showSearch[0]}
searchProps={_searchProps[0]}
notFoundContent={_notFoundContent[0]}
title={titles[0]}
/>
{this.renderCenter()}
Expand All @@ -574,6 +577,9 @@ class Transfer extends Component {
dataSource={rightDatasource}
disabled={rightDisabled || disabled}
value={rightCheckedValue}
showSearch={_showSearch[1]}
searchProps={_searchProps[1]}
notFoundContent={_notFoundContent[1]}
title={titles[1]}
/>
</div>
Expand Down
Loading