lingo3d/lib/editor/component/SelectBox.js

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

import { jsx as _jsx } from "preact/jsx-runtime";
import { useLayoutEffect, useRef } from "preact/hooks";
import usePane from "../Editor/usePane";
import mergeRefs from "../hooks/mergeRefs";
import { stopPropagation } from "../utils/stopPropagation";
const SelectBox = ({ options = [], label = "", onChange, style, width }) => {
    const [pane, setContainer] = usePane();
    const elRef = useRef(null);
    useLayoutEffect(() => {
        const el = elRef.current;
        if (!pane || !el)
            return;
        let index = -1;
        const params = {
            get [label]() {
                return index;
            },
            set [label](val) {
                index = val;
                onChange?.(val, options[val]);
            }
        };
        let i = 0;
        const optionsRecord = {};
        for (const option of options)
            optionsRecord[option] = i++;
        const cameraInput = pane.addInput(params, label, {
            options: optionsRecord
        });
        if (width)
            el.querySelector(".tp-lblv_v").style.width =
                width + "px";
        return () => {
            cameraInput.dispose();
        };
    }, [pane, JSON.stringify(options)]);
    return (_jsx("div", { ref: mergeRefs(elRef, setContainer, stopPropagation), style: { marginLeft: !label ? -20 : 0, ...style } }));
};
export default SelectBox;
//# sourceMappingURL=SelectBox.js.map