Skip to content

Commit

Permalink
feat(Transfer): transfer support different search config between pane…
Browse files Browse the repository at this point in the history 
…ls (alibaba-fusion#3724), close alibaba-fusion#3664
  • Loading branch information
@jinchanz
jinchanz authored Feb 10, 2022
1 parent 6e2c156 commit 2ce740f
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 21 deletions.
4 changes: 2 additions & 2 deletions docs/transfer/demo/search.md
View file
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
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
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
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

0 comments on commit 2ce740f

Please sign in to comment.