File size: 1,719 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<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>
|