2016-07-01 20:52:17 +08:00
|
|
|
import * as React from 'react';
|
2016-08-08 14:12:02 +08:00
|
|
|
import { PropTypes } from 'react';
|
2015-11-25 23:17:06 +08:00
|
|
|
import Checkbox from '../checkbox';
|
2015-12-25 17:53:35 +08:00
|
|
|
import Search from './search';
|
2015-12-24 17:44:54 +08:00
|
|
|
import classNames from 'classnames';
|
2015-12-29 15:48:22 +08:00
|
|
|
import Animate from 'rc-animate';
|
2016-06-21 17:41:39 +08:00
|
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
2016-06-22 13:18:43 +08:00
|
|
|
import assign from 'object-assign';
|
2016-07-01 20:52:17 +08:00
|
|
|
import { TransferItem } from './index';
|
2015-12-24 17:44:54 +08:00
|
|
|
|
2015-11-25 23:17:06 +08:00
|
|
|
function noop() {
|
|
|
|
}
|
|
|
|
|
2016-05-12 11:09:27 +08:00
|
|
|
export function isRenderResultPlainObject(result) {
|
|
|
|
return result && !React.isValidElement(result) &&
|
|
|
|
Object.prototype.toString.call(result) === '[object Object]';
|
|
|
|
}
|
|
|
|
|
2016-07-07 20:25:03 +08:00
|
|
|
export interface TransferListProps {
|
2016-07-13 11:14:24 +08:00
|
|
|
prefixCls?: string;
|
|
|
|
dataSource: Array<TransferItem>;
|
2016-08-08 14:42:29 +08:00
|
|
|
filter?: string;
|
2016-07-13 11:14:24 +08:00
|
|
|
showSearch?: boolean;
|
|
|
|
searchPlaceholder?: string;
|
|
|
|
titleText?: string;
|
|
|
|
style?: React.CSSProperties;
|
2016-08-08 14:42:29 +08:00
|
|
|
handleFilter?: (e: any) => void;
|
|
|
|
handleSelect?: (selectedItem: any, checked: boolean) => void;
|
|
|
|
handleSelectAll?: (dataSource: any[], checkAll: boolean) => void;
|
2016-07-13 18:04:38 +08:00
|
|
|
handleClear?: () => void;
|
2016-08-08 15:00:35 +08:00
|
|
|
render?: (item: any) => any;
|
2016-08-08 14:42:29 +08:00
|
|
|
body?: (props: any) => any;
|
|
|
|
footer?: (props: any) => void;
|
|
|
|
checkedKeys?: any[];
|
2016-07-13 11:14:24 +08:00
|
|
|
checkStatus?: boolean;
|
|
|
|
position?: string;
|
|
|
|
notFoundContent?: React.ReactNode | string;
|
2016-08-08 14:42:29 +08:00
|
|
|
filterOption: (filterText: any, item: any) => boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface TransferContext {
|
|
|
|
antLocale?: {
|
|
|
|
Transfer?: any,
|
|
|
|
};
|
2016-07-01 20:52:17 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class TransferList extends React.Component<TransferListProps, any> {
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
|
|
|
dataSource: [],
|
|
|
|
titleText: '',
|
|
|
|
showSearch: false,
|
2016-07-08 10:16:58 +08:00
|
|
|
handleClear: noop,
|
2016-03-29 14:01:10 +08:00
|
|
|
handleFilter: noop,
|
|
|
|
handleSelect: noop,
|
|
|
|
handleSelectAll: noop,
|
|
|
|
render: noop,
|
|
|
|
// advanced
|
|
|
|
body: noop,
|
|
|
|
footer: noop,
|
2016-05-12 11:09:27 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
dataSource: PropTypes.array,
|
|
|
|
showSearch: PropTypes.bool,
|
2016-08-05 10:49:54 +08:00
|
|
|
filterOption: PropTypes.func,
|
2016-03-29 14:01:10 +08:00
|
|
|
searchPlaceholder: PropTypes.string,
|
|
|
|
titleText: PropTypes.string,
|
|
|
|
style: PropTypes.object,
|
2016-07-08 10:16:58 +08:00
|
|
|
handleClear: PropTypes.func,
|
2016-03-29 14:01:10 +08:00
|
|
|
handleFilter: PropTypes.func,
|
|
|
|
handleSelect: PropTypes.func,
|
|
|
|
handleSelectAll: PropTypes.func,
|
|
|
|
render: PropTypes.func,
|
|
|
|
body: PropTypes.func,
|
|
|
|
footer: PropTypes.func,
|
2016-05-12 11:09:27 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
antLocale: React.PropTypes.object,
|
2016-05-12 11:09:27 +08:00
|
|
|
};
|
2015-11-25 23:17:06 +08:00
|
|
|
|
2016-08-08 14:42:29 +08:00
|
|
|
context: TransferContext;
|
|
|
|
timer: any;
|
|
|
|
|
2015-11-25 23:17:06 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2015-12-29 15:48:22 +08:00
|
|
|
this.state = {
|
|
|
|
mounted: false,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
2016-06-28 20:01:02 +08:00
|
|
|
this.timer = setTimeout(() => {
|
2015-12-29 15:48:22 +08:00
|
|
|
this.setState({
|
|
|
|
mounted: true,
|
|
|
|
});
|
|
|
|
}, 0);
|
2015-11-25 23:17:06 +08:00
|
|
|
}
|
|
|
|
|
2016-06-28 20:01:02 +08:00
|
|
|
componentWillUnmount() {
|
|
|
|
clearTimeout(this.timer);
|
|
|
|
}
|
|
|
|
|
2016-06-21 17:41:39 +08:00
|
|
|
shouldComponentUpdate(...args) {
|
|
|
|
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
|
|
|
}
|
|
|
|
|
2016-07-15 15:07:31 +08:00
|
|
|
getCheckStatus(filteredDataSource) {
|
|
|
|
const { checkedKeys } = this.props;
|
|
|
|
if (checkedKeys.length === 0) {
|
|
|
|
return 'none';
|
|
|
|
} else if (filteredDataSource.every(item => checkedKeys.indexOf(item.key) >= 0)) {
|
|
|
|
return 'all';
|
|
|
|
}
|
|
|
|
return 'part';
|
2015-11-25 23:17:06 +08:00
|
|
|
}
|
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
handleSelect = (selectedItem) => {
|
2015-12-21 15:29:02 +08:00
|
|
|
const { checkedKeys } = this.props;
|
|
|
|
const result = checkedKeys.some((key) => key === selectedItem.key);
|
|
|
|
this.props.handleSelect(selectedItem, !result);
|
2015-11-25 23:17:06 +08:00
|
|
|
}
|
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
handleFilter = (e) => {
|
2015-11-26 16:07:11 +08:00
|
|
|
this.props.handleFilter(e);
|
|
|
|
}
|
|
|
|
|
2016-03-23 19:50:44 +08:00
|
|
|
handleClear = () => {
|
2015-12-17 16:08:16 +08:00
|
|
|
this.props.handleClear();
|
|
|
|
}
|
|
|
|
|
2016-07-15 15:07:31 +08:00
|
|
|
renderCheckbox({ prefixCls, filteredDataSource, checked, checkPart, disabled, checkable }) {
|
|
|
|
const checkAll = (!checkPart) && checked;
|
|
|
|
|
2015-12-24 17:44:54 +08:00
|
|
|
const checkboxCls = classNames({
|
2015-11-25 23:17:06 +08:00
|
|
|
[`${prefixCls}-checkbox`]: true,
|
2016-07-15 15:07:31 +08:00
|
|
|
[`${prefixCls}-checkbox-indeterminate`]: checkPart,
|
|
|
|
[`${prefixCls}-checkbox-checked`]: checkAll,
|
|
|
|
[`${prefixCls}-checkbox-disabled`]: disabled,
|
2015-12-24 17:44:54 +08:00
|
|
|
});
|
2016-07-15 15:07:31 +08:00
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2016-07-15 15:07:31 +08:00
|
|
|
<span
|
|
|
|
ref="checkbox"
|
2016-01-07 17:46:46 +08:00
|
|
|
className={checkboxCls}
|
2016-07-15 15:07:31 +08:00
|
|
|
onClick={() => this.props.handleSelectAll(filteredDataSource, checkAll)}
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-07-15 15:07:31 +08:00
|
|
|
{(typeof checkable !== 'boolean') ? checkable : null}
|
2016-01-07 14:21:29 +08:00
|
|
|
</span>
|
|
|
|
);
|
2015-11-25 23:17:06 +08:00
|
|
|
}
|
|
|
|
|
2016-08-05 10:49:54 +08:00
|
|
|
matchFilter(filterText, item, text) {
|
|
|
|
const filterOption = this.props.filterOption;
|
|
|
|
if (filterOption) {
|
|
|
|
return filterOption(filterText, item);
|
|
|
|
}
|
2016-07-07 18:36:53 +08:00
|
|
|
return text.indexOf(filterText) >= 0;
|
2015-12-21 15:29:02 +08:00
|
|
|
}
|
|
|
|
|
2015-11-25 23:17:06 +08:00
|
|
|
render() {
|
2016-03-07 14:52:14 +08:00
|
|
|
const { prefixCls, dataSource, titleText, filter, checkedKeys,
|
2016-07-15 15:07:31 +08:00
|
|
|
body, footer, showSearch, render, style } = this.props;
|
2016-03-07 14:52:14 +08:00
|
|
|
|
2016-07-08 17:17:57 +08:00
|
|
|
let { searchPlaceholder, notFoundContent } = this.props;
|
2015-11-25 23:17:06 +08:00
|
|
|
|
2015-12-16 23:02:49 +08:00
|
|
|
// Custom Layout
|
2016-06-22 13:18:43 +08:00
|
|
|
const footerDom = footer(assign({}, this.props));
|
|
|
|
const bodyDom = body(assign({}, this.props));
|
2015-12-15 17:08:34 +08:00
|
|
|
|
2015-12-24 17:44:54 +08:00
|
|
|
const listCls = classNames({
|
|
|
|
[prefixCls]: true,
|
2016-02-17 18:04:42 +08:00
|
|
|
[`${prefixCls}-with-footer`]: !!footerDom,
|
2015-12-24 17:44:54 +08:00
|
|
|
});
|
|
|
|
|
2016-07-15 15:07:31 +08:00
|
|
|
const filteredDataSource = [];
|
|
|
|
|
|
|
|
const showItems = dataSource.map(item => {
|
2016-05-12 11:09:27 +08:00
|
|
|
const renderResult = render(item);
|
|
|
|
let renderedText;
|
|
|
|
let renderedEl;
|
|
|
|
|
|
|
|
if (isRenderResultPlainObject(renderResult)) {
|
|
|
|
renderedText = renderResult.value;
|
|
|
|
renderedEl = renderResult.label;
|
|
|
|
} else {
|
|
|
|
renderedText = renderResult;
|
|
|
|
renderedEl = renderResult;
|
|
|
|
}
|
|
|
|
|
2016-08-05 10:49:54 +08:00
|
|
|
if (filter && filter.trim() && !this.matchFilter(filter, item, renderedText)) {
|
2016-07-07 18:42:59 +08:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2016-07-15 15:07:31 +08:00
|
|
|
filteredDataSource.push(item);
|
|
|
|
|
2016-02-22 10:52:30 +08:00
|
|
|
return (
|
2016-07-15 14:01:51 +08:00
|
|
|
<li onClick={() => this.handleSelect(item)} key={item.key} title={renderedText}>
|
2016-02-22 10:52:30 +08:00
|
|
|
<Checkbox checked={checkedKeys.some(key => key === item.key)} />
|
2016-05-12 11:09:27 +08:00
|
|
|
<span>{renderedEl}</span>
|
2016-02-22 10:52:30 +08:00
|
|
|
</li>
|
|
|
|
);
|
2016-07-07 18:42:59 +08:00
|
|
|
}).filter(item => !!item);
|
2016-01-13 16:28:36 +08:00
|
|
|
|
2016-03-07 14:52:14 +08:00
|
|
|
let unit = '条';
|
|
|
|
if (this.context.antLocale &&
|
|
|
|
this.context.antLocale.Transfer) {
|
|
|
|
unit = dataSource.length > 1
|
|
|
|
? this.context.antLocale.Transfer.itemsUnit
|
|
|
|
: this.context.antLocale.Transfer.itemUnit;
|
|
|
|
searchPlaceholder = searchPlaceholder
|
|
|
|
|| this.context.antLocale.Transfer.searchPlaceholder;
|
|
|
|
notFoundContent = notFoundContent
|
|
|
|
|| this.context.antLocale.Transfer.notFoundContent;
|
|
|
|
}
|
|
|
|
|
2016-07-15 15:07:31 +08:00
|
|
|
const checkStatus = this.getCheckStatus(filteredDataSource);
|
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2016-07-08 17:17:57 +08:00
|
|
|
<div className={listCls} style={style}>
|
2016-01-07 14:21:29 +08:00
|
|
|
<div className={`${prefixCls}-header`}>
|
|
|
|
{this.renderCheckbox({
|
|
|
|
prefixCls: 'ant-transfer',
|
|
|
|
checked: checkStatus === 'all',
|
|
|
|
checkPart: checkStatus === 'part',
|
2016-05-11 09:32:33 +08:00
|
|
|
checkable: <span className={'ant-transfer-checkbox-inner'}></span>,
|
2016-07-15 15:07:31 +08:00
|
|
|
filteredDataSource,
|
2016-08-08 14:42:29 +08:00
|
|
|
disabled: false,
|
2016-03-07 14:52:14 +08:00
|
|
|
})}
|
|
|
|
<span className={`${prefixCls}-header-selected`}>
|
|
|
|
<span>
|
|
|
|
{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} {unit}
|
|
|
|
</span>
|
|
|
|
<span className={`${prefixCls}-header-title`}>
|
|
|
|
{titleText}
|
|
|
|
</span>
|
|
|
|
</span>
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
2016-04-29 12:13:27 +08:00
|
|
|
{bodyDom ||
|
|
|
|
<div className={showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
|
|
|
|
{showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
|
|
|
|
<Search prefixCls={`${prefixCls}-search`}
|
|
|
|
onChange={this.handleFilter}
|
|
|
|
handleClear={this.handleClear}
|
|
|
|
placeholder={searchPlaceholder || '请输入搜索内容'}
|
2016-06-06 13:54:10 +08:00
|
|
|
value={filter}
|
|
|
|
/>
|
2016-04-29 12:13:27 +08:00
|
|
|
</div> : null}
|
|
|
|
<Animate component="ul"
|
|
|
|
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
|
2016-06-06 13:54:10 +08:00
|
|
|
transitionLeave={false}
|
|
|
|
>
|
2016-04-29 12:13:27 +08:00
|
|
|
{showItems.length > 0
|
|
|
|
? showItems
|
|
|
|
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
|
|
|
|
</Animate>
|
|
|
|
</div>}
|
|
|
|
{footerDom ? <div className={`${prefixCls}-footer`}>
|
|
|
|
{footerDom}
|
|
|
|
</div> : null}
|
2016-01-07 14:21:29 +08:00
|
|
|
</div>
|
|
|
|
);
|
2015-11-25 23:17:06 +08:00
|
|
|
}
|
|
|
|
}
|