mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
cc5c4fed51
* chore: add locale files to npm pkg * docs: locale files reference path * docs: fix locale path * chore: bump @ant-design/tools * refactor: default locale file * chore: add site wepack alias * chore: bump @ant-design/tools * fix: site theme locale reference path * chore: add locale files to eslint ignore * fix: markdown demo unable to resolve path to module antd/locale
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
|
|
import classNames from 'classnames';
|
|
import * as React from 'react';
|
|
import type { KeyWiseTransferItem } from '.';
|
|
import Checkbox from '../checkbox';
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
import defaultLocale from '../locale/en_US';
|
|
import TransButton from '../_util/transButton';
|
|
|
|
type ListItemProps<RecordType> = {
|
|
renderedText?: string | number;
|
|
renderedEl: React.ReactNode;
|
|
disabled?: boolean;
|
|
checked?: boolean;
|
|
prefixCls: string;
|
|
onClick: (item: RecordType) => void;
|
|
onRemove?: (item: RecordType) => void;
|
|
item: RecordType;
|
|
showRemove?: boolean;
|
|
};
|
|
|
|
const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<RecordType>) => {
|
|
const {
|
|
renderedText,
|
|
renderedEl,
|
|
item,
|
|
checked,
|
|
disabled,
|
|
prefixCls,
|
|
onClick,
|
|
onRemove,
|
|
showRemove,
|
|
} = props;
|
|
|
|
const className = classNames({
|
|
[`${prefixCls}-content-item`]: true,
|
|
[`${prefixCls}-content-item-disabled`]: disabled || item.disabled,
|
|
[`${prefixCls}-content-item-checked`]: checked,
|
|
});
|
|
|
|
let title: string | undefined;
|
|
if (typeof renderedText === 'string' || typeof renderedText === 'number') {
|
|
title = String(renderedText);
|
|
}
|
|
|
|
return (
|
|
<LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
|
|
{contextLocale => {
|
|
const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
|
|
const labelNode = <span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>;
|
|
|
|
// Show remove
|
|
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);
|
|
return (
|
|
<li {...liProps}>
|
|
<Checkbox
|
|
className={`${prefixCls}-checkbox`}
|
|
checked={checked}
|
|
disabled={disabled || item.disabled}
|
|
/>
|
|
{labelNode}
|
|
</li>
|
|
);
|
|
}}
|
|
</LocaleReceiver>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ListItem);
|