Feat: If the Transfer item is disabled, the item cannot be edited. #3221 (#6409)

### What problem does this PR solve?

Feat: If the Transfer item is disabled, the item cannot be edited. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-03-21 18:42:52 +08:00 committed by GitHub
parent 0e0ebaac5f
commit d88964f629
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -8,12 +8,13 @@ import {
SquareCheckIcon, SquareCheckIcon,
SquareIcon, SquareIcon,
} from 'lucide-react'; } from 'lucide-react';
import React, { memo, useCallback, useEffect } from 'react'; import React, { ReactNode, memo, useCallback, useEffect } from 'react';
export type TransferListItemType = { export type TransferListItemType = {
key: string; key: string;
label: string; label: string;
selected?: boolean; selected?: boolean;
disabled?: boolean;
}; };
export enum TransferListMoveDirection { export enum TransferListMoveDirection {
@ -29,12 +30,15 @@ export type TransferListProps = {
direction: TransferListMoveDirection, direction: TransferListMoveDirection,
moveKeys: string[], moveKeys: string[],
): void; ): void;
} & {
children?(item: TransferListItemType): ReactNode;
}; };
export const TransferList = memo(function ({ export const TransferList = memo(function ({
items, items,
onChange, onChange,
targetKeys, targetKeys,
children,
}: TransferListProps) { }: TransferListProps) {
const [leftList, setLeftList] = React.useState<TransferListItemType[]>([]); const [leftList, setLeftList] = React.useState<TransferListItemType[]>([]);
const [rightList, setRightList] = React.useState<TransferListItemType[]>([]); const [rightList, setRightList] = React.useState<TransferListItemType[]>([]);
@ -166,23 +170,26 @@ export const TransferList = memo(function ({
) )
.map((item) => ( .map((item) => (
<li <li
className="flex items-center gap-1.5 text-sm hover:bg-muted rounded-sm" className="flex items-center gap-1.5 text-sm hover:bg-muted rounded-sm group"
key={item.key} key={item.key}
> >
<button <button
type="button" type="button"
className="flex items-center gap-1.5 w-full p-1.5" className="flex items-center gap-1.5 p-1.5"
onClick={() => onClick={() =>
toggleSelection(rightList, setRightList, item.key) toggleSelection(rightList, setRightList, item.key)
} }
> >
{item.selected ? ( {item.disabled ? (
<span className="size-4"></span>
) : item.selected ? (
<SquareCheckIcon className="h-4 w-4 text-muted-foreground/50" /> <SquareCheckIcon className="h-4 w-4 text-muted-foreground/50" />
) : ( ) : (
<SquareIcon className="h-4 w-4 text-muted-foreground/50" /> <SquareIcon className="h-4 w-4 text-muted-foreground/50" />
)} )}
{item.label} {item.label}
</button> </button>
{children?.(item)}
</li> </li>
))} ))}
</ul> </ul>