File size: 2,426 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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<script lang="ts">
import { Gradio } from "./gradio_helper";
import { onMount, createEventDispatcher, setContext } from "svelte";
import type { ComponentMeta, ThemeMode } from "./types";
export let root: string;
export let component: ComponentMeta["component"];
export let instance_map: Record<number, ComponentMeta>;
export let id: number;
export let props: ComponentMeta["props"];
export let children: ComponentMeta["children"];
export let dynamic_ids: Set<number>;
export let parent: string | null = null;
export let target: HTMLElement;
export let theme_mode: ThemeMode;
export let version: string;
export let autoscroll: boolean;
const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
let filtered_children: ComponentMeta[] = [];
onMount(() => {
dispatch("mount", id);
for (const child of filtered_children) {
dispatch("mount", child.id);
}
return () => {
dispatch("destroy", id);
for (const child of filtered_children) {
dispatch("mount", child.id);
}
};
});
$: children =
children &&
children.filter((v) => {
const valid_node = instance_map[v.id].type !== "statustracker";
if (!valid_node) {
filtered_children.push(v);
}
return valid_node;
});
setContext("BLOCK_KEY", parent);
function handle_prop_change(e: { detail: Record<string, any> }): void {
for (const k in e.detail) {
instance_map[id].props[k] = e.detail[k];
}
}
$: {
if (instance_map[id].type === "form") {
if (children?.every((c) => !c.props.visible)) {
props.visible = false;
} else {
props.visible = true;
}
}
}
</script>
<svelte:component
this={component}
bind:this={instance_map[id].instance}
bind:value={instance_map[id].props.value}
elem_id={("elem_id" in props && props.elem_id) || `component-${id}`}
elem_classes={("elem_classes" in props && props.elem_classes) || []}
on:prop_change={handle_prop_change}
{target}
{...props}
{theme_mode}
{root}
gradio={new Gradio(id, target, theme_mode, version, root, autoscroll)}
>
{#if children && children.length}
{#each children as { component, id: each_id, props, children: _children, has_modes } (each_id)}
<svelte:self
{component}
{target}
id={each_id}
{props}
{root}
{instance_map}
children={_children}
{dynamic_ids}
{has_modes}
{theme_mode}
on:destroy
on:mount
/>
{/each}
{/if}
</svelte:component>
|