fix: keep tree structure in multi-select, checkbox+chevron, separate toggle/expand
This commit is contained in:
@@ -163,10 +163,11 @@ function FolderTreeItem({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex items-center" style={{ paddingLeft: multiSelectMode ? 8 : depth * 12 + 8 }}>
|
<div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
|
||||||
<div
|
<div
|
||||||
draggable
|
draggable={!multiSelectMode}
|
||||||
onDragStart={(e) => {
|
onDragStart={(e) => {
|
||||||
|
if (multiSelectMode) return;
|
||||||
e.dataTransfer.setData('text/folder-id', node.id);
|
e.dataTransfer.setData('text/folder-id', node.id);
|
||||||
e.dataTransfer.effectAllowed = 'move';
|
e.dataTransfer.effectAllowed = 'move';
|
||||||
}}
|
}}
|
||||||
@@ -192,13 +193,21 @@ function FolderTreeItem({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{multiSelectMode ? (
|
{multiSelectMode ? (
|
||||||
<input
|
<>
|
||||||
type="checkbox"
|
<input
|
||||||
checked={isChecked}
|
type="checkbox"
|
||||||
onChange={() => onToggleMultiSelect?.(node.id)}
|
checked={isChecked}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onChange={() => onToggleMultiSelect?.(node.id)}
|
||||||
className="w-3.5 h-3.5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 flex-shrink-0 cursor-pointer"
|
onClick={(e) => e.stopPropagation()}
|
||||||
/>
|
className="w-3.5 h-3.5 rounded border-secondary-300 text-primary-600 focus:ring-primary-500 flex-shrink-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
|
||||||
|
className="flex-shrink-0 cursor-pointer"
|
||||||
|
>
|
||||||
|
{chevron(expanded)}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
chevron(expanded)
|
chevron(expanded)
|
||||||
)}
|
)}
|
||||||
@@ -221,24 +230,7 @@ function FolderTreeItem({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{expanded && !multiSelectMode && node.children.map((child) => (
|
{expanded && node.children.map((child) => (
|
||||||
<FolderTreeItem
|
|
||||||
key={child.id}
|
|
||||||
node={child}
|
|
||||||
depth={depth + 1}
|
|
||||||
selectedFilter={selectedFilter}
|
|
||||||
onSelectFolder={onSelectFolder}
|
|
||||||
onMoreClick={onMoreClick}
|
|
||||||
isDragOver={false}
|
|
||||||
onDragOver={onDragOver}
|
|
||||||
onDragLeave={onDragLeave}
|
|
||||||
onDrop={onDrop}
|
|
||||||
multiSelectMode={multiSelectMode}
|
|
||||||
multiSelectedFolders={multiSelectedFolders}
|
|
||||||
onToggleMultiSelect={onToggleMultiSelect}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{multiSelectMode && node.children.map((child) => (
|
|
||||||
<FolderTreeItem
|
<FolderTreeItem
|
||||||
key={child.id}
|
key={child.id}
|
||||||
node={child}
|
node={child}
|
||||||
|
|||||||
Reference in New Issue
Block a user