ant-design/components/transfer/list.tsx

266 lines
7.5 KiB
TypeScript
Raw Normal View History

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';
import PureRenderMixin from 'react-addons-pure-render-mixin';
2016-06-22 13:18:43 +08:00
import assign from 'object-assign';
import { TransferItem } from './index';
2015-12-24 17:44:54 +08:00
2015-11-25 23:17:06 +08:00
function noop() {
}
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,
};
}
export default class TransferList extends React.Component<TransferListProps, any> {
static defaultProps = {
dataSource: [],
titleText: '',
showSearch: false,
2016-07-08 10:16:58 +08:00
handleClear: noop,
handleFilter: noop,
handleSelect: noop,
handleSelectAll: noop,
render: noop,
// advanced
body: noop,
footer: noop,
};
static propTypes = {
prefixCls: PropTypes.string,
dataSource: PropTypes.array,
showSearch: PropTypes.bool,
filterOption: PropTypes.func,
searchPlaceholder: PropTypes.string,
titleText: PropTypes.string,
style: PropTypes.object,
2016-07-08 10:16:58 +08:00
handleClear: PropTypes.func,
handleFilter: PropTypes.func,
handleSelect: PropTypes.func,
handleSelectAll: PropTypes.func,
render: PropTypes.func,
body: PropTypes.func,
footer: PropTypes.func,
};
static contextTypes = {
antLocale: React.PropTypes.object,
};
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() {
this.timer = setTimeout(() => {
2015-12-29 15:48:22 +08:00
this.setState({
mounted: true,
});
}, 0);
2015-11-25 23:17:06 +08:00
}
componentWillUnmount() {
clearTimeout(this.timer);
}
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
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
}
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
}
handleFilter = (e) => {
2015-11-26 16:07:11 +08:00
this.props.handleFilter(e);
}
handleClear = () => {
2015-12-17 16:08:16 +08:00
this.props.handleClear();
}
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,
[`${prefixCls}-checkbox-indeterminate`]: checkPart,
[`${prefixCls}-checkbox-checked`]: checkAll,
[`${prefixCls}-checkbox-disabled`]: disabled,
2015-12-24 17:44:54 +08:00
});
return (
<span
ref="checkbox"
className={checkboxCls}
onClick={() => this.props.handleSelectAll(filteredDataSource, checkAll)}
>
{(typeof checkable !== 'boolean') ? checkable : null}
</span>
);
2015-11-25 23:17:06 +08:00
}
matchFilter(filterText, item, text) {
const filterOption = this.props.filterOption;
if (filterOption) {
return filterOption(filterText, item);
}
return text.indexOf(filterText) >= 0;
2015-12-21 15:29:02 +08:00
}
2015-11-25 23:17:06 +08:00
render() {
const { prefixCls, dataSource, titleText, filter, checkedKeys,
body, footer, showSearch, render, style } = this.props;
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,
[`${prefixCls}-with-footer`]: !!footerDom,
2015-12-24 17:44:54 +08:00
});
const filteredDataSource = [];
const showItems = dataSource.map(item => {
const renderResult = render(item);
let renderedText;
let renderedEl;
if (isRenderResultPlainObject(renderResult)) {
renderedText = renderResult.value;
renderedEl = renderResult.label;
} else {
renderedText = renderResult;
renderedEl = renderResult;
}
if (filter && filter.trim() && !this.matchFilter(filter, item, renderedText)) {
return null;
}
filteredDataSource.push(item);
return (
2016-07-15 14:01:51 +08:00
<li onClick={() => this.handleSelect(item)} key={item.key} title={renderedText}>
<Checkbox checked={checkedKeys.some(key => key === item.key)} />
<span>{renderedEl}</span>
</li>
);
}).filter(item => !!item);
2016-01-13 16:28:36 +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;
}
const checkStatus = this.getCheckStatus(filteredDataSource);
return (
2016-07-08 17:17:57 +08:00
<div className={listCls} style={style}>
<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>,
filteredDataSource,
2016-08-08 14:42:29 +08:00
disabled: false,
})}
<span className={`${prefixCls}-header-selected`}>
<span>
{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + dataSource.length} {unit}
</span>
<span className={`${prefixCls}-header-title`}>
{titleText}
</span>
</span>
</div>
{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 || '请输入搜索内容'}
value={filter}
/>
</div> : null}
<Animate component="ul"
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
transitionLeave={false}
>
{showItems.length > 0
? showItems
: <div className={`${prefixCls}-body-not-found`}>{notFoundContent || '列表为空'}</div>}
</Animate>
</div>}
{footerDom ? <div className={`${prefixCls}-footer`}>
{footerDom}
</div> : null}
</div>
);
2015-11-25 23:17:06 +08:00
}
}