some more tweaks

This commit is contained in:
Chris Kruining 2024-10-16 16:30:42 +02:00
parent 5851d398d3
commit d000b85429
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2

View file

@ -1,4 +1,4 @@
import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js"; import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, onMount, ParentComponent, Show, useContext } from "solid-js";
import { createStore, produce } from "solid-js/store"; import { createStore, produce } from "solid-js/store";
import { SelectionProvider, useSelection, selectable } from "../selectable"; import { SelectionProvider, useSelection, selectable } from "../selectable";
import css from './grid.module.css'; import css from './grid.module.css';
@ -200,25 +200,30 @@ const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props)
}; };
const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => { const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
const resize = (element: HTMLElement) => { let element: HTMLTextAreaElement;
const resize = () => {
element.style.blockSize = `1px`; element.style.blockSize = `1px`;
element.style.blockSize = `${11 + element.scrollHeight}px`; element.style.blockSize = `${11 + element.scrollHeight}px`;
}; };
const mutate = debounce((element: HTMLTextAreaElement) => { const mutate = debounce(() => {
props.oninput?.(new InputEvent('input', { props.oninput?.(new InputEvent('input', {
data: element.value.trim(), data: element.value.trim(),
})) }))
}, 300); }, 300);
const onKeyUp = (e: KeyboardEvent) => { const onKeyUp = (e: KeyboardEvent) => {
const element = e.target as HTMLTextAreaElement; resize();
mutate();
resize(element);
mutate(element);
}; };
onMount(() => {
resize();
});
return <textarea return <textarea
ref={element}
value={props.value} value={props.value}
lang={props.lang} lang={props.lang}
placeholder={props.lang} placeholder={props.lang}