fix: keep tree structure in multi-select, checkbox+chevron, separate toggle/expand
This commit is contained in:
@@ -163,10 +163,11 @@ function FolderTreeItem({
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center" style={{ paddingLeft: multiSelectMode ? 8 : depth * 12 + 8 }}>
|
||||
<div className="flex items-center" style={{ paddingLeft: depth * 12 + 8 }}>
|
||||
<div
|
||||
draggable
|
||||
draggable={!multiSelectMode}
|
||||
onDragStart={(e) => {
|
||||
if (multiSelectMode) return;
|
||||
e.dataTransfer.setData('text/folder-id', node.id);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
}}
|
||||
@@ -192,13 +193,21 @@ function FolderTreeItem({
|
||||
}}
|
||||
>
|
||||
{multiSelectMode ? (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={() => onToggleMultiSelect?.(node.id)}
|
||||
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"
|
||||
/>
|
||||
<>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={() => onToggleMultiSelect?.(node.id)}
|
||||
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)
|
||||
)}
|
||||
@@ -221,24 +230,7 @@ function FolderTreeItem({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expanded && !multiSelectMode && 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) => (
|
||||
{expanded && node.children.map((child) => (
|
||||
<FolderTreeItem
|
||||
key={child.id}
|
||||
node={child}
|
||||
|
||||
Reference in New Issue
Block a user