File size: 2,397 Bytes
0ad74ed |
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<script lang="ts">
import { Gradio, formatter } from "./gradio_helper";
import { onMount, createEventDispatcher, setContext } from "svelte";
import type { ComponentMeta, ThemeMode } from "./types";
import type { Client } from "@gradio/client";
import RenderComponent from "./RenderComponent.svelte";
import { load_component } from "virtual:component-loader";
export let root: string;
export let node: ComponentMeta;
export let parent: string | null = null;
export let target: HTMLElement;
export let theme_mode: ThemeMode;
export let version: string;
export let autoscroll: boolean;
export let max_file_size: number | null;
export let client: Client;
const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
let filtered_children: ComponentMeta[] = [];
onMount(() => {
dispatch("mount", node.id);
for (const child of filtered_children) {
dispatch("mount", child.id);
}
return () => {
dispatch("destroy", node.id);
for (const child of filtered_children) {
dispatch("mount", child.id);
}
};
});
$: {
if (node) {
node.children =
node.children &&
node.children.filter((v) => {
const valid_node = node.type !== "statustracker";
if (!valid_node) {
filtered_children.push(v);
}
return valid_node;
});
}
}
setContext("BLOCK_KEY", parent);
$: {
if (node && node.type === "form") {
if (node.children?.every((c) => !c.props.visible)) {
node.props.visible = false;
} else {
node.props.visible = true;
}
}
}
$: node.props.gradio = new Gradio<Record<string, any>>(
node.id,
target,
theme_mode,
version,
root,
autoscroll,
max_file_size,
formatter,
client,
load_component
);
</script>
<RenderComponent
_id={node?.id}
component={node.component}
bind:instance={node.instance}
bind:value={node.props.value}
elem_id={("elem_id" in node.props && node.props.elem_id) ||
`component-${node.id}`}
elem_classes={("elem_classes" in node.props && node.props.elem_classes) || []}
{target}
{...node.props}
{theme_mode}
{root}
>
{#if node.children && node.children.length}
{#each node.children as _node (_node.id)}
<svelte:self
node={_node}
component={_node.component}
{target}
id={_node.id}
{root}
{theme_mode}
on:destroy
on:mount
{max_file_size}
{client}
/>
{/each}
{/if}
</RenderComponent>
|