You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 lines
14 KiB
453 lines
14 KiB
import classNames from 'classnames';
|
|
import type { ChangeEvent, CSSProperties } from 'react';
|
|
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
import type { ConfigConsumerProps } from '../config-provider';
|
|
import { ConfigContext } from '../config-provider';
|
|
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
|
import type { FormItemStatusContextProps } from '../form/context';
|
|
import { FormItemInputContext } from '../form/context';
|
|
import defaultLocale from '../locale/en_US';
|
|
import LocaleReceiver from '../locale/LocaleReceiver';
|
|
import type { InputStatus } from '../_util/statusUtils';
|
|
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
|
import { groupDisabledKeysMap, groupKeysMap } from '../_util/transKeys';
|
|
import warning from '../_util/warning';
|
|
import type { PaginationType } from './interface';
|
|
import type { TransferListProps } from './list';
|
|
import List from './list';
|
|
import type { TransferListBodyProps } from './ListBody';
|
|
import Operation from './operation';
|
|
import Search from './search';
|
|
|
|
import useStyle from './style';
|
|
|
|
export type { TransferListProps } from './list';
|
|
export type { TransferOperationProps } from './operation';
|
|
export type { TransferSearchProps } from './search';
|
|
|
|
export type TransferDirection = 'left' | 'right';
|
|
|
|
export interface RenderResultObject {
|
|
label: React.ReactElement;
|
|
value: string;
|
|
}
|
|
|
|
export type RenderResult = React.ReactElement | RenderResultObject | string | null;
|
|
|
|
export interface TransferItem {
|
|
key?: string;
|
|
title?: string;
|
|
description?: string;
|
|
disabled?: boolean;
|
|
[name: string]: any;
|
|
}
|
|
|
|
export type KeyWise<T> = T & { key: string };
|
|
|
|
export type KeyWiseTransferItem = KeyWise<TransferItem>;
|
|
|
|
type TransferRender<RecordType> = (item: RecordType) => RenderResult;
|
|
|
|
export interface ListStyle {
|
|
direction: TransferDirection;
|
|
}
|
|
|
|
export type SelectAllLabel =
|
|
| React.ReactNode
|
|
| ((info: { selectedCount: number; totalCount: number }) => React.ReactNode);
|
|
|
|
export interface TransferLocale {
|
|
titles?: React.ReactNode[];
|
|
notFoundContent?: React.ReactNode | React.ReactNode[];
|
|
searchPlaceholder: string;
|
|
itemUnit: string;
|
|
itemsUnit: string;
|
|
remove?: string;
|
|
selectAll?: string;
|
|
selectCurrent?: string;
|
|
selectInvert?: string;
|
|
removeAll?: string;
|
|
removeCurrent?: string;
|
|
}
|
|
|
|
export interface TransferProps<RecordType> {
|
|
prefixCls?: string;
|
|
className?: string;
|
|
rootClassName?: string;
|
|
disabled?: boolean;
|
|
dataSource?: RecordType[];
|
|
targetKeys?: string[];
|
|
selectedKeys?: string[];
|
|
render?: TransferRender<RecordType>;
|
|
onChange?: (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => void;
|
|
onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
|
|
style?: React.CSSProperties;
|
|
listStyle?: ((style: ListStyle) => CSSProperties) | CSSProperties;
|
|
operationStyle?: CSSProperties;
|
|
titles?: React.ReactNode[];
|
|
operations?: string[];
|
|
showSearch?: boolean;
|
|
filterOption?: (inputValue: string, item: RecordType) => boolean;
|
|
locale?: Partial<TransferLocale>;
|
|
footer?: (
|
|
props: TransferListProps<RecordType>,
|
|
info?: { direction: TransferDirection },
|
|
) => React.ReactNode;
|
|
rowKey?: (record: RecordType) => string;
|
|
onSearch?: (direction: TransferDirection, value: string) => void;
|
|
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
|
|
children?: (props: TransferListBodyProps<RecordType>) => React.ReactNode;
|
|
showSelectAll?: boolean;
|
|
selectAllLabels?: SelectAllLabel[];
|
|
oneWay?: boolean;
|
|
pagination?: PaginationType;
|
|
status?: InputStatus;
|
|
}
|
|
|
|
// interface TransferFCProps {
|
|
// prefixCls: string;
|
|
// className?: string;
|
|
// rootClassName?: string;
|
|
// style?: React.CSSProperties;
|
|
// children: React.ReactNode;
|
|
// }
|
|
|
|
// const TransferFC: React.FC<TransferFCProps> = (props) => {
|
|
// const { prefixCls, className, rootClassName, style, children } = props;
|
|
// const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
// return wrapSSR(
|
|
// <div className={classNames(className, rootClassName, hashId)} style={style}>
|
|
// {children}
|
|
// </div>,
|
|
// );
|
|
// };
|
|
|
|
const Transfer = <RecordType extends TransferItem = TransferItem>(
|
|
props: TransferProps<RecordType>,
|
|
) => {
|
|
const {
|
|
dataSource = [],
|
|
targetKeys = [],
|
|
selectedKeys = [],
|
|
selectAllLabels = [],
|
|
operations = [],
|
|
style = {},
|
|
listStyle = {},
|
|
locale = {},
|
|
titles,
|
|
disabled,
|
|
showSearch = false,
|
|
operationStyle,
|
|
showSelectAll,
|
|
oneWay,
|
|
pagination,
|
|
status: customStatus,
|
|
prefixCls: customizePrefixCls,
|
|
className,
|
|
rootClassName,
|
|
filterOption,
|
|
render,
|
|
footer,
|
|
children,
|
|
rowKey,
|
|
onScroll,
|
|
onChange,
|
|
onSearch,
|
|
onSelectChange,
|
|
} = props;
|
|
|
|
const {
|
|
getPrefixCls,
|
|
renderEmpty,
|
|
direction: dir,
|
|
} = useContext<ConfigConsumerProps>(ConfigContext);
|
|
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
|
|
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const [sourceSelectedKeys, setSourceSelectedKeys] = useState<string[]>(() =>
|
|
selectedKeys.filter((key) => !targetKeys.includes(key)),
|
|
);
|
|
|
|
const [targetSelectedKeys, setTargetSelectedKeys] = useState<string[]>(() =>
|
|
selectedKeys.filter((key) => targetKeys.includes(key)),
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (props.selectedKeys) {
|
|
setSourceSelectedKeys(() => selectedKeys.filter((key) => !targetKeys.includes(key)));
|
|
setTargetSelectedKeys(() => selectedKeys.filter((key) => targetKeys.includes(key)));
|
|
}
|
|
}, [props.selectedKeys, props.targetKeys]);
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
warning(
|
|
!pagination || !children,
|
|
'Transfer',
|
|
'`pagination` not support customize render list.',
|
|
);
|
|
}
|
|
|
|
const setStateKeys = useCallback(
|
|
(direction: TransferDirection, keys: string[] | ((prevKeys: string[]) => string[])) => {
|
|
if (direction === 'left') {
|
|
setSourceSelectedKeys((prev) => (typeof keys === 'function' ? keys(prev || []) : keys));
|
|
} else {
|
|
setTargetSelectedKeys((prev) => (typeof keys === 'function' ? keys(prev || []) : keys));
|
|
}
|
|
},
|
|
[sourceSelectedKeys, targetSelectedKeys],
|
|
);
|
|
|
|
const handleSelectChange = useCallback(
|
|
(direction: TransferDirection, holder: string[]) => {
|
|
if (direction === 'left') {
|
|
onSelectChange?.(holder, targetSelectedKeys);
|
|
} else {
|
|
onSelectChange?.(sourceSelectedKeys, holder);
|
|
}
|
|
},
|
|
[sourceSelectedKeys, targetSelectedKeys],
|
|
);
|
|
|
|
const getTitles = (transferLocale: TransferLocale): React.ReactNode[] =>
|
|
titles ?? transferLocale.titles ?? [];
|
|
|
|
const handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
|
|
onScroll?.('left', e);
|
|
};
|
|
|
|
const handleRightScroll = (e: React.SyntheticEvent<HTMLUListElement>) => {
|
|
onScroll?.('right', e);
|
|
};
|
|
|
|
const moveTo = (direction: TransferDirection) => {
|
|
const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
|
|
const dataSourceDisabledKeysMap = groupDisabledKeysMap(dataSource);
|
|
// filter the disabled options
|
|
const newMoveKeys = moveKeys.filter((key) => !dataSourceDisabledKeysMap.has(key));
|
|
const newMoveKeysMap = groupKeysMap(newMoveKeys);
|
|
// move items to target box
|
|
const newTargetKeys =
|
|
direction === 'right'
|
|
? newMoveKeys.concat(targetKeys)
|
|
: targetKeys.filter((targetKey) => !newMoveKeysMap.has(targetKey));
|
|
|
|
// empty checked keys
|
|
const oppositeDirection = direction === 'right' ? 'left' : 'right';
|
|
setStateKeys(oppositeDirection, []);
|
|
handleSelectChange(oppositeDirection, []);
|
|
onChange?.(newTargetKeys, direction, newMoveKeys);
|
|
};
|
|
|
|
const moveToLeft = () => {
|
|
moveTo('left');
|
|
};
|
|
|
|
const moveToRight = () => {
|
|
moveTo('right');
|
|
};
|
|
|
|
const onItemSelectAll = (direction: TransferDirection, keys: string[], checkAll: boolean) => {
|
|
setStateKeys(direction, (prevKeys) => {
|
|
let mergedCheckedKeys: string[] = [];
|
|
if (checkAll) {
|
|
// Merge current keys with origin key
|
|
mergedCheckedKeys = Array.from(new Set<string>([...prevKeys, ...keys]));
|
|
} else {
|
|
const selectedKeysMap = groupKeysMap(keys);
|
|
// Remove current keys from origin keys
|
|
mergedCheckedKeys = prevKeys.filter((key) => !selectedKeysMap.has(key));
|
|
}
|
|
handleSelectChange(direction, mergedCheckedKeys);
|
|
return mergedCheckedKeys;
|
|
});
|
|
};
|
|
|
|
const onLeftItemSelectAll = (keys: string[], checkAll: boolean) => {
|
|
onItemSelectAll('left', keys, checkAll);
|
|
};
|
|
|
|
const onRightItemSelectAll = (keys: string[], checkAll: boolean) => {
|
|
onItemSelectAll('right', keys, checkAll);
|
|
};
|
|
|
|
const leftFilter = (e: ChangeEvent<HTMLInputElement>) => onSearch?.('left', e.target.value);
|
|
|
|
const rightFilter = (e: ChangeEvent<HTMLInputElement>) => onSearch?.('right', e.target.value);
|
|
|
|
const handleLeftClear = () => onSearch?.('left', '');
|
|
|
|
const handleRightClear = () => onSearch?.('right', '');
|
|
|
|
const onItemSelect = (direction: TransferDirection, selectedKey: string, checked: boolean) => {
|
|
const holder = [...(direction === 'left' ? sourceSelectedKeys : targetSelectedKeys)];
|
|
const index = holder.indexOf(selectedKey);
|
|
if (index > -1) {
|
|
holder.splice(index, 1);
|
|
}
|
|
if (checked) {
|
|
holder.push(selectedKey);
|
|
}
|
|
handleSelectChange(direction, holder);
|
|
if (!props.selectedKeys) {
|
|
setStateKeys(direction, holder);
|
|
}
|
|
};
|
|
|
|
const onLeftItemSelect = (selectedKey: string, checked: boolean) => {
|
|
onItemSelect('left', selectedKey, checked);
|
|
};
|
|
|
|
const onRightItemSelect = (selectedKey: string, checked: boolean) => {
|
|
onItemSelect('right', selectedKey, checked);
|
|
};
|
|
|
|
const onRightItemRemove = (keys: string[]) => {
|
|
setStateKeys('right', []);
|
|
onChange?.(
|
|
targetKeys.filter((key) => !keys.includes(key)),
|
|
'left',
|
|
[...keys],
|
|
);
|
|
};
|
|
|
|
const handleListStyle = (direction: TransferDirection): CSSProperties => {
|
|
if (typeof listStyle === 'function') {
|
|
return listStyle({ direction });
|
|
}
|
|
return listStyle || {};
|
|
};
|
|
|
|
const [leftDataSource, rightDataSource] = useMemo(() => {
|
|
const leftData: KeyWise<RecordType>[] = [];
|
|
const rightData: KeyWise<RecordType>[] = new Array(targetKeys.length);
|
|
const targetKeysMap = groupKeysMap(targetKeys);
|
|
dataSource.forEach((record: KeyWise<RecordType>) => {
|
|
if (rowKey) {
|
|
record = { ...record, key: rowKey(record) };
|
|
}
|
|
// rightData should be ordered by targetKeys
|
|
// leftData should be ordered by dataSource
|
|
if (targetKeysMap.has(record.key)) {
|
|
rightData[targetKeysMap.get(record.key)!] = record;
|
|
} else {
|
|
leftData.push(record);
|
|
}
|
|
});
|
|
return [leftData, rightData] as const;
|
|
}, [dataSource, targetKeys, rowKey]);
|
|
|
|
const formItemContext = useContext<FormItemStatusContextProps>(FormItemInputContext);
|
|
|
|
const { hasFeedback, status } = formItemContext;
|
|
|
|
const getLocale = (transferLocale: TransferLocale) => ({
|
|
...transferLocale,
|
|
notFoundContent: renderEmpty?.('Transfer') || <DefaultRenderEmpty componentName="Transfer" />,
|
|
...locale,
|
|
});
|
|
|
|
const mergedStatus = getMergedStatus(status, customStatus);
|
|
const mergedPagination = !children && pagination;
|
|
|
|
const leftActive = targetSelectedKeys.length > 0;
|
|
const rightActive = sourceSelectedKeys.length > 0;
|
|
|
|
const cls = classNames(
|
|
prefixCls,
|
|
{
|
|
[`${prefixCls}-disabled`]: disabled,
|
|
[`${prefixCls}-customize-list`]: !!children,
|
|
[`${prefixCls}-rtl`]: dir === 'rtl',
|
|
},
|
|
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
|
|
className,
|
|
rootClassName,
|
|
hashId,
|
|
);
|
|
|
|
return wrapSSR(
|
|
<LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
|
|
{(contextLocale) => {
|
|
const listLocale = getLocale(contextLocale);
|
|
const [leftTitle, rightTitle] = getTitles(listLocale);
|
|
return (
|
|
<div className={cls} style={style}>
|
|
<List<KeyWise<RecordType>>
|
|
prefixCls={`${prefixCls}-list`}
|
|
titleText={leftTitle}
|
|
dataSource={leftDataSource}
|
|
filterOption={filterOption}
|
|
style={handleListStyle('left')}
|
|
checkedKeys={sourceSelectedKeys}
|
|
handleFilter={leftFilter}
|
|
handleClear={handleLeftClear}
|
|
onItemSelect={onLeftItemSelect}
|
|
onItemSelectAll={onLeftItemSelectAll}
|
|
render={render}
|
|
showSearch={showSearch}
|
|
renderList={children}
|
|
footer={footer}
|
|
onScroll={handleLeftScroll}
|
|
disabled={disabled}
|
|
direction={dir === 'rtl' ? 'right' : 'left'}
|
|
showSelectAll={showSelectAll}
|
|
selectAllLabel={selectAllLabels[0]}
|
|
pagination={mergedPagination}
|
|
{...listLocale}
|
|
/>
|
|
<Operation
|
|
className={`${prefixCls}-operation`}
|
|
rightActive={rightActive}
|
|
rightArrowText={operations[0]}
|
|
moveToRight={moveToRight}
|
|
leftActive={leftActive}
|
|
leftArrowText={operations[1]}
|
|
moveToLeft={moveToLeft}
|
|
style={operationStyle}
|
|
disabled={disabled}
|
|
direction={dir}
|
|
oneWay={oneWay}
|
|
/>
|
|
<List<KeyWise<RecordType>>
|
|
prefixCls={`${prefixCls}-list`}
|
|
titleText={rightTitle}
|
|
dataSource={rightDataSource}
|
|
filterOption={filterOption}
|
|
style={handleListStyle('right')}
|
|
checkedKeys={targetSelectedKeys}
|
|
handleFilter={rightFilter}
|
|
handleClear={handleRightClear}
|
|
onItemSelect={onRightItemSelect}
|
|
onItemSelectAll={onRightItemSelectAll}
|
|
onItemRemove={onRightItemRemove}
|
|
render={render}
|
|
showSearch={showSearch}
|
|
renderList={children}
|
|
footer={footer}
|
|
onScroll={handleRightScroll}
|
|
disabled={disabled}
|
|
direction={dir === 'rtl' ? 'left' : 'right'}
|
|
showSelectAll={showSelectAll}
|
|
selectAllLabel={selectAllLabels[1]}
|
|
showRemove={oneWay}
|
|
pagination={mergedPagination}
|
|
{...listLocale}
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
</LocaleReceiver>,
|
|
);
|
|
};
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Transfer.displayName = 'Transfer';
|
|
}
|
|
|
|
Transfer.List = List;
|
|
Transfer.Search = Search;
|
|
Transfer.Operation = Operation;
|
|
|
|
export default Transfer;
|
|
|