lingo3d/lib/editor/component/TextInput.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useEffect, useRef } from "preact/compat";
import { stopPropagation } from "../utils/stopPropagation";
const TextInput = ({ style, className, placeholder, textSignal, autoFocus, onEnter, onEscape, onArrowDown, onArrowUp, children, inputPadding }) => {
    const inputRef = useRef(null);
    useEffect(() => {
        const el = inputRef.current;
        if (!autoFocus || !el)
            return;
        const timeout = setTimeout(() => el.focus());
        return () => {
            clearTimeout(timeout);
        };
    }, [autoFocus]);
    useEffect(() => {
        if (textSignal?.value || !inputRef.current)
            return;
        inputRef.current.value = "";
    }, [textSignal?.value]);
    return (_jsxs("div", { ref: stopPropagation, style: { minWidth: 50, minHeight: 20, ...style }, className: className, children: [_jsx("div", { style: {
                    paddingLeft: inputPadding,
                    paddingRight: inputPadding,
                    width: "100%",
                    height: "100%"
                }, children: _jsx("input", { ref: inputRef, className: "lingo3d-unset", style: { width: "100%", height: "100%" }, placeholder: placeholder, autocomplete: "off", onInput: (e) => textSignal && (textSignal.value = e.currentTarget.value), onKeyDown: (e) => {
                        if (e.key === "Enter")
                            onEnter?.(textSignal?.value ?? "");
                        else if (e.key === "Escape")
                            onEscape?.(textSignal?.value ?? "");
                        else if (e.key === "ArrowDown")
                            onArrowDown?.();
                        else if (e.key === "ArrowUp")
                            onArrowUp?.();
                    } }) }), children] }));
};
export default TextInput;
//# sourceMappingURL=TextInput.js.map