2020-05-13 19:15:40 +08:00
|
|
|
import classNames from 'classnames';
|
2023-05-06 15:49:37 +08:00
|
|
|
import * as React from 'react';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { KeyWiseTransferItem } from '.';
|
2022-05-07 14:31:54 +08:00
|
|
|
import type { PaginationType } from './interface';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { RenderedItem, TransferListProps } from './list';
|
2023-01-05 10:37:35 +08:00
|
|
|
import Pagination from '../pagination';
|
2022-06-22 14:57:09 +08:00
|
|
|
import ListItem from './ListItem';
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2022-12-13 14:57:40 +08:00
|
|
|
export const OmitProps = ['handleFilter', 'handleClear', 'checkedKeys'] as const;
|
|
|
|
export type OmitProp = typeof OmitProps[number];
|
2020-11-08 15:28:03 +08:00
|
|
|
type PartialTransferListProps<RecordType> = Omit<TransferListProps<RecordType>, OmitProp>;
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2020-11-08 15:28:03 +08:00
|
|
|
export interface TransferListBodyProps<RecordType> extends PartialTransferListProps<RecordType> {
|
|
|
|
filteredItems: RecordType[];
|
|
|
|
filteredRenderItems: RenderedItem<RecordType>[];
|
2020-05-13 19:15:40 +08:00
|
|
|
selectedKeys: string[];
|
|
|
|
}
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const parsePagination = (pagination?: PaginationType) => {
|
2020-05-13 19:15:40 +08:00
|
|
|
if (!pagination) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const defaultPagination: PaginationType = {
|
2020-05-13 19:15:40 +08:00
|
|
|
pageSize: 10,
|
2022-02-10 13:16:45 +08:00
|
|
|
simple: true,
|
|
|
|
showSizeChanger: false,
|
|
|
|
showLessItems: false,
|
2020-05-13 19:15:40 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
if (typeof pagination === 'object') {
|
2023-01-05 10:37:35 +08:00
|
|
|
return { ...defaultPagination, ...pagination };
|
2020-05-13 19:15:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
return defaultPagination;
|
2023-01-05 10:37:35 +08:00
|
|
|
};
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
export interface ListBodyRef<RecordType extends KeyWiseTransferItem> {
|
|
|
|
items?: RenderedItem<RecordType>[];
|
2020-05-13 19:15:40 +08:00
|
|
|
}
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const TransferListBody: React.ForwardRefRenderFunction<
|
|
|
|
ListBodyRef<KeyWiseTransferItem>,
|
|
|
|
TransferListBodyProps<KeyWiseTransferItem>
|
|
|
|
> = <RecordType extends KeyWiseTransferItem>(
|
|
|
|
props: TransferListBodyProps<RecordType>,
|
|
|
|
ref: React.ForwardedRef<ListBodyRef<RecordType>>,
|
|
|
|
) => {
|
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
filteredRenderItems,
|
|
|
|
selectedKeys,
|
|
|
|
disabled: globalDisabled,
|
|
|
|
showRemove,
|
|
|
|
pagination,
|
|
|
|
onScroll,
|
|
|
|
onItemSelect,
|
|
|
|
onItemRemove,
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const [current, setCurrent] = React.useState<number>(1);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
2020-05-13 19:15:40 +08:00
|
|
|
const mergedPagination = parsePagination(pagination);
|
|
|
|
if (mergedPagination) {
|
2023-01-05 10:37:35 +08:00
|
|
|
const maxPageCount = Math.ceil(filteredRenderItems.length / mergedPagination.pageSize!);
|
|
|
|
setCurrent(Math.min(current, maxPageCount));
|
2020-05-13 19:15:40 +08:00
|
|
|
}
|
2023-01-05 10:37:35 +08:00
|
|
|
}, [filteredRenderItems, pagination]);
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const onClick = (item: RecordType) => {
|
|
|
|
onItemSelect?.(item.key, !selectedKeys.includes(item.key));
|
2020-05-13 19:15:40 +08:00
|
|
|
};
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const onRemove = (item: RecordType) => {
|
2020-05-13 19:15:40 +08:00
|
|
|
onItemRemove?.([item.key]);
|
|
|
|
};
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const onPageChange = (cur: number) => {
|
|
|
|
setCurrent(cur);
|
2020-05-13 19:15:40 +08:00
|
|
|
};
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
const memoizedItems = React.useMemo<RenderedItem<RecordType>[]>(() => {
|
2020-05-13 19:15:40 +08:00
|
|
|
const mergedPagination = parsePagination(pagination);
|
2023-01-05 10:37:35 +08:00
|
|
|
const displayItems = mergedPagination
|
|
|
|
? filteredRenderItems.slice(
|
|
|
|
(current - 1) * mergedPagination.pageSize!,
|
|
|
|
current * mergedPagination.pageSize!,
|
|
|
|
)
|
|
|
|
: filteredRenderItems;
|
2020-05-13 19:15:40 +08:00
|
|
|
return displayItems;
|
2023-01-05 10:37:35 +08:00
|
|
|
}, [current, filteredRenderItems, pagination]);
|
|
|
|
|
|
|
|
React.useImperativeHandle(ref, () => ({ items: memoizedItems }));
|
|
|
|
|
|
|
|
const mergedPagination = parsePagination(pagination);
|
|
|
|
|
|
|
|
const paginationNode: React.ReactNode = mergedPagination ? (
|
|
|
|
<Pagination
|
|
|
|
size="small"
|
|
|
|
disabled={globalDisabled}
|
|
|
|
simple={mergedPagination.simple}
|
|
|
|
pageSize={mergedPagination.pageSize}
|
|
|
|
showLessItems={mergedPagination.showLessItems}
|
|
|
|
showSizeChanger={mergedPagination.showSizeChanger}
|
|
|
|
className={`${prefixCls}-pagination`}
|
|
|
|
total={filteredRenderItems.length}
|
|
|
|
current={current}
|
|
|
|
onChange={onPageChange}
|
|
|
|
/>
|
|
|
|
) : null;
|
|
|
|
|
|
|
|
const cls = classNames(`${prefixCls}-content`, {
|
|
|
|
[`${prefixCls}-content-show-remove`]: showRemove,
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ul className={cls} onScroll={onScroll}>
|
|
|
|
{(memoizedItems || []).map(({ renderedEl, renderedText, item }) => (
|
|
|
|
<ListItem
|
|
|
|
key={item.key}
|
|
|
|
item={item}
|
|
|
|
renderedText={renderedText}
|
|
|
|
renderedEl={renderedEl}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
showRemove={showRemove}
|
|
|
|
onClick={onClick}
|
|
|
|
onRemove={onRemove}
|
|
|
|
checked={selectedKeys.includes(item.key)}
|
|
|
|
disabled={globalDisabled || item.disabled}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</ul>
|
|
|
|
{paginationNode}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
TransferListBody.displayName = 'TransferListBody';
|
2020-05-13 19:15:40 +08:00
|
|
|
}
|
|
|
|
|
2023-01-05 10:37:35 +08:00
|
|
|
export default React.forwardRef<
|
|
|
|
ListBodyRef<KeyWiseTransferItem>,
|
|
|
|
TransferListBodyProps<KeyWiseTransferItem>
|
|
|
|
>(TransferListBody);
|