some more tweaks
This commit is contained in:
parent
5851d398d3
commit
d000b85429
1 changed files with 12 additions and 7 deletions
|
@ -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}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue