Events

<Button
    text="Click me"
    onClick={(e) => {
        console.log("Button clicked!")
        console.log("Position:", e.x, e.y)
    }}
/>

<View
    style={{ width: 200, height: 200, backgroundColor: "#333" }}
    onPointerDown={(e) => console.log("Pointer down", e.x, e.y)}
    onPointerUp={(e) => console.log("Pointer up")}
    onPointerMove={(e) => console.log("Pointer move", e.x, e.y)}
    onPointerEnter={(e) => console.log("Pointer entered")}
    onPointerLeave={(e) => console.log("Pointer left")}
>
    <Label text="Hover and click me" />
</View>

<TextField
    placeholder="Type here..."
    onFocus={(e) => console.log("Focused")}
    onBlur={(e) => console.log("Lost focus")}
/>

function TextInput() {
    const [value, setValue] = useState("")

    return (
        <TextField
            value={value}
            onChange={(e) => setValue(e.value)}
            placeholder="Enter text..."
        />
    )
}

function ToggleSwitch() {
    const [enabled, setEnabled] = useState(false)

    return (
        <Toggle
            value={enabled}
            onChange={(e) => setEnabled(e.value)}
            label="Enable feature"
        />
    )
}

function VolumeSlider() {
    const [volume, setVolume] = useState(50)

    return (
        <Slider
            value={volume}
            lowValue={0}
            highValue={100}
            onChange={(e) => setVolume(e.value)}
        />
    )
}

<TextField
    onKeyDown={(e) => {
        if (e.keyCode === CS.UnityEngine.KeyCode.Return) {
            console.log("Enter pressed!")
        }
    }}
/>

<View onClick={() => console.log("Parent clicked")}>
    <Button
        text="Click"
        onClick={(e) => {
            console.log("Button clicked")
            // Event will also trigger parent's onClick
        }}
    />
</View>

<Button
    onClick={(e) => {
        e.stopPropagation()
        console.log("Only this handler runs")
    }}
/>

function Draggable({ children }) {
    const [pos, setPos] = useState({ x: 0, y: 0 })
    const [dragging, setDragging] = useState(false)
    const startPos = useRef({ x: 0, y: 0 })

    return (
        <View
            style={{
                position: "absolute",
                left: pos.x,
                top: pos.y,
                cursor: dragging ? "grabbing" : "grab",
            }}
            onPointerDown={(e) => {
                setDragging(true)
                startPos.current = { x: e.x - pos.x, y: e.y - pos.y }
            }}
            onPointerMove={(e) => {
                if (dragging) {
                    setPos({
                        x: e.x - startPos.current.x,
                        y: e.y - startPos.current.y,
                    })
                }
            }}
            onPointerUp={() => setDragging(false)}
            onPointerLeave={() => setDragging(false)}
        >
            {children}
        </View>
    )
}

function useInput() {
    const [keys, setKeys] = useState({ w: false, a: false, s: false, d: false })

    useEffect(() => {
        function checkInput() {
            setKeys({
                w: CS.UnityEngine.Input.GetKey(CS.UnityEngine.KeyCode.W),
                a: CS.UnityEngine.Input.GetKey(CS.UnityEngine.KeyCode.A),
                s: CS.UnityEngine.Input.GetKey(CS.UnityEngine.KeyCode.S),
                d: CS.UnityEngine.Input.GetKey(CS.UnityEngine.KeyCode.D),
            })
            requestAnimationFrame(checkInput)
        }
        const id = requestAnimationFrame(checkInput)
        return () => cancelAnimationFrame(id)
    }, [])

    return keys
}

<View
    onMouseDown={(e) => console.log("Mouse down", e.button)}
    onMouseUp={(e) => console.log("Mouse up")}
    onMouseMove={(e) => console.log("Mouse move", e.x, e.y)}
    onMouseEnter={(e) => console.log("Mouse entered")}
    onMouseLeave={(e) => console.log("Mouse left")}
    onMouseOver={(e) => console.log("Mouse over")}
    onMouseOut={(e) => console.log("Mouse out")}
    onWheel={(e) => console.log("Wheel delta", e.delta.y)}
    onContextClick={(e) => console.log("Right-click menu")}
>
    <Label text="Mouse interactions" />
</View>

<View
    onGeometryChanged={(e) => {
        console.log("Old rect:", e.oldRect)
        console.log("New rect:", e.newRect)
    }}
>
    <Label text="Resizable content" />
</View>

<View
    className="animated"
    onTransitionStart={(e) => console.log("Transition started:", e.styleProperty)}
    onTransitionEnd={(e) => console.log("Transition ended:", e.styleProperty)}
    onTransitionRun={(e) => console.log("Transition running")}
    onTransitionCancel={(e) => console.log("Transition cancelled")}
>
    <Label text="Animated element" />
</View>

<View
    onNavigationMove={(e) => console.log("Navigation direction:", e.direction)}
    onNavigationSubmit={(e) => console.log("Navigation submit")}
    onNavigationCancel={(e) => console.log("Navigation cancel")}
>
    <Label text="Navigable element" />
</View>

<View onTooltip={() => console.log("Tooltip triggered")}>
    <Label text="Hover for tooltip" />
</View>