diff --git a/components/transfer/index.jsx b/components/transfer/index.jsx index c9651b8d80..79b0c6ba9c 100644 --- a/components/transfer/index.jsx +++ b/components/transfer/index.jsx @@ -1,5 +1,5 @@ import React, { PropTypes } from 'react'; -import List from './list'; +import List, { isRenderResultPlainObject } from './list'; import Operation from './operation'; import Search from './search'; import classNames from 'classnames'; @@ -23,7 +23,7 @@ export default class Transfer extends React.Component { showSearch: false, body: noop, footer: noop, - } + }; static propTypes = { prefixCls: PropTypes.string, @@ -41,7 +41,7 @@ export default class Transfer extends React.Component { notFoundContent: PropTypes.node, body: PropTypes.func, footer: PropTypes.func, - } + }; constructor(props) { super(props); @@ -129,7 +129,14 @@ export default class Transfer extends React.Component { filterDataSource(dataSource, filter) { return dataSource.filter(item => { - const itemText = this.props.render(item); + const renderResult = this.props.render(item); + let itemText; + if (isRenderResultPlainObject(renderResult)) { + itemText = renderResult.value; + } else { + itemText = renderResult; + } + return this.matchFilter(itemText, filter); }); } @@ -204,6 +211,7 @@ export default class Transfer extends React.Component { const { prefixCls, titles, operations, showSearch, notFoundContent, searchPlaceholder, body, footer, listStyle, className, + render, } = this.props; const { leftFilter, rightFilter, leftCheckedKeys, rightCheckedKeys } = this.state; @@ -232,7 +240,7 @@ export default class Transfer extends React.Component { handleSelect={this.handleLeftSelect} handleSelectAll={this.handleLeftSelectAll} position="left" - render={this.props.render} + render={render} showSearch={showSearch} searchPlaceholder={searchPlaceholder} notFoundContent={notFoundContent} @@ -257,7 +265,7 @@ export default class Transfer extends React.Component { handleSelect={this.handleRightSelect} handleSelectAll={this.handleRightSelectAll} position="right" - render={this.props.render} + render={render} showSearch={showSearch} searchPlaceholder={searchPlaceholder} notFoundContent={notFoundContent} diff --git a/components/transfer/list.jsx b/components/transfer/list.jsx index ef80360280..ae9db4d8c0 100644 --- a/components/transfer/list.jsx +++ b/components/transfer/list.jsx @@ -7,6 +7,11 @@ import Animate from 'rc-animate'; function noop() { } +export function isRenderResultPlainObject(result) { + return result && !React.isValidElement(result) && + Object.prototype.toString.call(result) === '[object Object]'; +} + export default class TransferList extends React.Component { static defaultProps = { dataSource: [], @@ -19,7 +24,7 @@ export default class TransferList extends React.Component { // advanced body: noop, footer: noop, - } + }; static propTypes = { prefixCls: PropTypes.string, @@ -34,11 +39,11 @@ export default class TransferList extends React.Component { render: PropTypes.func, body: PropTypes.func, footer: PropTypes.func, - } + }; static contextTypes = { antLocale: React.PropTypes.object, - } + }; constructor(props) { super(props); @@ -101,7 +106,7 @@ export default class TransferList extends React.Component { render() { const { prefixCls, dataSource, titleText, filter, checkedKeys, - checkStatus, body, footer, showSearch } = this.props; + checkStatus, body, footer, showSearch, render } = this.props; let { searchPlaceholder, notFoundContent } = this.props; @@ -115,15 +120,33 @@ export default class TransferList extends React.Component { }); const showItems = dataSource.filter((item) => { - const itemText = this.props.render(item); + const renderResult = render(item); + let itemText; + if (isRenderResultPlainObject(renderResult)) { + itemText = renderResult.value; + } else { + itemText = renderResult; + } + const filterResult = this.matchFilter(itemText, filter); return !!filterResult; }).map((item) => { - const renderedText = this.props.render(item); + const renderResult = render(item); + let renderedText; + let renderedEl; + + if (isRenderResultPlainObject(renderResult)) { + renderedText = renderResult.value; + renderedEl = renderResult.label; + } else { + renderedText = renderResult; + renderedEl = renderResult; + } + return (
  • { this.handleSelect(item); }} key={item.key} title={renderedText}> key === item.key)} /> - {renderedText} + {renderedEl}
  • ); });