import * as React from 'react'; import omit from 'rc-util/lib/omit'; import classNames from 'classnames'; import DownOutlined from '@ant-design/icons/DownOutlined'; import Checkbox from '../checkbox'; import Menu from '../menu'; import Dropdown from '../dropdown'; import { TransferDirection, RenderResult, RenderResultObject, SelectAllLabel, TransferLocale, KeyWiseTransferItem, } from './index'; import Search from './search'; import DefaultListBody, { TransferListBodyProps, OmitProps } from './ListBody'; import { PaginationType } from './interface'; import { isValidElement } from '../_util/reactNode'; const defaultRender = () => null; function isRenderResultPlainObject(result: RenderResult) { return ( result && !isValidElement(result) && Object.prototype.toString.call(result) === '[object Object]' ); } function getEnabledItemKeys(items: RecordType[]) { return items.filter(data => !data.disabled).map(data => data.key); } export interface RenderedItem { renderedText: string; renderedEl: React.ReactNode; item: RecordType; } type RenderListFunction = (props: TransferListBodyProps) => React.ReactNode; export interface TransferListProps extends TransferLocale { prefixCls: string; titleText: React.ReactNode; dataSource: RecordType[]; filterOption?: (filterText: string, item: RecordType) => boolean; style?: React.CSSProperties; checkedKeys: string[]; handleFilter: (e: React.ChangeEvent) => void; onItemSelect: (key: string, check: boolean) => void; onItemSelectAll: (dataSource: string[], checkAll: boolean) => void; onItemRemove?: (keys: string[]) => void; handleClear: () => void; /** Render item */ render?: (item: RecordType) => RenderResult; showSearch?: boolean; searchPlaceholder: string; itemUnit: string; itemsUnit: string; renderList?: RenderListFunction; footer?: (props: TransferListProps) => React.ReactNode; onScroll: (e: React.UIEvent) => void; disabled?: boolean; direction: TransferDirection; showSelectAll?: boolean; selectAllLabel?: SelectAllLabel; showRemove?: boolean; pagination?: PaginationType; } interface TransferListState { /** Filter input value */ filterValue: string; } export default class TransferList< RecordType extends KeyWiseTransferItem, > extends React.PureComponent, TransferListState> { static defaultProps = { dataSource: [], titleText: '', showSearch: false, }; timer: number; triggerScrollTimer: number; defaultListBodyRef = React.createRef>(); constructor(props: TransferListProps) { super(props); this.state = { filterValue: '', }; } componentWillUnmount() { clearTimeout(this.triggerScrollTimer); } getCheckStatus(filteredItems: RecordType[]) { const { checkedKeys } = this.props; if (checkedKeys.length === 0) { return 'none'; } if (filteredItems.every(item => checkedKeys.indexOf(item.key) >= 0 || !!item.disabled)) { return 'all'; } return 'part'; } // ================================ Item ================================ getFilteredItems( dataSource: RecordType[], filterValue: string, ): { filteredItems: RecordType[]; filteredRenderItems: RenderedItem[] } { const filteredItems: RecordType[] = []; const filteredRenderItems: RenderedItem[] = []; dataSource.forEach(item => { const renderedItem = this.renderItem(item); const { renderedText } = renderedItem; // Filter skip if (filterValue && !this.matchFilter(renderedText, item)) { return null; } filteredItems.push(item); filteredRenderItems.push(renderedItem); }); return { filteredItems, filteredRenderItems }; } // =============================== Filter =============================== handleFilter = (e: React.ChangeEvent) => { const { handleFilter } = this.props; const { target: { value: filterValue }, } = e; this.setState({ filterValue }); handleFilter(e); }; handleClear = () => { const { handleClear } = this.props; this.setState({ filterValue: '' }); handleClear(); }; matchFilter = (text: string, item: RecordType) => { const { filterValue } = this.state; const { filterOption } = this.props; if (filterOption) { return filterOption(filterValue, item); } return text.indexOf(filterValue) >= 0; }; getCurrentPageItems = () => {}; // =============================== Render =============================== renderListBody = ( renderList: RenderListFunction | undefined, props: TransferListBodyProps, ) => { let bodyContent: React.ReactNode = renderList ? renderList(props) : null; const customize: boolean = !!bodyContent; if (!customize) { bodyContent = ; } return { customize, bodyContent, }; }; getListBody( prefixCls: string, searchPlaceholder: string, filterValue: string, filteredItems: RecordType[], notFoundContent: React.ReactNode, filteredRenderItems: RenderedItem[], checkedKeys: string[], renderList?: RenderListFunction, showSearch?: boolean, disabled?: boolean, ): React.ReactNode { const search = showSearch ? (
) : null; const { bodyContent, customize } = this.renderListBody(renderList, { ...omit(this.props, OmitProps), filteredItems, filteredRenderItems, selectedKeys: checkedKeys, }); let bodyNode: React.ReactNode; // We should wrap customize list body in a classNamed div to use flex layout. if (customize) { bodyNode =
{bodyContent}
; } else { bodyNode = filteredItems.length ? ( bodyContent ) : (
{notFoundContent}
); } return (
{search} {bodyNode}
); } getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls, }: { filteredItems: RecordType[]; onItemSelectAll: (dataSource: string[], checkAll: boolean) => void; disabled?: boolean; prefixCls?: string; }): false | JSX.Element { const checkStatus = this.getCheckStatus(filteredItems); const checkedAll = checkStatus === 'all'; const checkAllCheckbox = ( { // Only select enabled items onItemSelectAll( filteredItems.filter(item => !item.disabled).map(({ key }) => key), !checkedAll, ); }} /> ); return checkAllCheckbox; } renderItem = (item: RecordType): RenderedItem => { const { render = defaultRender } = this.props; const renderResult: RenderResult = render(item); const isRenderResultPlain = isRenderResultPlainObject(renderResult); return { renderedText: isRenderResultPlain ? (renderResult as RenderResultObject).value : (renderResult as string), renderedEl: isRenderResultPlain ? (renderResult as RenderResultObject).label : renderResult, item, }; }; getSelectAllLabel = (selectedCount: number, totalCount: number): React.ReactNode => { const { itemsUnit, itemUnit, selectAllLabel } = this.props; if (selectAllLabel) { return typeof selectAllLabel === 'function' ? selectAllLabel({ selectedCount, totalCount }) : selectAllLabel; } const unit = totalCount > 1 ? itemsUnit : itemUnit; return ( <> {(selectedCount > 0 ? `${selectedCount}/` : '') + totalCount} {unit} ); }; render() { const { filterValue } = this.state; const { prefixCls, dataSource, titleText, checkedKeys, disabled, footer, showSearch, style, searchPlaceholder, notFoundContent, selectAll, selectCurrent, selectInvert, removeAll, removeCurrent, renderList, onItemSelectAll, onItemRemove, showSelectAll = true, showRemove, pagination, } = this.props; // Custom Layout const footerDom = footer && footer(this.props); const listCls = classNames(prefixCls, { [`${prefixCls}-with-pagination`]: !!pagination, [`${prefixCls}-with-footer`]: !!footerDom, }); // ====================== Get filtered, checked item list ====================== const { filteredItems, filteredRenderItems } = this.getFilteredItems(dataSource, filterValue); // ================================= List Body ================================= const listBody = this.getListBody( prefixCls, searchPlaceholder, filterValue, filteredItems, notFoundContent, filteredRenderItems, checkedKeys, renderList, showSearch, disabled, ); // ================================ List Footer ================================ const listFooter = footerDom ?
{footerDom}
: null; const checkAllCheckbox = !showRemove && !pagination && this.getCheckBox({ filteredItems, onItemSelectAll, disabled, prefixCls }); let menu: React.ReactElement | null = null; if (showRemove) { menu = ( {/* Remove Current Page */} {pagination && ( { const pageKeys = getEnabledItemKeys( (this.defaultListBodyRef.current?.getItems() || []).map(entity => entity.item), ); onItemRemove?.(pageKeys); }} > {removeCurrent} )} {/* Remove All */} { onItemRemove?.(getEnabledItemKeys(filteredItems)); }} > {removeAll} ); } else { menu = ( { const keys = getEnabledItemKeys(filteredItems); onItemSelectAll(keys, keys.length !== checkedKeys.length); }} > {selectAll} {pagination && ( { const pageItems = this.defaultListBodyRef.current?.getItems() || []; onItemSelectAll(getEnabledItemKeys(pageItems.map(entity => entity.item)), true); }} > {selectCurrent} )} { let availableKeys: string[]; if (pagination) { availableKeys = getEnabledItemKeys( (this.defaultListBodyRef.current?.getItems() || []).map(entity => entity.item), ); } else { availableKeys = getEnabledItemKeys(filteredItems); } const checkedKeySet = new Set(checkedKeys); const newCheckedKeys: string[] = []; const newUnCheckedKeys: string[] = []; availableKeys.forEach(key => { if (checkedKeySet.has(key)) { newUnCheckedKeys.push(key); } else { newCheckedKeys.push(key); } }); onItemSelectAll(newCheckedKeys, true); onItemSelectAll(newUnCheckedKeys, false); }} > {selectInvert} ); } const dropdown = ( ); // ================================== Render =================================== return (
{/* Header */}
{showSelectAll ? ( <> {checkAllCheckbox} {dropdown} ) : null} {this.getSelectAllLabel(checkedKeys.length, filteredItems.length)} {titleText}
{/* Body */} {listBody} {/* Footer */} {listFooter}
); } }