static mode for textbox (#929)

* static mode for textbox

* fix checkbox and remove title

* address comments

* autoresize textarea for output textbox

* wait for the DOM to update before resizing the textarea

demo/blocks_inputs/run.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+str = """Hello friends
+hello friends
+
+Hello friends
+
+"""
+
+
+
+with gr.Blocks() as demo:
+    txt = gr.Textbox(label="Input", lines=5)
+    txt_2 = gr.Textbox(label="Output")
+    txt_3 = gr.Textbox(str, label="Output")
+    btn = gr.Button('Submit')
+    btn.click(lambda a : a, inputs=[txt], outputs=[txt_2])
+
+if __name__ == "__main__":
+    demo.launch()

ui/packages/app/src/components/Dropdown/Dropdown.svelte

@@ -6,7 +6,16 @@
 	export let style: string = "";
 	export let choices: Array<string>;
 
+	export let mode: "static" | "dynamic";
+
 	if (default_value) value = default_value;
 </script>
 
-<Dropdown bind:value {style} {choices} {label} on:change />
+<Dropdown
+	bind:value
+	{style}
+	{choices}
+	{label}
+	on:change
+	disabled={mode === "static"}
+/>

ui/packages/app/src/components/Dropdown/index.ts

@@ -1,2 +1,2 @@
 export { default as Component } from "./Dropdown.svelte";
-export const modes = ["dynamic"];
+export const modes = ["static", "dynamic"];

ui/packages/app/src/components/Textbox/Textbox.svelte

@@ -15,27 +15,14 @@
 	if (default_value) value = default_value;
 </script>
 
-{#if mode === "static"}
-	<div
-		class="output-text w-full bg-white dark:bg-gray-800 rounded box-border p-2 whitespace-pre-wrap"
-		{style}
-	>
-		{value}
-	</div>
-{:else}
-	<TextBox
-		bind:value
-		{label}
-		{style}
-		{lines}
-		{placeholder}
-		on:change
-		on:submit
-	/>
-{/if}
-
-<style lang="postcss" global>
-	.output-text[theme="default"] {
-		@apply shadow transition hover:shadow-md dark:bg-gray-800;
-	}
-</style>
+<TextBox
+	bind:value
+	{label}
+	{style}
+	{lines}
+	autoheight={mode === "static"}
+	{placeholder}
+	on:change
+	on:submit
+	disabled={mode === "static"}
+/>

ui/packages/form/src/Checkbox.svelte

@@ -18,9 +18,9 @@
 
 <Block>
 	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<BlockTitle>{label}</BlockTitle>
-	<label class="w-auto gr-box-sm gr-box inline-block">
+	<label class="">
 		<input
+			bind:checked={value}
 			{disabled}
 			type="checkbox"
 			name="test"

ui/packages/form/src/CheckboxGroup.svelte

@@ -32,6 +32,7 @@
 				<input
 					{disabled}
 					on:change={() => toggleChoice(choice)}
+					checked={value.includes(choice)}
 					type="checkbox"
 					name="test"
 					class="gr-check-radio rounded checked:shadow-inner"

ui/packages/form/src/Dropdown.svelte

@@ -6,6 +6,7 @@
 	export let value: string | undefined = undefined;
 	export let choices: Array<string>;
 	export let style: string;
+	export let disabled: boolean = false;
 
 	const dispatch = createEventDispatcher<{ change: string }>();
 
@@ -15,7 +16,7 @@
 <Block>
 	<label>
 		<BlockTitle>{label}</BlockTitle>
-		<select class="gr-box gr-input w-full" bind:value>
+		<select class="gr-box gr-input w-full" bind:value {disabled}>
 			{#each choices as choice, i}
 				<option>{choice}</option>
 			{/each}

ui/packages/form/src/Range.svelte

@@ -7,7 +7,7 @@
 	import { Block, BlockTitle } from "@gradio/atoms";
 
 	export let value: number = 0;
-	export let style: string | null;
+	export let style: string | null = "";
 	export let minimum: number = 0;
 	export let maximum: number = 100;
 	export let step: number = 1;

ui/packages/form/src/Textbox.svelte

@@ -7,6 +7,8 @@
 	export let placeholder: string = "";
 	export let label: string;
 	export let style: string;
+	export let disabled = false;
+	export let autoheight: boolean = false;
 
 	const dispatch =
 		createEventDispatcher<{ change: string; submit: undefined }>();
@@ -25,6 +27,30 @@
 	}
 
 	$: handle_change(value);
+
+	async function resize(event: Event | { target: HTMLTextAreaElement }) {
+		await tick();
+
+		const target = event.target as HTMLTextAreaElement;
+		target.style.height = "1px";
+		target.style.height = +target.scrollHeight + "px";
+	}
+
+	function text_area_resize(
+		el: HTMLTextAreaElement,
+		{ enabled, value }: { enabled: boolean; value: string }
+	) {
+		if (!enabled) return;
+
+		resize({ target: el });
+		el.style.overflow = "hidden";
+		el.addEventListener("input", resize);
+
+		return {
+			destroy: () => el.removeEventListener("input", resize),
+			update: () => resize({ target: el })
+		};
+	}
 </script>
 
 <Block>
@@ -32,13 +58,15 @@
 	<label class="block">
 		<BlockTitle>{label}</BlockTitle>
 
-		{#if lines > 1}
+		{#if autoheight || lines > 1}
 			<textarea
+				use:text_area_resize={{ enabled: autoheight, value }}
 				class="block gr-box gr-input w-full gr-text-input"
 				bind:value
 				{placeholder}
 				{style}
-				rows={lines}
+				rows={autoheight ? null : lines}
+				{disabled}
 			/>
 		{:else}
 			<input
@@ -48,6 +76,7 @@
 				bind:value
 				on:keypress={handle_keypress}
 				{style}
+				{disabled}
 			/>
 		{/if}
 	</label>

ui/packages/workbench/src/routes/forms.svelte

@@ -30,5 +30,51 @@
 	<CheckboxGroup label="CheckboxGroup" choices={["one", "two"]} value={[]} />
 
 	<Dropdown label="Dropdown" choices={["one", "two", "three"]} />
-	<Range label="Dropdown" choices={["one", "two", "three"]} />
+	<Range label="Dropdown" />
+
+	<TextBox
+		on:change={({ detail }) => console.log(detail)}
+		label="Static TextBox"
+		disabled
+		value="Some text"
+	/>
+
+	<TextBox
+		label="Static TextArea"
+		lines={5}
+		on:change={({ detail }) => console.log(detail)}
+		placeholder="Type here..."
+		disabled
+		value={`Some longer text.
+Some more.
+
+And more.`}
+	/>
+
+	<Number
+		label="Number"
+		on:change={({ detail }) => console.log(detail)}
+		disabled
+		value={10}
+	/>
+
+	<Radio label="Radio" choices={["true", "false"]} value={"true"} disabled />
+
+	<Checkbox label="Checkbox" value={false} disabled />
+
+	<CheckboxGroup
+		label="CheckboxGroup"
+		choices={["one", "two"]}
+		value={["one"]}
+		disabled
+	/>
+
+	<Dropdown
+		label="Dropdown"
+		choices={["one", "two", "three"]}
+		value="three"
+		disabled
+	/>
+
+	<Range label="Dropdown" value={27} disabled />
 </Panel>