ant-design/components/transfer/list.tsx

247 lines
6.7 KiB
TypeScript
Raw Normal View History

import React from 'react';
2017-05-02 15:47:51 +08:00
import { findDOMNode } from 'react-dom';
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 'rc-util/lib/PureRenderMixin';
import Checkbox from '../checkbox';
import { TransferItem } from './index';
import Search from './search';
2016-11-04 16:52:57 +08:00
import Item from './item';
2017-05-02 15:47:51 +08:00
import triggerEvent from '../_util/triggerEvent';
2015-12-24 17:44:54 +08:00
2015-11-25 23:17:06 +08:00
function noop() {
}
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-10-24 16:30:38 +08:00
prefixCls: string;
titleText: string;
dataSource: TransferItem[];
filter: string;
filterOption: (filterText: any, item: any) => boolean;
2016-07-13 11:14:24 +08:00
style?: React.CSSProperties;
checkedKeys: string[];
2016-10-24 16:30:38 +08:00
handleFilter: (e: any) => void;
handleSelect: (selectedItem: any, checked: boolean) => void;
handleSelectAll: (dataSource: any[], checkAll: boolean) => void;
handleClear: () => void;
2016-08-08 15:00:35 +08:00
render?: (item: any) => any;
showSearch?: boolean;
searchPlaceholder: string;
notFoundContent: React.ReactNode;
itemUnit: string;
itemsUnit: string;
2016-08-08 14:42:29 +08:00
body?: (props: any) => any;
footer?: (props: any) => void;
lazy?: boolean | {};
onScroll: Function;
2016-08-08 14:42:29 +08:00
}
export default class TransferList extends React.Component<TransferListProps, any> {
static defaultProps = {
dataSource: [],
titleText: '',
showSearch: false,
render: noop,
lazy: {},
};
timer: number;
2017-05-02 15:47:51 +08:00
triggerScrollTimer: number;
2016-08-08 14:42:29 +08:00
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);
2017-05-02 15:47:51 +08:00
clearTimeout(this.triggerScrollTimer);
}
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);
2017-05-02 15:47:51 +08:00
if (!e.target.value) {
return;
}
// Manually trigger scroll event for lazy search bug
// https://github.com/ant-design/ant-design/issues/5631
this.triggerScrollTimer = setTimeout(() => {
const listNode = findDOMNode(this).querySelectorAll('.ant-transfer-list-content')[0];
if (listNode) {
triggerEvent(listNode, 'scroll');
}
}, 0);
2015-11-26 16:07:11 +08:00
}
handleClear = () => {
2015-12-17 16:08:16 +08:00
this.props.handleClear();
}
matchFilter = (text, item) => {
const { filter, filterOption } = this.props;
if (filterOption) {
return filterOption(filter, item);
}
return text.indexOf(filter) >= 0;
}
renderItem = (item) => {
const { render = noop } = this.props;
const renderResult = render(item);
const isRenderResultPlain = isRenderResultPlainObject(renderResult);
return {
renderedText: isRenderResultPlain ? renderResult.value : renderResult,
renderedEl: isRenderResultPlain ? renderResult.label : renderResult,
};
}
2015-11-25 23:17:06 +08:00
render() {
const {
prefixCls, dataSource, titleText, checkedKeys, lazy,
body = noop, footer = noop, showSearch, style, filter,
searchPlaceholder, notFoundContent, itemUnit, itemsUnit, onScroll,
} = this.props;
2015-12-16 23:02:49 +08:00
// Custom Layout
const footerDom = footer({ ...this.props });
const bodyDom = body({ ...this.props });
2015-12-15 17:08:34 +08:00
const listCls = classNames(prefixCls, {
[`${prefixCls}-with-footer`]: !!footerDom,
2015-12-24 17:44:54 +08:00
});
2016-10-24 16:30:38 +08:00
const filteredDataSource: TransferItem[] = [];
const totalDataSource: TransferItem[] = [];
const showItems = dataSource.map((item) => {
const { renderedText, renderedEl } = this.renderItem(item);
if (filter && filter.trim() && !this.matchFilter(renderedText, item)) {
return null;
}
// all show items
totalDataSource.push(item);
if (!item.disabled) {
// response to checkAll items
filteredDataSource.push(item);
}
2016-11-04 16:52:57 +08:00
const checked = checkedKeys.indexOf(item.key) >= 0;
return (
2016-11-04 16:52:57 +08:00
<Item
key={item.key}
item={item}
lazy={lazy}
renderedText={renderedText}
renderedEl={renderedEl}
2016-11-04 16:52:57 +08:00
checked={checked}
prefixCls={prefixCls}
onClick={this.handleSelect}
/>
);
});
2016-01-13 16:28:36 +08:00
const unit = dataSource.length > 1 ? itemsUnit : itemUnit;
2016-11-28 19:14:43 +08:00
const search = showSearch ? (
<div className={`${prefixCls}-body-search-wrapper`}>
<Search
prefixCls={`${prefixCls}-search`}
onChange={this.handleFilter}
handleClear={this.handleClear}
placeholder={searchPlaceholder}
2016-11-28 19:14:43 +08:00
value={filter}
/>
</div>
) : null;
const listBody = bodyDom || (
<div className={showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
2016-11-28 19:14:43 +08:00
{search}
<Animate
component="ul"
componentProps={{ onScroll }}
className={`${prefixCls}-content`}
transitionName={this.state.mounted ? `${prefixCls}-content-item-highlight` : ''}
transitionLeave={false}
>
{showItems}
</Animate>
<div className={`${prefixCls}-body-not-found`}>
{notFoundContent}
</div>
</div>
);
const listFooter = footerDom ? (
<div className={`${prefixCls}-footer`}>
{footerDom}
</div>
) : null;
const checkStatus = this.getCheckStatus(filteredDataSource);
const checkedAll = checkStatus === 'all';
const checkAllCheckbox = (
<Checkbox
ref="checkbox"
checked={checkedAll}
indeterminate={checkStatus === 'part'}
onChange={() => this.props.handleSelectAll(filteredDataSource, checkedAll)}
/>
);
2016-11-28 19:14:43 +08:00
return (
2016-07-08 17:17:57 +08:00
<div className={listCls} style={style}>
<div className={`${prefixCls}-header`}>
{checkAllCheckbox}
<span className={`${prefixCls}-header-selected`}>
<span>
{(checkedKeys.length > 0 ? `${checkedKeys.length}/` : '') + totalDataSource.length} {unit}
</span>
<span className={`${prefixCls}-header-title`}>
{titleText}
</span>
</span>
</div>
{listBody}
{listFooter}
</div>
);
2015-11-25 23:17:06 +08:00
}
}