2020-06-08 22:11:25 +08:00
|
|
|
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
2022-06-22 14:57:09 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import * as React from 'react';
|
2022-10-01 22:17:14 +08:00
|
|
|
import type { KeyWiseTransferItem } from '.';
|
2016-11-04 16:52:57 +08:00
|
|
|
import Checkbox from '../checkbox';
|
2022-10-26 14:38:54 +08:00
|
|
|
import defaultLocale from '../locale/en_US';
|
2023-03-21 13:08:43 +08:00
|
|
|
import { useLocale } from '../locale';
|
2022-06-22 14:57:09 +08:00
|
|
|
import TransButton from '../_util/transButton';
|
2016-11-04 16:52:57 +08:00
|
|
|
|
2020-11-08 15:28:03 +08:00
|
|
|
type ListItemProps<RecordType> = {
|
2020-03-05 13:19:00 +08:00
|
|
|
renderedText?: string | number;
|
|
|
|
renderedEl: React.ReactNode;
|
|
|
|
disabled?: boolean;
|
|
|
|
checked?: boolean;
|
|
|
|
prefixCls: string;
|
2020-11-08 15:28:03 +08:00
|
|
|
onClick: (item: RecordType) => void;
|
|
|
|
onRemove?: (item: RecordType) => void;
|
|
|
|
item: RecordType;
|
2020-05-13 19:15:40 +08:00
|
|
|
showRemove?: boolean;
|
2020-03-05 13:19:00 +08:00
|
|
|
};
|
|
|
|
|
2020-11-08 15:28:03 +08:00
|
|
|
const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<RecordType>) => {
|
2020-05-13 19:15:40 +08:00
|
|
|
const {
|
|
|
|
renderedText,
|
|
|
|
renderedEl,
|
|
|
|
item,
|
|
|
|
checked,
|
|
|
|
disabled,
|
|
|
|
prefixCls,
|
|
|
|
onClick,
|
|
|
|
onRemove,
|
|
|
|
showRemove,
|
|
|
|
} = props;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2020-03-05 13:19:00 +08:00
|
|
|
const className = classNames({
|
|
|
|
[`${prefixCls}-content-item`]: true,
|
|
|
|
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
|
|
|
|
[`${prefixCls}-content-item-checked`]: checked,
|
|
|
|
});
|
2016-11-04 16:52:57 +08:00
|
|
|
|
2020-03-05 13:19:00 +08:00
|
|
|
let title: string | undefined;
|
|
|
|
if (typeof renderedText === 'string' || typeof renderedText === 'number') {
|
|
|
|
title = String(renderedText);
|
|
|
|
}
|
2016-11-04 16:52:57 +08:00
|
|
|
|
2023-02-24 10:51:59 +08:00
|
|
|
const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
|
2023-02-22 18:18:26 +08:00
|
|
|
|
|
|
|
const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
|
|
|
|
|
|
|
|
const labelNode = <span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>;
|
2020-05-13 19:15:40 +08:00
|
|
|
|
2023-02-22 18:18:26 +08:00
|
|
|
if (showRemove) {
|
|
|
|
return (
|
|
|
|
<li {...liProps}>
|
|
|
|
{labelNode}
|
|
|
|
<TransButton
|
|
|
|
disabled={disabled || item.disabled}
|
|
|
|
className={`${prefixCls}-content-item-remove`}
|
|
|
|
aria-label={contextLocale?.remove}
|
|
|
|
onClick={() => {
|
|
|
|
onRemove?.(item);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<DeleteOutlined />
|
|
|
|
</TransButton>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Default click to select
|
|
|
|
liProps.onClick = disabled || item.disabled ? undefined : () => onClick(item);
|
2018-09-25 19:32:08 +08:00
|
|
|
|
2023-02-22 18:18:26 +08:00
|
|
|
return (
|
|
|
|
<li {...liProps}>
|
|
|
|
<Checkbox
|
|
|
|
className={`${prefixCls}-checkbox`}
|
|
|
|
checked={checked}
|
|
|
|
disabled={disabled || item.disabled}
|
|
|
|
/>
|
|
|
|
{labelNode}
|
|
|
|
</li>
|
2020-05-13 19:15:40 +08:00
|
|
|
);
|
2020-03-05 13:19:00 +08:00
|
|
|
};
|
2016-12-16 17:59:52 +08:00
|
|
|
|
2020-03-05 13:19:00 +08:00
|
|
|
export default React.memo(ListItem);
|