2022-03-03 00:42:43 +08:00
|
|
|
<script lang="ts">
|
2022-04-07 00:49:59 +08:00
|
|
|
import { createEventDispatcher, tick } from "svelte";
|
2022-05-04 01:28:57 +08:00
|
|
|
import { BlockTitle } from "@gradio/atoms";
|
2022-03-03 00:42:43 +08:00
|
|
|
|
|
|
|
export let value: string = "";
|
|
|
|
export let lines: number = 1;
|
2022-04-21 17:27:12 +08:00
|
|
|
export let placeholder: string = "Type here...";
|
2022-04-06 01:11:29 +08:00
|
|
|
export let label: string;
|
2022-04-08 03:36:49 +08:00
|
|
|
export let disabled = false;
|
2022-05-04 01:28:57 +08:00
|
|
|
export let show_label: boolean = true;
|
|
|
|
export let max_lines: number | false;
|
|
|
|
|
2022-05-19 06:21:17 +08:00
|
|
|
let el: HTMLTextAreaElement | HTMLInputElement;
|
2022-05-04 01:28:57 +08:00
|
|
|
|
|
|
|
$: value, el && lines !== max_lines && resize({ target: el });
|
|
|
|
$: handle_change(value);
|
2022-03-03 00:42:43 +08:00
|
|
|
|
2022-04-26 22:48:39 +08:00
|
|
|
const dispatch = createEventDispatcher<{
|
|
|
|
change: string;
|
|
|
|
submit: undefined;
|
2022-10-13 11:53:05 +08:00
|
|
|
blur: undefined;
|
2022-04-26 22:48:39 +08:00
|
|
|
}>();
|
2022-03-03 00:42:43 +08:00
|
|
|
|
2022-04-07 00:49:59 +08:00
|
|
|
function handle_change(val: string) {
|
|
|
|
dispatch("change", val);
|
2022-03-03 00:42:43 +08:00
|
|
|
}
|
|
|
|
|
2022-10-13 11:53:05 +08:00
|
|
|
function handle_blur(e: FocusEvent) {
|
|
|
|
dispatch("blur");
|
|
|
|
}
|
|
|
|
|
2022-04-07 00:49:59 +08:00
|
|
|
async function handle_keypress(e: KeyboardEvent) {
|
|
|
|
await tick();
|
2022-09-09 05:02:03 +08:00
|
|
|
if (e.key === "Enter" && e.shiftKey && lines > 1) {
|
|
|
|
e.preventDefault();
|
|
|
|
dispatch("submit");
|
|
|
|
} else if (
|
|
|
|
e.key === "Enter" &&
|
|
|
|
!e.shiftKey &&
|
|
|
|
lines === 1 &&
|
|
|
|
max_lines >= 1
|
|
|
|
) {
|
2022-03-17 00:34:30 +08:00
|
|
|
e.preventDefault();
|
|
|
|
dispatch("submit");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-19 06:21:17 +08:00
|
|
|
async function resize(
|
|
|
|
event: Event | { target: HTMLTextAreaElement | HTMLInputElement }
|
|
|
|
) {
|
2022-04-08 03:36:49 +08:00
|
|
|
await tick();
|
2022-05-04 01:28:57 +08:00
|
|
|
if (lines === max_lines) return;
|
|
|
|
|
|
|
|
let max =
|
|
|
|
max_lines === false
|
|
|
|
? false
|
|
|
|
: max_lines === undefined // default
|
2022-05-17 01:22:09 +08:00
|
|
|
? 21 * 11
|
|
|
|
: 21 * (max_lines + 1);
|
|
|
|
let min = 21 * (lines + 1);
|
2022-04-08 03:36:49 +08:00
|
|
|
|
|
|
|
const target = event.target as HTMLTextAreaElement;
|
|
|
|
target.style.height = "1px";
|
|
|
|
|
2022-05-04 01:28:57 +08:00
|
|
|
let scroll_height;
|
|
|
|
if (max && target.scrollHeight > max) {
|
|
|
|
scroll_height = max;
|
|
|
|
} else if (target.scrollHeight < min) {
|
|
|
|
scroll_height = min;
|
|
|
|
} else {
|
|
|
|
scroll_height = target.scrollHeight;
|
|
|
|
}
|
|
|
|
|
|
|
|
target.style.height = `${scroll_height}px`;
|
|
|
|
}
|
2022-04-08 03:36:49 +08:00
|
|
|
|
2022-05-04 01:28:57 +08:00
|
|
|
function text_area_resize(el: HTMLTextAreaElement, value: string) {
|
|
|
|
if (lines === max_lines) return;
|
2022-05-17 01:22:09 +08:00
|
|
|
el.style.overflowY = "scroll";
|
2022-04-08 03:36:49 +08:00
|
|
|
el.addEventListener("input", resize);
|
|
|
|
|
2022-04-14 22:12:30 +08:00
|
|
|
if (!value.trim()) return;
|
|
|
|
resize({ target: el });
|
|
|
|
|
2022-04-08 03:36:49 +08:00
|
|
|
return {
|
2022-05-04 01:28:57 +08:00
|
|
|
destroy: () => el.removeEventListener("input", resize)
|
2022-04-08 03:36:49 +08:00
|
|
|
};
|
|
|
|
}
|
2022-03-03 00:42:43 +08:00
|
|
|
</script>
|
|
|
|
|
2022-04-26 22:48:39 +08:00
|
|
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
2022-05-13 22:47:50 +08:00
|
|
|
<label class="block w-full">
|
2022-04-27 18:47:15 +08:00
|
|
|
<BlockTitle {show_label}>{label}</BlockTitle>
|
2022-03-03 00:42:43 +08:00
|
|
|
|
2022-05-14 09:37:55 +08:00
|
|
|
{#if lines === 1 && max_lines === 1}
|
|
|
|
<input
|
2022-07-01 13:27:47 +08:00
|
|
|
data-testid="textbox"
|
2022-05-14 09:37:55 +08:00
|
|
|
type="text"
|
2022-10-04 07:01:41 +08:00
|
|
|
class="scroll-hide block gr-box gr-input w-full gr-text-input"
|
2022-05-14 09:37:55 +08:00
|
|
|
bind:value
|
|
|
|
bind:this={el}
|
|
|
|
{placeholder}
|
|
|
|
{disabled}
|
2022-05-19 06:21:17 +08:00
|
|
|
on:keypress={handle_keypress}
|
2022-10-13 11:53:05 +08:00
|
|
|
on:blur={handle_blur}
|
2022-05-14 09:37:55 +08:00
|
|
|
/>
|
|
|
|
{:else}
|
|
|
|
<textarea
|
2022-07-01 13:27:47 +08:00
|
|
|
data-testid="textbox"
|
2022-05-14 09:37:55 +08:00
|
|
|
use:text_area_resize={value}
|
2022-10-04 07:01:41 +08:00
|
|
|
class="scroll-hide block gr-box gr-input w-full gr-text-input"
|
2022-05-14 09:37:55 +08:00
|
|
|
bind:value
|
|
|
|
bind:this={el}
|
|
|
|
{placeholder}
|
|
|
|
rows={lines}
|
|
|
|
{disabled}
|
2022-09-09 05:02:03 +08:00
|
|
|
on:keypress={handle_keypress}
|
2022-10-13 11:53:05 +08:00
|
|
|
on:blur={handle_blur}
|
2022-05-14 09:37:55 +08:00
|
|
|
/>
|
|
|
|
{/if}
|
2022-04-26 22:48:39 +08:00
|
|
|
</label>
|