js/fileexplorer/shared/DirectoryExplorer.svelte

<script lang="ts">
	import { createEventDispatcher } from "svelte";
	import { dequal } from "dequal";
	import FileTree from "./FileTree.svelte";
	import { make_fs_store } from "./utils";
	import { File } from "@gradio/icons";
	import { Empty } from "@gradio/atoms";

	export let glob: string;
	export let ignore_glob: string;
	export let root_dir: string;
	export let interactive: boolean;
	export let server: any;
	export let file_count: "single" | "multiple" = "multiple";

	export let value: string[][] = [];

	const dispatch = createEventDispatcher<{
		change: typeof value;
	}>();
	const tree = make_fs_store();

	const render_tree = (): void => {
		server.ls().then((v: any) => {
			tree.create_fs_graph(v);
		});
	};

	$: glob, ignore_glob, root_dir, render_tree();

	$: value.length && $tree && set_checked_from_paths();

	function set_checked_from_paths(): void {
		value = file_count === "single" ? [value[0] || []] : value;
		value = tree.set_checked_from_paths(value);
		if (!dequal(value, old_value)) {
			old_value = value;
			dispatch("change", value);
		}
	}

	let old_value: typeof value = [];
	function handle_select({
		node_indices,
		checked
	}: {
		node_indices: number[];
		checked: boolean;
	}): void {
		value = tree.set_checked(node_indices, checked, value, file_count);
		if (!dequal(value, old_value)) {
			old_value = value;
			dispatch("change", value);
		}
	}
</script>

{#if $tree && $tree.length}
	<div class="file-wrap">
		<FileTree
			tree={$tree}
			{interactive}
			on:check={({ detail }) => handle_select(detail)}
			{file_count}
		/>
	</div>
{:else}
	<Empty size="large"><File /></Empty>
{/if}

<style>
	.file-wrap {
		height: calc(100% - 25px);
		overflow-y: scroll;
	}
</style>