fix: dir tree
This commit is contained in:
@@ -26,11 +26,11 @@ type WorkspaceTreeProps = {
|
||||
// 唯一标识此 group(通常 `__group__<owner_user_id>`),让多个 owner 的 group 各自独立展开。
|
||||
groupKey: string;
|
||||
expandedPaths: Set<string>;
|
||||
onToggle: (path: string) => void;
|
||||
onToggle: (path: string, loadPath?: string) => void;
|
||||
loadingChildrenPaths: Set<string>;
|
||||
};
|
||||
|
||||
type WorkspaceTreeItemsProps = Omit<WorkspaceTreeProps, "title" | "readOnly" | "groupKey"> & {
|
||||
type WorkspaceTreeItemsProps = Omit<WorkspaceTreeProps, "title" | "readOnly"> & {
|
||||
path: string;
|
||||
depth: number;
|
||||
};
|
||||
@@ -100,6 +100,7 @@ export function WorkspaceTreeGroup({
|
||||
{open && (
|
||||
<div className="tree-group__items">
|
||||
<WorkspaceTreeItems
|
||||
groupKey={groupKey}
|
||||
path=""
|
||||
depth={0}
|
||||
scripts={scripts}
|
||||
@@ -123,6 +124,7 @@ export function WorkspaceTreeGroup({
|
||||
}
|
||||
|
||||
function WorkspaceTreeItems({
|
||||
groupKey,
|
||||
path,
|
||||
depth,
|
||||
scripts,
|
||||
@@ -145,6 +147,7 @@ function WorkspaceTreeItems({
|
||||
{childDirectories.map((directory) => (
|
||||
<DirectoryBranch
|
||||
key={directory.path}
|
||||
groupKey={groupKey}
|
||||
directory={directory}
|
||||
depth={depth}
|
||||
scripts={scripts}
|
||||
@@ -196,6 +199,7 @@ function WorkspaceTreeItems({
|
||||
}
|
||||
|
||||
function DirectoryBranch({
|
||||
groupKey,
|
||||
directory,
|
||||
depth,
|
||||
scripts,
|
||||
@@ -209,7 +213,8 @@ function DirectoryBranch({
|
||||
}: Omit<WorkspaceTreeItemsProps, "path"> & {
|
||||
directory: WorkspaceDirectory;
|
||||
}) {
|
||||
const open = expandedPaths.has(directory.path);
|
||||
const expandKey = `${groupKey}/${directory.path}`;
|
||||
const open = expandedPaths.has(expandKey);
|
||||
const childrenLoading = loadingChildrenPaths.has(directory.path);
|
||||
return (
|
||||
<div className="directory-branch">
|
||||
@@ -217,7 +222,7 @@ function DirectoryBranch({
|
||||
className="directory-row"
|
||||
style={{ paddingLeft: 10 + depth * 16 }}
|
||||
type="button"
|
||||
onClick={() => onToggle(directory.path)}
|
||||
onClick={() => onToggle(expandKey, directory.path)}
|
||||
onContextMenu={onContextMenu
|
||||
? (event) => onContextMenu(event, {
|
||||
kind: "directory",
|
||||
@@ -234,6 +239,7 @@ function DirectoryBranch({
|
||||
</button>
|
||||
{open && (
|
||||
<WorkspaceTreeItems
|
||||
groupKey={groupKey}
|
||||
path={directory.path}
|
||||
depth={depth + 1}
|
||||
scripts={scripts}
|
||||
|
||||
@@ -109,7 +109,7 @@ type State = {
|
||||
createFolder: (name: string, parentPath: string) => Promise<void>;
|
||||
deleteScript: (script: ScriptItem) => Promise<void>;
|
||||
deleteDirectory: (path: string) => Promise<void>;
|
||||
toggleExpanded: (path: string) => Promise<void>;
|
||||
toggleExpanded: (path: string, loadPath?: string) => Promise<void>;
|
||||
loadChildren: (parentPath: string) => Promise<void>;
|
||||
toggleScriptLock: (script: ScriptItem) => Promise<void>;
|
||||
openPublishDialog: (script: ScriptItem) => void;
|
||||
@@ -292,7 +292,7 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
|
||||
}
|
||||
},
|
||||
|
||||
toggleExpanded: async (path) => {
|
||||
toggleExpanded: async (path, loadPath) => {
|
||||
const state = get();
|
||||
const isOpen = state.expandedPaths.has(path);
|
||||
const next = new Set(state.expandedPaths);
|
||||
@@ -301,8 +301,9 @@ export const useScriptWorkspaceStore = create<State>((set, get) => {
|
||||
} else {
|
||||
next.add(path);
|
||||
// group key (`__group__<owner_id>`) 不是 workspace 路径,不调 loadChildren
|
||||
if (!path.startsWith("__group__") && !state.loadedChildPaths.has(path)) {
|
||||
void get().loadChildren(path);
|
||||
const actualLoadPath = loadPath ?? path;
|
||||
if (!actualLoadPath.startsWith("__group__") && !state.loadedChildPaths.has(actualLoadPath)) {
|
||||
void get().loadChildren(actualLoadPath);
|
||||
}
|
||||
}
|
||||
set({ expandedPaths: next });
|
||||
|
||||
Reference in New Issue
Block a user