mirror of
https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git
synced 2025-04-24 07:00:02 +08:00
### 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:
parent
0e0ebaac5f
commit
d88964f629
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user