lingo3d/lib/editor/component/TextBox.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 { useSignal } from "@preact/signals";
import { useEffect } from "preact/compat";
import CloseIcon from "./icons/CloseIcon";
import TextInput from "./TextInput";
import { CLICK_TIME } from "../../globals";
const TextBox = ({ style, fullWidth, onChange, clearOnChange, placeholder = "Search..." }) => {
    const textSignal = useSignal("");
    useEffect(() => {
        textSignal.value = "";
    }, [clearOnChange]);
    useEffect(() => {
        if (!textSignal.value) {
            onChange?.("");
            return;
        }
        const timeout = setTimeout(() => onChange?.(textSignal.value.trim()), CLICK_TIME);
        return () => {
            clearTimeout(timeout);
        };
    }, [textSignal.value]);
    return (_jsx("div", { className: "lingo3d-flexcenter", style: {
            width: "100%",
            flexShrink: 0,
            marginBottom: 8,
            ...style
        }, children: _jsxs("div", { style: {
                display: "flex",
                outline: "1px solid rgba(255, 255, 255, 0.1)",
                background: "rgba(255, 255, 255, 0.02",
                width: fullWidth ? "calc(100% - 2px)" : "calc(100% - 20px)"
            }, children: [_jsx(TextInput, { style: { flexGrow: 1, paddingLeft: 4 }, placeholder: placeholder, textSignal: textSignal, inputPadding: 6 }), _jsx("div", { className: "lingo3d-flexcenter", style: {
                        background: "rgba(255, 255, 255, 0.1)",
                        width: 22,
                        height: 22,
                        opacity: textSignal.value ? 1 : 0.2,
                        cursor: textSignal.value ? "pointer" : undefined
                    }, onClick: () => (textSignal.value = ""), children: _jsx(CloseIcon, {}) })] }) }));
};
export default TextBox;
//# sourceMappingURL=TextBox.js.map